Código de cor hex explicado: como funciona o #RRGGBB

Como funciona um código de cor hex

Toda cor na tela é uma mistura de luz vermelha, verde e azul. Um código hex escreve a intensidade de cada luz com dois caracteres depois do sinal #: primeiro o vermelho, depois o verde, depois o azul. Esse é o padrão #RRGGBB.

Os caracteres são hexadecimais, um jeito de contar com 16 dígitos: de 0 a 9 e depois a (10), b (11), c (12), d (13), e (14) e f (15). Um par cobre 256 valores, de 00 (0) a ff (255), exatamente a faixa do rgb().

Para transformar um par em número comum, multiplique o primeiro dígito por 16 e some o segundo. Abaixo está o #1e90ff, a cor CSS dodgerblue, em quatro formatos e depois calculado par a par.

Então #1e90ff é rgb(30, 144, 255): um pouco de vermelho, bastante verde e azul no máximo, o que resulta em um azul-celeste vivo. Três pares de 256 valores dão 16.777.216 cores possíveis.

Hex abreviado de 3 e 4 dígitos

Quando os dois dígitos de cada par são iguais, dá para escrever cada par uma vez só. #ffcc00 vira #fc0, e o navegador duplica cada dígito de volta. #1e90ff não tem forma curta, porque 1e e 90 não são pares repetidos.

A forma curta cobre só 4.096 das 16,7 milhões de cores. Uma versão de quatro dígitos acrescenta a opacidade do mesmo jeito, então #f008 significa #ff000088.

Opacidade em hex: hex de 8 dígitos com alfa

Um código de oito dígitos acrescenta um quarto par para o alfa, a opacidade: #RRGGBBAA. 00 é totalmente transparente e ff é totalmente sólido. Todos os navegadores atuais suportam isso no CSS, assim como a forma curta #RGBA de quatro dígitos.

Para obter o par, multiplique a opacidade por 255, arredonde para um número inteiro e converta para hex. 50% dá 127,5, que arredonda para 128, escrito como 80. Veja a tabela completa aplicada ao #1e90ff.

.overlay {
    background: #00000080;
}

.overlay-same {
    background: rgb(0 0 0 / 50%);
}

Dois detalhes. Primeiro, 80 é 128 de 255, ou seja, 50,2%, não exatamente 50%: o alfa em hex tem só 256 passos, então a maioria das porcentagens redondas é uma aproximação. Segundo, o Android coloca o alfa na frente. Em um recurso de cor do Android, #801e90ff significa o mesmo que #1e90ff80 no CSS.

Como ler um código hex no olho

Dá para adivinhar uma cor sem converter nada. Olhe o primeiro dígito de cada par, porque ele carrega quase toda a informação.

• O maior primeiro dígito é a luz dominante. #d2691e tem d no vermelho, 6 no verde e 1 no azul, então é um marrom alaranjado.
• Dois canais altos se misturam: vermelho e verde dão amarelo, verde e azul dão ciano, vermelho e azul dão magenta ou roxo.
• Três pares iguais dão um cinza. #333333 é cinza-escuro, #999999 é cinza-claro. Pares quase iguais, como em #708090, dão uma cor apagada, acinzentada.
• Dígitos altos no geral indicam uma cor clara, dígitos baixos, uma cor escura. Quando os três pares são c0 ou mais, a cor é pálida. Quando os três são 30 ou menos, ela é bem escura.
• O verde parece muito mais claro que o azul com o mesmo número. #00ff00 tem luminosidade OKLCH de 0,866, #0000ff só 0,452.

Por que #808080 não é o cinza médio

#808080 fica exatamente no meio em números: 128 de 255 em cada canal. Mas ele não parece estar no meio entre o preto e o branco. A luminosidade OKLCH dele é 0,600, então ele é percebido a 60% do caminho até o branco.

Os valores hex já vêm codificados com a curva do sRGB, que acompanha o olho de forma aproximada, mas não exata. #808080 emite cerca de 21,6% da luz do branco, e os modelos perceptuais colocam o meio visual mais abaixo: o OKLCH em #636363, o CIELAB em #777777.

Isso importa para texto. Cinza #808080 sobre branco dá 3,95:1 e reprova no WCAG AA para texto corrido. #767676 é o cinza mais claro que passa em 4,5:1, e #777777, um passo mais claro, já reprova com 4,48:1.

Maiúsculas ou minúsculas, com ou sem #

Códigos hex não diferenciam maiúsculas de minúsculas. #1E90FF, #1e90ff e #1E90ff são a mesma cor no CSS, no SVG e nas ferramentas de design. Escolha um estilo e mantenha-o em todo lugar, para que uma busca no código encontre todos os usos. Minúsculas são a escolha mais comum no CSS.

O sinal # faz parte da sintaxe do CSS, não da cor. O Figma e muitas ferramentas de design mostram o código sem ele, e linguagens de programação costumam escrevê-lo como número com o prefixo 0x, como no Flutter, em que Color(0xFF1E90FF) começa pelo par do alfa.

Como descobrir o código hex de uma cor na tela

Use um conta-gotas: uma ferramenta que lê a cor sob o cursor e mostra o código dela. Existem opções gratuitas e quase sempre já instaladas.

• Chrome e Edge: abra o DevTools com F12, clique em qualquer quadradinho de cor no painel Estilos e use o ícone de conta-gotas para capturar uma cor da página.
• PickShade: o seletor de cores da página inicial tem um botão de conta-gotas no Chrome e no Edge que captura cores de qualquer lugar da tela.
• Windows: instale o Microsoft PowerToys e pressione Win + Shift + C para abrir o Seletor de Cores.
• macOS: abra o Medidor de Cor Digital em Aplicativos, Utilitários. Mude para sRGB e escolha Visualizar, Exibir Valores, Como Hexadecimal.
• Figma, Photoshop e a maioria dos apps de design: pressione I para o conta-gotas.
• Em uma foto ou captura de tela: abra no seletor de cores de imagem e clique em qualquer pixel. A imagem fica no seu dispositivo.

Um valor capturado pode diferir em algumas unidades do original, porque as telas aplicam perfis de cor e as imagens são comprimidas. Quando você precisar do valor exato, copie-o do arquivo de design ou do CSS, não de uma captura de tela.

Perguntas e respostas