Entendendo Códigos de Cor Hex: O Guia Completo

Se você já olhou para um arquivo CSS, uma ferramenta de design ou um guia de estilo de marca, você já viu códigos de cor hex: strings de seis caracteres como #3B82F6 ou #FF5733 que de alguma forma codificam todas as cores que uma tela pode exibir. Eles parecem uma sequência aleatória de letras e números, mas há um sistema preciso por trás deles — e uma vez que você o entende, pode ler qualquer código hex de relance.

Este guia cobre tudo, desde a estrutura básica de um código hex até a notação abreviada, transparência alpha e técnicas práticas de conversão.

O que Significa "Hex"?

A palavra "hex" é abreviação de hexadecimal — um sistema de numeração que usa base 16 em vez da base 10 que usamos no dia a dia. Na base 10, os dígitos vão de 0 a 9. Na base 16, os dígitos vão de 0 a 9 e continuam com as letras A a F, fornecendo dezesseis valores possíveis por dígito.

Por que base 16? Porque ela se mapeia perfeitamente na memória do computador. Um único byte de dados — 8 bits binários — pode conter valores de 0 a 255. Em hexadecimal, esse mesmo intervalo cabe em exatamente dois dígitos: 00 a FF. Essa compactação é a razão pela qual o hex se tornou o padrão para especificar cores em contextos web e de design.

A Estrutura de um Código de Cor Hex

Um código de cor hex padrão tem esta estrutura:

# R R G G B B

O símbolo de cerquilha (#) é um prefixo que sinaliza "esta é uma cor." Depois dele vêm três pares de dígitos hexadecimais — um par para cada canal Vermelho, Verde e Azul do modelo de cores RGB. Cada par codifica um valor de 0 (00) a 255 (FF), controlando a intensidade desse canal.

Por exemplo, veja #3B82F6 — um azul médio vívido:

O canal de azul alto é o que faz essa cor parecer azul. O verde moderado a empurra levemente em direção ao ciano em vez do azul marinho puro. O vermelho baixo a mantém fria.

Compare isso com #FF5733, um vermelho coral:

O vermelho máximo com verde moderado produz vermelho-alaranjado. O azul baixo mantém o tom quente.

Como Ler um Código Hex de Relance

Você não precisa converter para decimal para obter uma leitura rápida de uma cor hex. Algumas regras práticas:

00 = intensidade zero (nada deste canal) FF = intensidade total (máximo deste canal) 80 ≈ metade da intensidade (128 de 255)

Isso permite decodificar códigos hex aproximadamente de relance:

• #FF0000 — vermelho total, sem verde, sem azul → vermelho puro
• #00FF00 — sem vermelho, verde total, sem azul → verde puro
• #0000FF — sem vermelho, sem verde, azul total → azul puro
• #FFFF00 — vermelho e verde totais, sem azul → amarelo (vermelho + verde = amarelo na luz)
• #FF00FF — vermelho e azul totais, sem verde → magenta
• #00FFFF — verde e azul totais, sem vermelho → ciano
• #FFFFFF — todos os canais no máximo → branco
• #000000 — todos os canais em zero → preto
• #808080 — todos os canais na metade → cinza médio

Quando os dois primeiros dígitos são altos e os outros são mais baixos, a cor tende ao vermelho. Os dois dígitos do meio altos empurram em direção ao verde. Os dois últimos dígitos altos empurram em direção ao azul ou roxo.

Identificando Cores Claras vs Escuras

Se todos os três pares têm valores hexadecimais altos (C, D, E, F), a cor será clara. Se todos os três são baixos (0, 1, 2, 3), será escura. Valores iguais nos três canais sempre produzem um cinza neutro (ou preto ou branco nos extremos).

• #F0E6D3 — todos os valores altos → bege quente claro
• #1A1A2E — todos os valores baixos → azul-marinho muito escuro
• #A0A0A0 — valores médios iguais → cinza médio

Notação Hex Abreviada

O CSS permite uma abreviação de três caracteres quando cada par de dígitos hex é um caractere repetido. Por exemplo, #AABBCC pode ser escrito como #ABC. Cada dígito na abreviação é simplesmente dobrado para produzir a versão completa de seis caracteres.

Esta abreviação só funciona quando cada par é um caractere repetido. #3B82F6 não pode ser abreviado porque 3B, 82 e F6 não são pares repetidos. Mas #336699 pode ser abreviado para #369.

Quando Usar a Abreviação

O hex abreviado é um recurso CSS válido e renderizará de forma idêntica à versão completa. Use-o livremente quando o código suportar. No entanto, muitas ferramentas de design e guias de estilo de marca usam o formato completo de seis caracteres para clareza e consistência — é imediatamente óbvio qual é o valor de cada canal sem expansão mental.

Hex com Alpha: Códigos Hex de Oito Caracteres

O código hex padrão de seis caracteres não inclui informações de transparência. Para adicionar um canal alpha (opacidade), o CSS suporta um formato hex de oito caracteres onde os dois últimos caracteres especificam a transparência.

O canal alpha segue o mesmo intervalo de 0 a 255, codificado como um par hex:

Por exemplo, para usar o azul #3B82F6 com 50% de opacidade: #3B82F680.

Para usar uma sobreposição escura #000000 com 70% de opacidade: #000000B3.

Abreviação de Quatro Caracteres com Alpha

Assim como #RGB é abreviação para #RRGGBB, existe uma abreviação #RGBA para #RRGGBBAA. Cada dígito é dobrado:

• #F00F = #FF0000FF (vermelho puro, totalmente opaco)
• #0008 = #00000088 (preto com ~53% de opacidade)
• #FFF0 = #FFFFFF00 (branco totalmente transparente)

Alternativas ao Hex Alpha

Antes do hex de oito caracteres ser amplamente suportado, a forma padrão de adicionar transparência era rgba():

/* Estas são equivalentes */
background-color: #3B82F680;
background-color: rgba(59, 130, 246, 0.5);

Ambas são agora bem suportadas em navegadores modernos. A forma rgba() é frequentemente mais legível porque a opacidade é expressa como um decimal legível (0 a 1) em vez de um par hex que requer conversão mental.

Convertendo Hex para Outros Formatos

Os códigos hex descrevem as mesmas cores RGB que a notação rgb() — são apenas uma representação mais compacta. A conversão entre eles é direta.

Hex para RGB

Para cada par de dígitos hex, converta de hexadecimal para decimal:

• #FF5733 → Vermelho: FF = 255, Verde: 57 = 87, Azul: 33 = 51
• CSS: rgb(255, 87, 51)

Hex para HSL

Essa conversão é mais envolvida. HSL (Tonalidade, Saturação, Luminosidade) é um formato perceptualmente intuitivo onde a tonalidade é expressa como um grau na roda de cores e a saturação e luminosidade como porcentagens. O Conversor de Cores lida com isso instantaneamente — insira qualquer código hex e ele exibe os equivalentes em RGB, HSL, CMYK e OKLCH simultaneamente.

Hex para OKLCH

OKLCH é o formato de cor CSS mais moderno, projetado para ser perceptualmente uniforme. É excelente para manipulação programática de cores — passos numéricos iguais em OKLCH correspondem a diferenças percebidas iguais. O Conversor de Cores inclui saída OKLCH para qualquer código hex que você inserir.

Exemplos Comuns de Conversão

Hex no CSS: Uso Prático

Os códigos hex funcionam em qualquer lugar do CSS que aceite um valor de cor:

/* Cor do texto */
color: #1A1A2E;

/* Fundo */
background-color: #F0E6D3;

/* Borda */
border: 2px solid #3B82F6;

/* Sombra de caixa */
box-shadow: 0 4px 12px #0000001A; /* preto com ~10% de opacidade */

/* Com propriedades personalizadas CSS */
:root {
  --brand-primary: #3B82F6;
  --brand-dark: #1D4ED8;
}

Sensibilidade a Maiúsculas e Minúsculas

Os códigos de cor hex não diferenciam maiúsculas de minúsculas no CSS. #3B82F6, #3b82f6 e #3B82f6 referem-se à mesma cor. A maioria dos guias de estilo padroniza em letras maiúsculas ou minúsculas para consistência. Maiúsculas é o formato tradicional; minúsculas é popular em bases de código modernas e muitos linters o preferem.

Encontrando Códigos Hex

Ferramentas de design. Figma, Sketch e Adobe XD exibem códigos hex em seus painéis de seletor de cores. Qualquer amostra de cor nessas ferramentas pode ser copiada como hex.

DevTools do navegador. Clique com o botão direito em qualquer elemento de uma página e inspecione-o. O painel CSS mostra os valores de cor calculados, nos quais você pode clicar para alternar entre formatos, incluindo hex.

Páginas de cores do ColorFYI. Cada página de detalhe de cor no ColorFYI — como /color/3B82F6/ — exibe o código hex completo junto com os valores RGB, HSL, CMYK e OKLCH, além do nome da cor, se tiver um.

O Conversor de Cores. Se você tem uma cor em RGB ou HSL e precisa do equivalente hex, cole-a no Conversor de Cores para uma tradução instantânea.

Principais Conclusões

• Um código de cor hex é um número hexadecimal de seis caracteres onde os dois primeiros caracteres codificam o canal Vermelho, os dois do meio codificam o Verde e os dois últimos codificam o Azul.
• Cada par de canal vai de 00 (intensidade 0) a FF (intensidade 255), correspondendo ao intervalo completo de 0 a 255 do modelo RGB.
• Dígitos hexadecimais altos indicam alta intensidade do canal; dígitos baixos indicam baixa intensidade. Valores iguais nos três canais produzem neutros (preto, cinza, branco).
• A abreviação de três caracteres (#RGB) é válida quando cada par repete o mesmo dígito — #336699 torna-se #369.
• O hex de oito caracteres (#RRGGBBAA) adiciona um canal de transparência alpha; os dois últimos dígitos vão de 00 (transparente) a FF (opaco).
• Use o Conversor de Cores para traduzir qualquer código hex em RGB, HSL, CMYK ou OKLCH instantaneamente.
• Os códigos hex não diferenciam maiúsculas de minúsculas no CSS. Padronize em uma convenção (tudo maiúsculo ou tudo minúsculo) para consistência.