Como usar
- Escolha uma imagem ou arraste-a para a caixa.
- Mova o ponteiro sobre a imagem; a lupa mostra os pixels ao redor.
- Clique ou toque para selecionar a cor e copiá-la como HEX, RGB ou HSL.
- Role para baixo para ver as cores dominantes, escolha quantas deseja e copie-as ou baixe-as como variáveis CSS.
Como funciona
A imagem é desenhada em um canvas no seu navegador, e a cor do pixel exato sob o ponteiro é lida a partir desse canvas. A lupa mostra uma área de 11 × 11 pixels ampliada, com o pixel selecionado contornado. Imagens com mais de 4096 pixels por lado são reduzidas primeiro; por isso, em fotos muito grandes, um pixel selecionado corresponde à média de alguns pixels originais.
As cores dominantes são identificadas por agrupamento k-means: os pixels são primeiro agrupados em 32.768 pequenos grupos de cores e, depois, os grupos são combinados no número de cores que você escolher, ponderados pela quantidade de pixels que cada um contém. Os pontos iniciais são escolhidos de maneira determinística, então a mesma imagem sempre gera a mesma paleta.
As cores são lidas no espaço sRGB que o navegador usa para exibição. Se a imagem tiver um perfil de cor de ampla gama incorporado, os valores podem ser ligeiramente diferentes dos exibidos por um editor de fotos. Em navegadores compatíveis (Chrome e Edge em computadores), o botão Capturar da tela usa o EyeDropper integrado para obter uma cor de qualquer lugar da tela.
Exemplos
Identificando a cor de uma marca
Envie uma captura de tela de um logotipo, clique na cor principal e copie #1a73e8 ou rgb(26, 115, 232) para o seu CSS.
Paleta a partir de uma foto
Uma foto de praia dividida em 6 cores gera tons de areia, mar e céu, cada um com a proporção da imagem que cobre, ordenados do maior para o menor.
Verificando um tom
Aproxime a imagem com a lupa para selecionar o pixel exato de uma linha fina, em vez da borda suavizada ao lado.
Perguntas frequentes
Por que a cor fica um pouco diferente da do meu editor de fotos?
Os navegadores convertem as imagens para sRGB para exibição. Fotos com um perfil de ampla gama (Display P3, Adobe RGB) podem mostrar valores ligeiramente diferentes em um editor que mantém o perfil original.
Por que o botão Selecionar da tela não aparece?
Ele exige a API EyeDropper, compatível apenas com alguns navegadores, atualmente Chrome e Edge no desktop. Selecionar a partir da imagem enviada funciona em todos.
Como as cores dominantes são escolhidas?
Por agrupamento k-means de todos os pixels, ponderado pela frequência com que cada cor aparece. Detalhes pequenos e vívidos podem ser mesclados a uma cor próxima maior; aumente o número de cores para separá-los.
A imagem é enviada?
Não. Ela é decodificada e analisada por esta página no seu navegador e nunca sai do seu dispositivo.
Privacidade
A imagem é processada totalmente no seu navegador. Ela não é enviada, e as cores selecionadas não são enviadas nem armazenadas.