Se você já deu uma olhada no CSS de um site, abriu um seletor de cores no Photoshop ou tentou combinar o tom exato de uma marca, você já encontrou códigos de cores HEX. À primeira vista eles parecem crípticos — #FF5733, #1A1A2E, #FFFFFF — mas a lógica por trás deles é elegante e fácil de aprender. Este guia explica exatamente o que são os códigos HEX, como funcionam e como lê-los com confiança.
O Que Significa “HEX”?
HEX é a abreviação de hexadecimal — uma combinação do grego hex (“seis”) e do latim decimalis (“de dez”). Refere-se a um sistema numérico de base 16, em oposição ao sistema de base 10 (decimal) que usamos no dia a dia.
Para entender por que a base 16 importa, é útil dar um passo atrás.
Sistemas Numéricos: Uma Introdução Rápida
Todo sistema numérico é essencialmente uma linguagem diferente para representar quantidades. O sistema que você aprendeu na escola — o decimal — usa dez símbolos: de 0 a 9. Quando você ultrapassa 9, adiciona mais um dígito e recomeça (10, 11, 12…).
Os computadores, no nível do hardware, trabalham com base 2 (binário): apenas dois símbolos, 0 e 1, representando os estados ligado/desligado dos transistores. O binário é preciso, mas verboso — o número 255 em binário é 11111111, com oito dígitos.
É aí que o hexadecimal entra como um meio-termo prático. A base 16 usa dezesseis símbolos: 0–9 e A–F, onde A = 10, B = 11, C = 12, D = 13, E = 14, F = 15.
Como só existem dez dígitos numéricos (0–9), o hexadecimal empresta seis letras: A até F, representando os valores de 10 a 15. Isso significa que um único dígito hex pode representar 16 valores diferentes, enquanto um único dígito decimal só pode representar 10. Dois dígitos hex juntos podem representar 256 valores diferentes (16 × 16), que é exatamente o intervalo necessário para os canais de cor.
Exemplos Rápidos de Conversão
- Decimal 0 = Hex 00
- Decimal 15 = Hex 0F
- Decimal 16 = Hex 10
- Decimal 255 = Hex FF
O ponto principal: 255 em decimal é FF em hex — apenas dois caracteres em vez de três. Essa compactação é exatamente o motivo pelo qual o hexadecimal foi escolhido para os códigos de cores.
O Modelo de Cor RGB
Antes de decodificar um código de cor HEX, precisamos entender o que ele está codificando: os valores RGB.
O modelo RGB representa cores como combinações de três fontes de luz — Vermelho (Red), Verde (Green) e Azul (Blue) — em intensidades variadas. Misture luz vermelha e verde e você obtém amarelo. Misture as três na intensidade máxima e obtém branco. Zero intensidade em todas as três resulta em preto.
Cada canal tem um valor de 0 a 255 (256 níveis possíveis). Portanto, uma cor em RGB é expressa como três números: rgb(255, 87, 51), por exemplo.
O modelo RGB é nativo das telas, que produzem luz. Por isso é o padrão em design web e de interface. (O design gráfico para impressão usa CMYK, que é um modelo subtrativo baseado em tinta.)
Como Funcionam os Códigos de Cor HEX
Um código de cor HEX é simplesmente um valor RGB escrito em notação hexadecimal. O formato é:
#RRGGBBOnde:
- # é o prefixo que indica um valor de cor hex
- RR é o canal vermelho (00–FF)
- GG é o canal verde (00–FF)
- BB é o canal azul (00–FF)
Cada par de dígitos hex representa a intensidade de um canal de cor, de 0 (00) a 255 (FF).
Lendo um Código HEX
Tome #FF5733:
- FF = 255 vermelho → intensidade máxima de vermelho
- 57 = 87 verde → verde moderado
- 33 = 51 azul → pouco azul
O resultado: um laranja-avermelhado quente e vibrante.
Cores de Referência Comuns
#FF0000— vermelho puro (vermelho máximo, sem verde, sem azul)#00FF00— verde puro#0000FF— azul puro#FFFFFF— branco (todos os canais no máximo)#000000— preto (todos os canais em zero)#808080— cinza médio (todos os canais em 128)
Observe o padrão: quando os três canais são iguais, você obtém um tom de cinza — de #000000 (preto) a #FFFFFF (branco).
A Abreviação: Códigos HEX de 3 Dígitos
Quando cada par em um código HEX consiste em dois dígitos idênticos, ele pode ser abreviado para um único dígito por canal:
#FFFFFF→#FFF(branco)#000000→#000(preto)#FF0000→#F00(vermelho)#AABBCC→#ABC
Essa abreviação só funciona quando cada par é um dígito duplicado. #FF5733 não pode ser abreviado — os pares são FF, 57 e 33, e 57 e 33 não são dígitos duplicados. A abreviação de 3 dígitos é CSS válido e reconhecida por todos os principais navegadores.
HEX com Transparência: Códigos de 8 Dígitos
Os códigos HEX padrão definem três canais de cor. Mas o CSS moderno também suporta um canal alfa (transparência) opcional, produzindo um formato de 8 dígitos:
#RRGGBBAAOs dois últimos dígitos (AA) representam a opacidade de 00 (totalmente transparente) a FF (totalmente opaco):
#FF573300— completamente invisível#FF573380— 50% de transparência (aproximadamente)#FF5733FF— totalmente opaco (igual a#FF5733)
Este formato é suportado no CSS4 e em ferramentas de design modernas. É útil para especificar sobreposições translúcidas, sombras e elementos de interface em camadas diretamente no código.
Uma Breve História: Por Que o HEX Se Tornou o Padrão para Web
Antes dos anos 1990, o gerenciamento de cores em computadores era inconsistente — diferentes sistemas operacionais e monitores tratavam as cores de formas diferentes. Com o surgimento da web, era necessária uma maneira consistente e compacta de especificar cores em diferentes dispositivos.
A primeira especificação HTML definiu 16 cores nomeadas — vermelho, azul, verde, entre outras — um conjunto frequentemente chamado de paleta “básica” ou “web-safe”. Mas 16 cores logo se mostraram insuficientes para trabalhos de design reais.
A notação de cor HEX, já estabelecida em contextos de computação, foi adotada como a forma padrão de especificar cores arbitrárias em HTML e CSS. Ela permitia que qualquer uma das 16.777.216 cores RGB possíveis (256 × 256 × 256) fosse escrita de forma compacta em seis caracteres.
Especificações posteriores adicionaram as notações rgb() e hsl() como alternativas em CSS, mas o HEX continua sendo o formato mais usado na prática — especialmente para compartilhar cores entre designers e desenvolvedores.
HEX vs. Outros Formatos de Cor
O HEX não é a única forma de especificar cores em CSS e ferramentas de design. Veja como ele se compara:
- HEX (
#FF5733) — Compacto e amplamente reconhecido. Padrão na maioria das ferramentas de design e bases de código CSS. Um pouco difícil de ler sem prática. - RGB (
rgb(255, 87, 51)) — Mais legível para humanos. Mais fácil de ajustar canais individuais. Requer mais caracteres. Suporta canal alfa viargba(). - HSL (
hsl(11, 100%, 60%)) — Significa Matiz, Saturação, Luminosidade. Mais intuitivo para criar relações de cor — girar o valor do matiz desloca a cor ao redor da roda de cores de forma previsível. - Cores Nomeadas — O CSS reconhece mais de 140 cores nomeadas:
tomato,steelblue,rebeccapurple. Fácil de ler, mas limitado ao conjunto predefinido.
Na prática, o HEX é a língua franca — a maioria dos designers e desenvolvedores pensa e se comunica em HEX, mesmo que use HSL internamente para manipulação programática de cores.
Trabalhando com Cores HEX na Prática
Você não precisa converter manualmente entre decimal e hexadecimal — as ferramentas de design e os ambientes de desenvolvimento fazem isso automaticamente.
- No Figma: Clique em qualquer amostra de cor para abrir o seletor. O valor HEX é exibido e editável diretamente. Você também pode alternar entre HEX, RGB, HSL e outros formatos no seletor.
- No Adobe Photoshop / Illustrator: O seletor de cores mostra valores HEX junto com RGB e outros modelos. Copie um código HEX diretamente do seletor para usar no código.
- No CSS: Use o valor HEX diretamente na sua folha de estilo:
color: #FF5733;oubackground-color: #1A1A2E; - DevTools do Navegador: O inspetor do Chrome e do Firefox mostra as cores computadas e permite editar valores HEX ao vivo, com um seletor de cores integrado.
- Ferramentas de conversão de cores: Ferramentas como coolors.co, color.adobe.com ou simplesmente pesquisar “seletor de cores” no Google fornecem conversão instantânea entre HEX, RGB e HSL.
Lendo Códigos HEX Como um Designer
Com um pouco de prática, você pode desenvolver uma percepção intuitiva do que um código HEX representa sem precisar de uma ferramenta para visualizá-lo:
- Primeiro par mais alto = mais vermelho.
#FFno início significa canal vermelho máximo;#00significa sem vermelho. - Pares iguais = neutro.
#808080é um cinza médio porque todos os canais estão equilibrados em 128. - FF significa máximo, 00 significa nenhum.
#00FF00é verde puro;#000080é azul-marinho escuro (sem vermelho, sem verde, azul em meia intensidade). - Códigos com pares próximos de FF = cores claras/brilhantes.
#FFFACD(amarelo limão) é quase branco — todos os canais estão altos. - Códigos com pares próximos de 00 = cores escuras.
#1A1A2Eé um azul-marinho quase preto.
Resumo
Os códigos de cor HEX são uma forma compacta e hexadecimal de expressar valores de cor RGB — cada par de caracteres representa um canal de cor (vermelho, verde, azul) em uma escala de 00 a FF. Uma vez que você entende a estrutura, ler e trabalhar com códigos HEX se torna algo natural.
Você não precisa fazer os cálculos manualmente — Figma, Photoshop, VS Code e o DevTools do seu navegador cuidam da conversão. Mas entender como os códigos HEX funcionam faz de você um designer e desenvolvedor mais fluente: você consegue ler uma cor de relance, depurar tonalidades inesperadas e se comunicar com precisão com qualquer colaborador.
A cor é o elemento visual mais imediato de qualquer design. Os códigos HEX são a forma como esse elemento é especificado, compartilhado e reproduzido de forma consistente — entre ferramentas, equipes e telas.
