Como usar: Conta-gotas de cores de imagem
- 1
Abra uma imagem
Solte, escolha ou cole uma captura de tela, foto ou logo de até 25 MB — JPG, PNG, WebP, AVIF, HEIC, GIF ou SVG.
- 2
Mire com a lupa
Passe o mouse ou arraste sobre a imagem; uma lupa de 11 × 11 pixels mostra o pixel exato sob a mira e o código HEX dele.
- 3
Clique para escolher
Veja os valores em HEX, RGB, HSL e OKLCH, cada um com seu próprio botão de copiar. As setas do teclado movem a mira e Enter escolhe a cor.
- 4
Pegue a paleta
Escolha de 5 a 12 cores dominantes e copie como variáveis CSS, JSON ou um bloco de tema do Tailwind.
Limites e Pro
Uma imagem por vez, de até 25 MB, com escolhas ilimitadas, de 5 a 12 cores na paleta e histórico de 24 cores.
Com o Pro, você pode analisar imagens de até 4 GB. Ver o Pro
Sobre: Conta-gotas de cores de imagem
O seletor de cores de imagem lê o valor exato de qualquer pixel de uma imagem e transforma a imagem inteira em uma paleta. Cada cor escolhida aparece em quatro notações: HEX para ferramentas de design, rgb() e hsl() para CSS, e oklch() para o trabalho com cores no CSS moderno, em que luminosidade e croma se comportam como o olho espera. As cores escolhidas vão para um histórico das últimas 24, guardado neste navegador para continuar lá na próxima vez; no Chrome e no Edge para computador, Escolher da tela também captura qualquer cor fora da página por meio do conta-gotas do navegador.
A paleta é calculada por agrupamento k-means no espaço de cores OKLab, em uma cópia da imagem reduzida para no máximo 200 pixels no lado mais longo. Grupos parecidos são unidos, pixels transparentes são ignorados e as cores são ordenadas pela área que ocupam na imagem, com a porcentagem exibida em cada amostra. A mesma imagem sempre gera a mesma paleta.
Designers usam a ferramenta para identificar a cor de uma marca a partir de um logo, criar um tema a partir de uma foto, conferir a cor exata de um botão em uma captura de tela ou montar um moodboard. Os valores são sRGB padrão, como o navegador exibe a imagem; por isso, um artefato de JPG ou uma origem de gama ampla pode deslocar a cor em algumas unidades em relação ao arquivo de design original. Pixels semitransparentes informam a cor sem a transparência, e a ferramenta não dá nome às cores nem verifica taxas de contraste.
Privacidade
A imagem é decodificada e analisada nesta aba, e o agrupamento da paleta roda em um pequeno Web Worker criado depois que você abre a imagem; nada é enviado. O histórico de cores fica salvo apenas no armazenamento local deste navegador, e Escolher da tela usa o conta-gotas nativo do navegador, que compartilha com esta página somente a cor escolhida e mais nada.
Recursos
Lupa com precisão de pixel
Lupa de 11 × 11 pixels com ajuste pelo teclado para escolhas precisas com mouse e toque.
Paleta dominante
De 5 a 12 cores por k-means em OKLab, ordenadas pela parte que ocupam na imagem.
Exportação para desenvolvedores
Valores em HEX, RGB, HSL e OKLCH, além de variáveis CSS, JSON ou um bloco @theme do Tailwind.
Histórico de cores
Suas últimas 24 cores ficam neste navegador, prontas para copiar como lista.