Imagem Pronta por Pronto no Clique

Descobrir a cor de uma imagem

Pegue o código exato de uma cor da imagem.

A cor é lida do pixel original, não da prévia reduzida: o ponto tocado é convertido para as coordenadas da imagem. Em fotos, a média de 3 × 3 ou 5 × 5 pixels evita pegar um pixel de ruído. O azul-petróleo rgb(31, 95, 122) aparece como #1F5F7A em HEX e hsl(198, 59%, 30%).

Imagem ou print

JPG, PNG, WebP, GIF, HEIC…

O arquivo é lido no seu navegador e não é enviado a nenhum servidor.

Amostra

Cor

Escolha a imagem e toque num ponto. A cor em HEX, RGB e HSL aparece aqui.

Calculando…

Como funciona

A prévia é a imagem reduzida para caber na tela, mas a cor é lida da imagem original: o ponto tocado é convertido para as coordenadas reais (x = toque × largura original ÷ largura da prévia, o mesmo para y). Na média, entram os pixels do quadrado em volta do ponto, recortado na borda da imagem; pixels transparentes pesam pela opacidade.

O HEX é cada canal em dois dígitos hexadecimais; o HSL segue a conversão do CSS Color 4 (W3C), com matiz arredondada em graus e saturação e luminosidade em %. O código escrito sobre a amostra fica em preto ou branco, o que tiver mais contraste (WCAG).

Exemplo para conferir

O exemplo cria uma imagem de 600 × 400 px com a metade esquerda azul-petróleo rgb(31, 95, 122) e a direita amarela e lê o ponto (150, 200), no meio da metade esquerda: 31 = 1F, 95 = 5F e 122 = 7A em hexadecimal, então a cor é #1F5F7A, que em HSL é hsl(198, 59%, 30%).

Limitações

O conta-gotas lê uma imagem escolhida por você; ele não lê cores de outras janelas nem da tela. Em JPG muito comprimido, a cor de uma área lisa pode variar alguns pontos de um pixel para o outro.

Seu arquivo é processado no seu navegador e não é enviado para nenhum servidor.

Fontes e revisão

Conteúdo revisado em . A data muda só quando as regras e os textos são conferidos de novo, não a cada atualização técnica do site.

Perguntas frequentes

Como descobrir o código de uma cor numa imagem?

Escolha a imagem (pode ser um print) e toque no ponto da cor. O código aparece em HEX (#1F5F7A), RGB e HSL, com botões para copiar. Toque em outros pontos para comparar: as cores escolhidas ficam numa lista.

Qual a diferença entre HEX, RGB e HSL?

São três jeitos de escrever a mesma cor. HEX é o vermelho, o verde e o azul em hexadecimal (00 a FF); RGB são os mesmos três números de 0 a 255; HSL descreve matiz (em graus), saturação e luminosidade (em %). Programas de design e o CSS aceitam os três.

Por que a cor de uma foto muda de um pixel para o outro?

Fotos têm ruído e a compressão do JPG mistura pixels vizinhos. Use a média de 3 × 3 ou 5 × 5 pixels para ter a cor da região, e não a de um pixel isolado. Em logos e prints, 1 pixel dá a cor exata.

A cor bate com a do arquivo original?

Ela é lida do arquivo como o navegador o decodifica, em sRGB. Imagens com perfil de cor diferente (de câmeras profissionais, por exemplo) são convertidas pelo navegador, e o código pode diferir um pouco do que um editor mostra no perfil original.

A imagem é enviada para algum servidor?

Não. A imagem é aberta e lida pelo navegador, no seu aparelho.

Relacionadas

Imagem Pronta

Clarear foto escura

Brilho, contraste e saturação em uma ou várias fotos.

Ver todas as ferramentas de Imagem Pronta · Catálogo completo