Identificador de Cores

Como Usar o Identificador de Cores numa Imagem

Um identificador de cores lê o valor de um ponto de uma imagem e devolve o código dessa cor. Este funciona como o conta-gotas do Photoshop, mas no browser e sem instalar nada: carregue, arraste ou cole a imagem, aponte a lupa e clique. O painel mostra o código HEX, RGB, CMYK e HSL e o nome em português da cor mais próxima. É um identificador de cores por imagem que corre inteiro no seu dispositivo: a imagem é lida pelo próprio browser e nunca é enviada para um servidor.

1. Carregue a imagem com «Escolher imagem», arraste-a para a zona 1 ou cole-a com Ctrl+V. No telemóvel, «Tirar fotografia» abre a câmara.
2. Escolha a amostra: 1 píxel para logótipos e gráficos, média de 3×3 ou 5×5 para fotografias.
3. Passe o rato sobre a imagem e acompanhe a zona ampliada na lupa. No telemóvel, arraste o dedo: a lupa aparece por cima dele.
4. Clique, ou levante o dedo, para fixar a cor. Cada cor fixada entra na lista e fica marcada na imagem com um número.

A Lupa e a Mira

A lupa mostra 11 × 11 píxeis à volta do ponteiro, ampliados e com grelha, e o quadrado branco marca os píxeis que entram na leitura. É o que permite acertar numa linha fina de um logótipo ou numa letra pequena, onde um desvio de um píxel já devolve a cor do fundo. No telemóvel, a lupa sobe acima do dedo para ele não tapar a zona que está a medir. Sem rato, a imagem também se usa com o teclado: Tab até ela, setas para mover a mira e Enter para fixar.

Um Píxel ou a Média de 3×3 e 5×5

Cada píxel de uma imagem digital tem uma só cor. Num logótipo guardado em PNG, o píxel é a cor da marca e basta ler um. Numa fotografia é diferente: a mesma parede tem píxeis mais claros e mais escuros por causa da luz, do ruído do sensor e da compressão JPEG, que trabalha em blocos de 8 × 8 píxeis. Um só píxel pode calhar num desses desvios. A média de 3×3 junta 9 píxeis e a de 5×5 junta 25, e devolve a cor da zona. Nos contornos, a média mistura as duas cores de cada lado, por isso numa área estreita use 1 píxel.

Várias Cores de Uma Vez

Cada clique fixa uma cor na lista, até 10. Com duas ou mais, «Abrir como paleta» leva-as para o gerador de paletas de cores, onde pode bloquear as que quer manter, gerar outras à volta, ver o contraste entre todas e exportar em CSS, Tailwind ou PNG. «Copiar códigos» copia a lista com o HEX e o nome de cada cor, pronta a colar num email para a gráfica ou para o programador.

Como Saber o Código de uma Cor

Para saber o código de uma cor é preciso ler o valor que ela tem no ficheiro ou no ecrã onde aparece. A forma de o fazer muda com a origem da cor, e o resultado é sempre o da cor tal como está gravada, não o de uma tinta ou de um tecido.

Numa Fotografia ou Imagem

Carregue-a nesta página e clique no ponto. A pergunta «que cor é esta?» fica respondida com o código e com um nome em português. Para descobrir a cor de um logótipo, prefira sempre o ficheiro original (PNG ou SVG) a uma fotografia do logótipo impresso: o ficheiro guarda a cor exata, a fotografia guarda a cor depois da luz, da câmara e da compressão.

Num Site ou num PDF

A via mais rápida é uma captura de ecrã colada aqui: Win+Shift+S no Windows, ou ⌘+Control+Shift+4 no Mac, que copia a seleção, e depois Ctrl+V nesta página. No Chrome e no Edge para computador aparece também o botão «Conta-gotas do ecrã», que lê a cor de qualquer ponto visível no ecrã, sem captura. Se quer o valor que o programador escreveu no código, as ferramentas de programador do browser (Inspecionar) mostram-no ao lado de cada regra de estilo.

No Telemóvel

Esta página funciona no browser do telemóvel. Abra uma fotografia da galeria ou tire uma na hora com «Tirar fotografia», e arraste o dedo sobre a imagem: a lupa segue o dedo por cima e o código da cor aparece numa barra fixa em baixo, com o botão para o copiar. Para a cor de uma aplicação, faça uma captura de ecrã e carregue-a aqui.

Num Objeto, numa Parede ou num Tecido

Uma fotografia dá uma aproximação, porque a câmara corrige o equilíbrio de brancos e a cor muda com a luz. Para ter um valor com que se possa trabalhar, fotografe o objeto à luz do dia, sem sombra nem reflexo, ao lado de uma folha de papel branco, e use a média de 5×5. Para encomendar tinta ou um tecido, o código serve de ponto de partida; a confirmação faz-se com a amostra física.

Que Cor É Esta? O Nome em Português

Os códigos são exatos, os nomes não. Para dar nome a uma cor, o identificador compara-a com as 382 cores com nome da nossa tabela de cores, que junta os nomes da norma CSS dos browsers, da Wikipédia e da lista aberta color-names, e escolhe a mais próxima. A comparação faz-se no espaço de cor CIELAB com a fórmula CIEDE2000, da Comissão Internacional de Iluminação (CIE), pensada para medir a diferença como o olho a vê. Uma distância simples entre valores RGB trataria da mesma forma diferenças que o olho nota muito e outras que quase não nota.

Como Ler o ΔE

O número ao lado do nome, o ΔE (delta E), é a distância entre a cor que apontou e a cor da tabela. Como regra prática:

Por baixo do nome aparece também o tom descrito por palavras (por exemplo, azul-escuro ou laranja-claro), a partir da família de cor e da luminosidade, que ajuda quando nenhuma cor com nome fica perto.

Porque o Mesmo Nome Tem Códigos Diferentes

Os nomes de cor não são normalizados. O castanho tradicional é #964B00, mas o brown dos browsers é #A52A2A, um vermelho acastanhado; na tabela ficam como Castanho e Castanho (web). Numa loja de tintas, o mesmo nome corresponde ainda a outra fórmula. Se a cor vai passar por mais do que uma pessoa, envie sempre o código.

HEX, RGB, CMYK ou HSL: Qual Código Usar

Os quatro descrevem a mesma cor de formas diferentes. O que muda é quem os vai ler.

• HEX (#E2725B): o formato do CSS, do Canva, do Figma e da maior parte das aplicações. É o que se envia a um programador ou se cola num editor de sites.
• RGB (226, 114, 91): a mesma cor em três números de 0 a 255, um por canal de luz. É o que pedem o Word, o PowerPoint e muitos programas de escritório.
• CMYK (0, 50, 60, 11): percentagens de tinta ciano, magenta, amarelo e preto, para a gráfica. O valor desta página sai da fórmula direta; a gráfica converte com o perfil ICC do papel, e o resultado pode mudar.
• HSL (10, 69%, 62%): matiz, saturação e luminosidade. Serve para fazer variações da mesma cor, mais clara ou mais escura, mexendo só na luminosidade.

Para ver a explicação completa de cada modelo e a diferença entre RGB e CMYK na impressão, consulte a tabela de cores com códigos HEX, RGB e CMYK.

Porque a Mesma Cor Dá Códigos Diferentes numa Foto

Duas fotografias do mesmo objeto raramente dão o mesmo código. A luz da hora, o equilíbrio de brancos da câmara e a compressão mudam os valores gravados. Há ainda o perfil de cor: muitos telemóveis gravam em Display P3, um espaço com cores mais saturadas do que o sRGB dos sites, e o browser converte a imagem para sRGB antes de a mostrar. O código que esta página devolve é o valor sRGB que vê no ecrã, que é o que interessa para usar a cor num site ou numa publicação.

Texto Preto ou Branco sobre a Cor

Quando a cor vai servir de fundo a um botão, a uma faixa ou a uma publicação, o painel mostra o rácio de contraste do texto preto e do texto branco sobre ela, calculado como nas WCAG (Web Content Accessibility Guidelines) do W3C, e assinala o que se lê melhor. O nível AA pede 4,5:1 para texto normal e 3:1 para texto grande. Muitas cores médias, como laranjas e verdes vivos, ficam abaixo dos 4,5:1 com texto branco, embora pareçam ter contraste. Para testar a cor com as outras cores da marca, abra-a no gerador de paletas e use a grelha de contraste, ou veja as harmonias no círculo cromático.

Perguntas Frequentes