O Que É um Código Hex? A Linguagem da Cor Digital

Cada cor em cada site, aplicativo e interface digital tem um endereço numérico preciso. Durante a maior parte da história da web, esse endereço assumiu uma forma específica: um símbolo de hash seguido de seis caracteres, como #3B82F6 ou #FF5733. Esses são os códigos hex — a língua franca da cor digital.

Se você projeta para telas, cria aplicativos web ou trabalha com qualquer ferramenta de design, você encontra códigos hex constantemente. Este artigo explica exatamente o que são, como o sistema de numeração hexadecimal os faz funcionar e tudo o que você precisa saber sobre notação abreviada, transparência alfa e como encontrar códigos hex para qualquer cor.

O Sistema de Numeração Hexadecimal

A palavra "hex" vem do grego hexas, que significa seis, e "decimal" do latim para dez. Hexadecimal é um sistema de numeração de base 16 — em comparação com o sistema decimal de base 10 que usamos no cotidiano.

Na base 10, você conta: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 — e então adiciona um dígito: 10, 11, 12...

Na base 16, você conta: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 — e então usa letras para continuar: A, B, C, D, E, F — antes de adicionar um dígito: 10 (que equivale a 16 em decimal), 11 (17), ... FF (255).

Por Que Base 16 para Cores?

A razão é elegantemente prática. Um byte de computador contém 8 bits binários e pode conter valores de 0 a 255. Em hexadecimal, todo esse intervalo cabe em exatamente dois dígitos: 00 (0) a FF (255). Isso torna o hex uma codificação compacta e legível para valores do tamanho de um byte — que é exatamente o que cada canal de cor é.

No modelo de cor RGB, cada um dos três canais — Vermelho, Verde, Azul — é um valor de 0 a 255. Em hexadecimal, isso é 00 a FF. Três canais, dois dígitos hex cada, dão seis caracteres no total. Adicione o prefixo # para sinalizar "isto é uma cor" e você tem o código de cor hex padrão.

Lendo Códigos Hex de 6 Dígitos (#RRGGBB)

Um código de cor hex padrão tem a estrutura #RRGGBB:

• # — prefixo que sinaliza um valor de cor hex
• RR — dois dígitos hex codificando o canal Vermelho (00–FF)
• GG — dois dígitos hex codificando o canal Verde (00–FF)
• BB — dois dígitos hex codificando o canal Azul (00–FF)

Decodificando um Exemplo

Tome #FF5733 — um coral-vermelho quente:

O canal vermelho máximo com verde moderado e azul baixo produz um laranja-avermelhado vívido. O azul baixo impede a cor de se deslocar para o neutro.

Agora tome #3B82F6 — um azul-céu:

O azul dominante com verde moderado produz um azul médio vívido com uma leve qualidade ciano. O vermelho baixo o mantém frio.

Heurísticas Rápidas de Leitura

Uma vez que você entende a estrutura, pode ler os códigos hex aproximadamente de relance:

• 00 em um canal = nada daquela primária (totalmente escuro naquele canal)
• FF em um canal = intensidade máxima daquela primária
• 80 ≈ metade da intensidade (128 de 255)

Isso permite decodificar códigos comuns rapidamente:

Valores iguais em todos os três canais sempre produzem um neutro — cinza, preto ou branco dependendo do nível. Valores desiguais sempre produzem uma cor. Os valores mais altos indicam qual cor primária domina.

Identificando Códigos Hex Claros vs Escuros

Se todos os seis caracteres são valores hex altos (C, D, E, F), a cor será clara. Se todos são baixos (0, 1, 2, 3), será escura. Isso fornece uma leitura instantânea de claridade:

• #F0E6D3 — todos os valores altos → bege quente claro
• #1A1A2E — todos os valores baixos → azul-marinho muito escuro
• #7C3AED — valores mistos, azul alto → roxo médio

Notação Abreviada de 3 Dígitos

O CSS permite uma abreviação hex de três caracteres quando cada par de dígitos no código completo de seis caracteres consiste em dois caracteres idênticos. #AABBCC torna-se #ABC. Cada dígito abreviado é simplesmente duplicado para produzir a versão completa.

Quando a Abreviação É Válida

A abreviação só funciona quando cada par é um dígito repetido. #3B82F6 não pode ser abreviado porque 3B, 82 e F6 não são pares duplicados. Mas #336699 se qualifica como #369 porque 33, 66 e 99 repetem cada um um único dígito.

Na prática, a abreviação é um recurso CSS válido, mas muitas equipes padronizam na forma completa de seis caracteres para maior clareza. A versão de seis caracteres torna imediatamente óbvio qual é o valor de cada canal. Muitos linters e guias de estilo aplicam o hex completo para consistência.

Hex de 8 Dígitos com Transparência Alfa

O código hex padrão de seis caracteres codifica apenas RGB — não há informação de opacidade. Para adicionar transparência alfa (controlando o quão opaca ou transparente uma cor é), o CSS suporta um formato hex de oito caracteres:

#RRGGBBAA

O par final AA codifica o canal alfa, usando o mesmo intervalo de 0 a 255 dos canais de cor, mapeado para a opacidade:

Exemplos Práticos de Hex de 8 Dígitos

Uma sobreposição escura para fundos de modal: #000000 com 70% de opacidade → #000000B3

Um azul de marca #3B82F6 com 50% de opacidade → #3B82F680

Um branco puro #FFFFFF com 10% de opacidade (realce sutil) → #FFFFFF1A

/* Véu de modal */
.modal-overlay {
  background-color: #000000B3;
}

/* Painel de vidro fosco */
.glass-card {
  background-color: #FFFFFF1A;
  backdrop-filter: blur(12px);
}

Abreviação Alfa de 4 Dígitos

Assim como existe a abreviação #RGB para #RRGGBB, existe uma abreviação #RGBA para #RRGGBBAA:

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

Hex Alfa vs rgba()

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

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

Ambas são bem suportadas em todos os navegadores modernos. A forma rgba() é frequentemente mais legível no CSS porque a opacidade é expressa como um decimal de 0 a 1, o que é imediatamente compreensível. A forma hex de oito caracteres é mais compacta, mas requer conversão mental de hex para porcentagem de opacidade.

Encontrando e Convertendo Códigos Hex

Em Ferramentas de Design

Toda ferramenta de design principal expõe valores hex:

• Figma — Clique em qualquer preenchimento ou traço de cor; o código hex aparece no painel Preenchimento à direita. Clique em "HEX" para copiar.
• Adobe Illustrator / Photoshop — O seletor de cores e o painel de amostras exibem códigos hex. Janela > Cor se o painel não estiver visível.
• Sketch — O campo de preenchimento mostra códigos hex com um botão de cópia.
• Canva — Clique em qualquer elemento, depois no chip de cor de preenchimento para ver e copiar o código hex.

Nos Navegadores Web

Clique com o botão direito em qualquer elemento de uma página web e escolha "Inspecionar" ou "Inspecionar Elemento". No DevTools do navegador, encontre o elemento no painel CSS. Clique em qualquer valor de cor — ele frequentemente alterna entre opções de formato (hex, rgb, hsl, oklch) a cada clique. O Chrome DevTools também mostra uma sobreposição de seletor de cores.

Para uma captura rápida de cores sem o DevTools, extensões do navegador como ColorZilla (Chrome/Firefox) permitem que você faça a amostragem de qualquer pixel na tela e copie seu código hex.

No ColorFYI

Cada página de detalhes de cor no ColorFYI — como /color/FF5733/ ou /color/3B82F6/ — exibe o código hex completo ao lado dos valores RGB, HSL, CMYK e OKLCH. Se você tem uma cor em outro formato, use o Conversor de Cores para convertê-la para hex instantaneamente:

• RGB para hex: Digite rgb(255, 87, 51) → obtenha #FF5733
• HSL para hex: Digite hsl(11, 100%, 60%) → obtenha o equivalente hex
• CMYK para hex: Digite as porcentagens CMYK → obtenha o hex sRGB aproximado

Tabela Comum de Conversão de Hex

Hex no CSS: Uso Prático

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

/* Texto */
color: #1E293B;

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

/* Borda */
border: 1px solid #E2E8F0;

/* Sombra de caixa com alfa */
box-shadow: 0 4px 16px #0000001A;

/* Propriedades personalizadas CSS */
:root {
  --color-primary: #3B82F6;
  --color-primary-dark: #1D4ED8;
  --color-surface: #F8FAFC;
}

Sensibilidade a Maiúsculas e Minúsculas

Os códigos hex não diferenciam maiúsculas de minúsculas no CSS. #3B82F6, #3b82f6 e #3B82f6 são idênticos. A maioria das equipes padroniza em letras maiúsculas ou minúsculas para consistência. Letras maiúsculas são tradicionais nas ferramentas de design; letras minúsculas são populares em bases de código modernas e são preferidas por muitos linters.

Pontos Principais

• Um código hex é um número hexadecimal de seis caracteres que codifica valores de cor RGB. A estrutura é #RRGGBB — dois dígitos hex cada para vermelho, verde e azul.
• Hexadecimal é base 16, usando dígitos de 0 a 9 e letras A–F. Cada par de dois dígitos hex codifica um valor de 0 (00) a 255 (FF), correspondendo ao intervalo completo de um canal RGB.
• Lendo um código hex: valores altos em um par significam alta intensidade do canal. Valores iguais em todos os três pares produzem um neutro (cinza, preto ou branco). Valores desiguais produzem uma cor tendenciosa para o canal que for mais alto.
• Abreviação de 3 dígitos (#RGB) é válida quando cada par repete um único dígito — #336699 abrevia para #369.
• Hex de 8 dígitos (#RRGGBBAA) adiciona um canal de transparência alfa. Os dois últimos dígitos variam de 00 (transparente) a FF (opaco).
• Encontre códigos hex no seletor de cores de qualquer ferramenta de design, no DevTools do navegador inspecionando elementos, ou em qualquer página de cor do ColorFYI.
• Use o Conversor de Cores para traduzir entre hex, RGB, HSL, CMYK e OKLCH instantaneamente.