Notação CSS · sRGB · transparência
Como funcionam os códigos de cor HEX
Leia seis dígitos como pares de vermelho, verde e azul, entenda a forma curta de três dígitos e o alfa de oito, depois teste o valor no contexto real sem confundir notação e aparência.
códigos de cor HEX
O que significam os códigos de cor HEX?
Códigos de cor HEX são instruções compactas de sRGB. Em #RRGGBB, RR define vermelho, GG define verde e BB define azul; cada par vai de 00 a FF, equivalente a 0 até 255 em decimal. O CSS também aceita #RGB abreviado, #RGBA com transparência e #RRGGBBAA com um par alfa completo. Essas formas descrevem canais numéricos, não um nome universal de tinta, aparência calibrada ou aprovação automática de acessibilidade. A habilidade útil é decodificar códigos de cor HEX, preservar o valor exato e testar o resultado no fundo e no estado em que ele realmente será mostrado.
Quatro regras que vale lembrar
- códigos de cor HEX: seis dígitos formam três pares de vermelho, verde e azul no espaço sRGB
- códigos de cor HEX: três dígitos se expandem por duplicação, portanto #3A7 é exatamente #33AA77
- códigos de cor HEX: as formas de quatro e oito dígitos colocam alfa no final; 00 é transparente e FF opaco
- códigos de cor HEX: o mesmo valor pode parecer diferente em outra tela ou fundo, então a notação é apenas parte da decisão
Compare as quatro formas HEX do CSS
O CSS Color Module Level 4 define quatro comprimentos válidos. A tabela separa ordem, precisão e transparência para que códigos de cor HEX parecidos não sejam tratados como sequências intercambiáveis.
| Forma | Ordem dos canais | Exemplo | Equivalente | Estados disponíveis |
|---|---|---|---|---|
| #RGB · códigos de cor HEX | vermelho, verde, azul | #3A7 | #33AA77 | 4.096 cores |
| #RGBA · códigos de cor HEX | vermelho, verde, azul, alfa | #3A7C | #33AA77CC | 4.096 cores × 16 níveis alfa |
| #RRGGBB · códigos de cor HEX | vermelho, verde, azul | #33AA77 | rgb(51 170 119) | 16.777.216 cores |
| #RRGGBBAA · códigos de cor HEX | vermelho, verde, azul, alfa | #33AA77CC | rgb(51 170 119 / 80%) | 16.777.216 cores × 256 níveis alfa |
códigos de cor HEX: Leia cada canal como um número de base 16
O hexadecimal usa dezesseis símbolos: 0 a 9 e depois A a F para os valores decimais 10 a 15. Dois símbolos conseguem codificar 16 × 16, ou 256, estados. Nos códigos de cor HEX de seis dígitos, o primeiro par pertence ao vermelho, o segundo ao verde e o terceiro ao azul. 00 é o mínimo e FF é o máximo decimal 255. Em #2468AC, o vermelho vale 0x24 ou 36, o verde 0x68 ou 104 e o azul 0xAC ou 172. Escrever rgb(36 104 172) descreve as mesmas coordenadas sRGB.
códigos de cor HEX: Entenda a abreviação antes de encurtar
Códigos de cor HEX de três dígitos não são valores de seis dígitos com detalhes removidos livremente; cada caractere é duplicado. #F09 expande para #FF0099, #ABC para #AABBCC e #123 para #112233. Um valor de seis dígitos só pode ser abreviado quando ambos os caracteres de cada um dos três pares são iguais. #33AA77 pode virar #3A7, mas #32AA77 não pode. Isso explica a precisão: três dígitos oferecem 16 opções por canal, gerando 16³ ou 4.096 cores; seis oferecem 256 por canal, gerando 256³ ou 16.777.216 cores.
códigos de cor HEX: Coloque o alfa depois do azul
Códigos de cor HEX de oito dígitos seguem #RRGGBBAA. O último par é alfa: 00 significa totalmente transparente, FF totalmente opaco e os valores intermediários representam opacidade parcial. Por exemplo, #0000FFCC é azul com alfa CC, que o exemplo do W3C equivale a 80% de opacidade. #RGBA expande como a forma de três dígitos, então #05AC vira #0055AACC. Alguns sistemas gráficos e APIs antigas mostram bytes empacotados em outra ordem. No CSS moderno, siga a forma CSS e mantenha o alfa no final.
códigos de cor HEX: Saiba o que HEX preserva e o que ele não preserva
Códigos de cor HEX no CSS especificam sRGB diretamente. Eles são compactos e conhecidos, mas não descrevem uma cor Display P3 de ampla gama, um valor Lab independente do dispositivo, uma receita CMYK de impressão ou uma amostra física medida. Converter uma fonte de ampla gama em códigos de cor HEX de seis dígitos pode mapear ou recortar cores dentro do sRGB. Uma captura, um conta-gotas do navegador e um arquivo de design também podem divergir por causa de perfis, recursos da tela e tratamento de exportação. Preserve o espaço original quando ele for importante e entregue HEX quando sRGB for de fato o destino.
Checklist para uma entrega HEX confiável
Antes de colocar um valor no CSS, numa paleta ou num token, verifique a notação e a decisão ao redor dela.
- códigos de cor HEX: confirme exatamente 3, 4, 6 ou 8 dígitos hexadecimais depois da cerquilha
- códigos de cor HEX: expanda a forma curta numa revisão precisa para deixar todos os canais visíveis
- códigos de cor HEX: registre se o par alfa é intencional e identifique o fundo usado na avaliação
- códigos de cor HEX: preserve sRGB como espaço assumido, sem apresentar o valor como universal
- códigos de cor HEX: teste contraste, nome e aparência com uma ferramenta separada para cada tarefa
Use um valor HEX em três etapas
Um fluxo curto mantém o código rastreável enquanto separa decodificação, descrição e validação.
códigos de cor HEX: 1. Decodifique e normalize
códigos de cor HEX: cole o valor completo, verifique o comprimento, expanda a abreviação quando necessário e mantenha o alfa. Confirme os números RGB antes de editar qualquer canal.
códigos de cor HEX: 2. Descreva ou colete
códigos de cor HEX: use o identificador de nomes quando um rótulo legível ajudar a comunicação, ou o conta-gotas de imagem quando a fonte for um pixel local. Trate o nome como vizinho, não como identidade oficial.
códigos de cor HEX: 3. Teste a dupla real
códigos de cor HEX: coloque o primeiro plano sobre o fundo previsto, considere a transparência e faça a verificação. Salve os dois valores, o estado de uso e a justificativa no token ou na nota de implementação.
O que as fontes oficiais estabelecem
As especificações públicas foram conferidas em 31 de julho de 2026. Os números descrevem sintaxe e regras de teste, não prometem ranking ou aparência idêntica.
- códigos de cor HEX: O CSS Color Module Level 4 define 3, 4, 6 e 8 dígitos, documenta a ordem dos canais e informa 4.096 cores em três dígitos contra cerca de 17 milhões em seis. Ler a seção HEX do W3C
- códigos de cor HEX: O MDN documenta as quatro sintaxes, a faixa de 0 a FF, duplicação de caracteres, equivalência de caixa e os extremos alfa entre transparente e opaco. Ler a referência <hex-color> do MDN
- códigos de cor HEX: A explicação do WCAG 2.2 apresenta 4,5:1 para texto normal e 3:1 para texto grande, entre outros requisitos; um valor isolado não produz nenhuma taxa. Ler a orientação de contraste WCAG
“The number of hex digits given determines how to decode the hex notation into an RGB color.”
Perguntas sobre códigos de cor HEX
HEX e RGB produzem cores diferentes?
códigos de cor HEX: Não quando coordenadas e espaço coincidem. Códigos de cor HEX de seis dígitos e rgb() podem expressar os mesmos canais sRGB: #33AA77 equivale a rgb(51 170 119). A notação muda, não a cor pretendida. Funções CSS novas também representam outros espaços; confirme o espaço antes de exigir um equivalente direto de seis dígitos.
Em #RGBA, a transparência vem primeiro ou por último?
códigos de cor HEX: Por último. Códigos de cor HEX de quatro e oito dígitos no CSS usam #RGBA e #RRGGBBAA, portanto A segue o azul. #3A7C expande para #33AA77CC. Outro software pode mostrar inteiros empacotados em ordem de bytes diferente; confira qualquer valor de uma API não CSS antes de colá-lo numa folha de estilos.
Por que valores HEX idênticos parecem diferentes?
códigos de cor HEX: Códigos de cor HEX idênticos podem estar cercados por outras cores, compostos sobre fundos diferentes ou renderizados em telas com perfis distintos. O código fixa coordenadas sRGB e alfa opcional, não todo o sistema de visualização. Compare dentro da interface pretendida e preserve o contexto.
Um valor HEX prova o contraste WCAG?
códigos de cor HEX: Não. Uma taxa exige ao menos primeiro plano e fundo, além do tratamento correto de transparência e estado. Códigos de cor HEX fornecem entradas; o resultado vem da comparação de luminâncias relativas. Teste as duplas reais em estados normal, hover, desativado e foco quando forem relevantes.