Como descobrir o código de cor de uma imagem

A resposta curta

Toda cor na tela é uma mistura de luz vermelha, verde e azul, e um código de cor é só uma forma de anotar essa mistura. Para ler o código em uma imagem você precisa de um conta-gotas: uma ferramenta que olha um pixel e informa os valores dele. Adicione sua imagem à ferramenta abaixo, passe o ponteiro por cima até a lupa mostrar o pixel desejado no quadrado do centro e clique. A cor fica guardada com o código HEX, RGB e HSL, e um clique no código já copia.

Se você quer as cores gerais de uma foto, e não de um único pixel, use a parte de paleta da mesma ferramenta: ela agrupa os pixels parecidos e lista as 5, 8 ou 12 cores mais comuns com seus códigos.

HEX, RGB e HSL: o que significam os códigos

O RGB informa a quantidade de vermelho, verde e azul em três números de 0 a 255. O HEX escreve esses mesmos três números em base 16, com dois caracteres cada, depois de uma cerquilha: FF é 255, 80 é 128, 00 é 0. Então #FF8000 e rgb(255, 128, 0) são exatamente o mesmo laranja. O HSL descreve a cor do jeito que as pessoas falam dela: matiz como um ângulo no círculo cromático (0 a 360), saturação e luminosidade em porcentagem. O HSL ajuda quando você quer uma versão mais clara ou mais escura de uma cor, porque basta mudar o último número.

Programas de design como Figma, Canva e Photoshop aceitam HEX direto, o CSS aceita os três, e programas de escritório como Word e PowerPoint costumam pedir RGB ou HEX na janela de cores personalizadas.

Outras formas de pegar uma cor no seu aparelho

Às vezes a cor não está em um arquivo, mas em algum lugar da tela: um site, um aplicativo, um quadro de vídeo. Estas opções resolvem a maioria dos casos sem instalar nada pesado.

• Nesta ferramenta, Pegar da tela (Chrome e Edge no computador) transforma o ponteiro em um conta-gotas que funciona em qualquer lugar da tela, não só dentro da imagem.
• Windows: o Microsoft PowerToys tem um Seletor de Cores; depois de instalado, Win+Shift+C abre o seletor e copia o código do pixel sob o ponteiro.
• Mac: o aplicativo Medidor de Cor Digital, que já vem no sistema (em Aplicativos, Utilitários), mostra os valores sob o ponteiro. Configure para exibir valores sRGB se precisar de códigos para a web.
• Ferramentas de desenvolvedor do navegador: no Chrome e no Edge, o quadradinho de cor ao lado de qualquer cor do CSS abre um seletor com conta-gotas para a página atual.
• Celulares: tire um print, adicione à ferramenta desta página e toque na cor. Na tela touch não há lupa, então dê zoom na página antes se a área for pequena.

Por que o código pode parecer um pouco diferente

Dois pixels vizinhos em uma foto quase nunca são idênticos. A compressão do JPG, o ruído da câmera, a luz e a sombra mudam os valores, então clicar em um carro vermelho pode dar #B3121B em um pixel e #A90F18 no seguinte. Isso é normal. Em uma foto, pegue alguns pontos de uma área com luz uniforme e escolha o que parecer certo, ou deixe a paleta tirar a média da área para você.

As bordas são a armadilha mais comum. Textos e logos são suavizados (antialiasing), então os pixels na borda de uma letra são uma mistura da letra com o fundo. Sempre pegue a cor do meio de uma forma, e é justamente para isso que serve a lupa. Evite também prints que foram redimensionados, enviados por aplicativo de mensagem ou salvos como JPG de baixa qualidade: cada etapa mistura ou desloca um pouco as cores.

Telas e perfis de cor acrescentam mais uma camada. Muitos celulares e Macs mostram uma faixa de cores maior que o sRGB padrão, e o mesmo arquivo pode parecer um pouco diferente em duas telas. A ferramenta lê os valores que o navegador desenha, que são sRGB, o espaço usado por sites e pela maioria dos programas de design. Pixels transparentes são lidos como se estivessem sobre um fundo branco.

Como montar uma paleta a partir de uma foto

Uma foto de que você gosta já tem cores que combinam entre si, o que faz dela um bom ponto de partida para um site, uma apresentação ou artes para redes sociais. Na parte de paleta, escolha 5, 8 ou 12 cores. A ferramenta divide todos os pixels em grupos de cores parecidas (o método median cut) e mostra a média de cada grupo, o maior primeiro. Copiar todas coloca cada código HEX em uma linha, pronto para um arquivo CSS ou um programa de design.

Cinco cores dão um esquema simples: em geral um ou dois tons de fundo predominantes, uma cor principal e uma cor de destaque. Doze cores mantêm tons mais sutis, úteis para ilustração ou quando você quer ver do que a imagem é feita de verdade. Se a paleta for dominada por um céu ou uma parede grande, recorte primeiro a parte da foto que interessa e adicione de novo.

• Use as cores maiores e mais calmas para fundos e as menores e mais saturadas para botões e destaques.
• Confira o contraste do texto: para texto normal, a diretriz WCAG pede pelo menos 4,5:1 entre texto e fundo, e 3:1 para texto grande.
• Guarde os códigos em um só lugar (um guia de estilo ou uma lista no arquivo de design) para que todos usem os mesmos valores.

Dicas para acertar as cores de uma marca

Se você precisa da cor exata de uma empresa ou produto, a fonte mais confiável é o manual da marca ou uma versão SVG do logo, porque eles têm os valores originais. Um logo tirado de um print de site ou de uma foto de placa impressa só vai chegar perto.

Quando for preciso pegar a cor de uma imagem, use a maior área lisa do logo, não textos nem linhas finas, e prefira PNG ou SVG a JPG. Pegue três ou quatro pontos; se eles variarem só uma ou duas unidades em cada canal, você tem a cor certa. Lembre que cores de impressão (CMYK, Pantone) e cores de tela são definidas de formas diferentes: um código HEX tirado da foto de um impresso é uma aproximação de como ele aparece na tela, não o valor oficial de impressão.