Seletor de cores para imagens: extraia o código de uma cor da imagem

Carregue a imagem no Image Color Picker e clique no ponto cuja cor você quer identificar. A ferramenta mostra imediatamente os valores HEX, RGB e HSL do pixel. Use “Copiar” para copiar o valor. Um clique no sol da imagem de exemplo retorna #ffd166. No código HEX, cada par de dígitos representa vermelho, verde e azul (ff = 255, d1 = 209, 66 = 102). Portanto, #ffd166 equivale a rgb(255, 209, 102) e hsl(42, 100 %, 70 %).

Um conta-gotas, também chamado de seletor de cores, identifica a cor em um ponto e fornece seu código. O Image Color Picker é um conta-gotas online para imagens que funciona no navegador, inclusive no celular, sem precisar de aplicativo. No celular, toque em um ponto e arraste o dedo; a lupa mostra os pixels abaixo dele. Com o teclado, mova a seleção em 1 pixel com as setas (ou 10 com Shift) e salve a cor no histórico com Enter.

Não. A imagem é colocada em uma tela de desenho e analisada no seu navegador. Não há upload nem armazenamento; até o histórico das cores selecionadas fica apenas nesta aba. Você pode conferir na aba Rede das ferramentas de desenvolvedor: carregar a imagem e clicar nela não gera requisições.

Faça uma captura de tela (Windows: Windows+Shift+S; Mac: Cmd+Shift+4, com Strg para copiar para a área de transferência) e cole-a na ferramenta com Strg+V (Mac: Cmd+V). Depois, clique no ponto desejado e copie o código de cor. Assim, você identifica cores de um site, aplicativo ou jogo sem extensão de navegador.

Há quatro motivos comuns. Primeiro, imagens JPG armazenam cores com perda de qualidade, então pixels vizinhos podem ter pequenas diferenças. Segundo, perfis de cor incorporados (como Display P3) podem ser convertidos pelo navegador para sRGB, enquanto outros programas mostram o valor original. Terceiro, uma captura de tela mostra a cor após o gerenciamento de cores do seu monitor. Quarto, a ferramenta analisa imagens acima de 36 megapixels em tamanho reduzido. Por isso, para fotos, ajuste a média para 3 × 3, 5 × 5 ou 11 × 11 pixels: a ferramenta calcula a média de 9, 25 ou 121 pixels ao redor do cursor, em vez de captar um valor isolado. Para cores uniformes, como as de um logotipo, “1 pixel” é a opção certa.

Carregue a imagem para ver a paleta logo abaixo. Você pode escolher de 2 a 12 cores e ver o código HEX e a proporção de cada uma na imagem. Para isso, a ferramenta analisa pelo menos 90.000 pixels distribuídos uniformemente (imagens menores por inteiro), ignora os transparentes e agrupa as cores pelo método median cut. Em fotos, a paleta é aproximada. Use “Copiar lista HEX” para obter uma lista ou “Copiar variáveis CSS” para obter linhas como --color-1: #08203a; para um bloco :root, que você pode usar com var(--color-1).

Além dos valores de cor, a ferramenta mostra o nome de cor CSS correspondente ou, se não houver uma correspondência exata, o nome mais próximo e seu valor HEX. Para #ffd166, é khaki (#f0e68c), apenas uma aproximação. A ferramenta não fornece valores RAL, Pantone, NCS ou CMYK. Como a cor na tela também depende da iluminação e da câmera, confira tintas de parede ou vernizes em uma amostra física. Para ver os valores HSV e CMYK de uma cor conhecida, use o Color Picker.

A ferramenta calcula a relação de contraste WCAG da cor com o branco e com o preto. Texto normal precisa de pelo menos 4,5:1 (nível AA); 7:1 (AAA) é excelente, e texto grande precisa de 3:1. Em #ffd166, o texto preto alcança 14,56:1, enquanto o branco alcança apenas 1,44:1. Para verificar duas cores quaisquer, use o Contrast Checker.

PNG, JPG, WebP, AVIF, GIF, BMP e SVG, conforme o que seu navegador consegue ler. No caso de GIF, a primeira imagem é analisada. HEIC e HEIF, formatos usados por iPhones, só podem ser abertos no Safari; em outros navegadores, exporte a foto como JPG antes. Os arquivos podem ter até 40 MB. Para pixels semitransparentes, a ferramenta também mostra o valor HEX com canal alfa, por exemplo, #ff000080. Pixels totalmente transparentes não têm cor, e a ferramenta avisa você disso.