Validador de Cor Hexadecimal

Validacao de cor hexadecimal: formatos, regex e CSS moderno

A cor hex e a forma mais concisa de escrever uma cor sRGB na web. A notacao #RRGGBB empacota tres canais de 8 bits — vermelho, verde, azul — em seis digitos hexadecimais, mais um canal alfa opcional para transparencia. Cores hex aparecem em CSS, design tokens, manuais de marca, SVG, templates de e-mail e em praticamente todo framework front-end. Validar uma significa confirmar que segue uma das quatro formas permitidas pela especificacao CSS Color.

Uma cor hex bem formada nao e o mesmo que uma cor visivel ou uma cor boa. O validador confirma sintaxe; checar contraste contra o fundo (WCAG), distancia ate outra amostra (deltaE) ou acessibilidade para daltonicos exige logica extra.

Os quatro formatos validos

O CSS Color Module Level 4 permite quatro tamanhos apos o #:

• 3 digitos: #RGB. Cada digito e expandido duplicando-se — #F0A vira #FF00AA. Util para as 4.096 cores "redondas".
• 6 digitos: #RRGGBB. A forma classica, 16.777.216 cores possiveis.
• 4 digitos: #RGBA. Abreviada de 3 digitos com alfa — #F00C = #FF0000CC.
• 8 digitos: #RRGGBBAA. Cor completa com canal alfa explicito.

Uma unica regex cobrindo os quatro casos: ^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$. As formas de 4 e 8 digitos sao suportadas no Chrome 62+, Firefox 49+, Safari 9.1+ e Edge 79+ — seguras para qualquer publico moderno. Navegadores mais antigos degradam bem quando a regra aparece junto com um equivalente em rgba().

Hex ao lado do toolkit de cores moderno do CSS

Hex e uma das varias notacoes de cor que o CSS suporta. Lista completa:

• Cores nomeadas: 147 palavras-chave como red, tomato, rebeccapurple (adicionada em 2014 em homenagem a Rebecca Meyer, filha do pioneiro do CSS Eric Meyer).
• rgb() / rgba(): canais decimais — rgb(255 87 51 / 0.8) na sintaxe moderna com barra.
• hsl() / hsla(): matiz (0-360), saturacao, luminosidade — melhor para variacoes de tema.
• hwb(): matiz, brancura, escuridao — intuitivo para tingimento.
• lab() / lch() / oklab() / oklch(): espacos perceptualmente uniformes (CSS Color 4).
• color(): espaco de cor explicito, incluindo display-P3 para telas wide-gamut.

Hex vive sempre em sRGB, o espaco de cor padrao da web. Para trabalho wide-gamut, prefira color(display-p3 ...) ou oklch(...); para paletas de tema, hex continua sendo o formato mais facil de copiar e colar.

Onde a validacao aparece em projetos reais

Casos de uso comuns:

• Campo de formulario: um color picker com fallback para campo de texto — validar antes de salvar no banco.
• Design tokens: Style Dictionary, Tokens Studio e plugins do Figma emitem valores hex que precisam ser normalizados (maiusculas, 6 digitos, sem espacos em branco).
• Tailwind arbitrary values: bg-[#1da1f2] so compila se o valor parsear como cor valida.
• Branding: cores classicas de marcas que designers colam dos guias — Twitter #1DA1F2, Facebook #1877F2, GitHub #181717.
• Auditoria WCAG: validar o hex e o pre-requisito antes de calcular razao de contraste contra branco ou preto.

Armadilhas comuns

Antipadroes a evitar: rejeitar a abreviacao valida de 3 digitos #FFF; cortar o sinal # e depois esquecer de readicionar; comparacoes case-sensitive (#fff e #FFF sao identicos); confundir a ordem do alfa — CSS usa RRGGBBAA, enquanto Android, Apple e alguns formatos de imagem usam AARRGGBB, um bug extremamente comum ao portar entre plataformas. Sempre documente qual ordem seus tokens usam.

FAQ

Cores hex sao case-sensitive?

Nao. O CSS e case-insensitive para hex: #fff, #FFF e #FfF sao o mesmo. A convencao e maiusculas por legibilidade em design tokens, minusculas em CSS comprimido.

#FFF e equivalente a #FFFFFF?

Sim. A forma de 3 digitos expande repetindo cada digito: #FFF -> #FFFFFF, #F0A -> #FF00AA. Nao e uma cor diferente, apenas abreviacao para 4.096 valores especificos.

Hex de 8 digitos com alfa e suportado nos navegadores?

Sim. #RRGGBBAA e #RGBA fazem parte do CSS Color 4 e foram entregues no Chrome 62, Firefox 49, Safari 9.1 e Edge 79 — todo navegador da era 2017+. Abaixo disso, use rgba().

Devo armazenar cores como hex no banco?

Para uma camada de tema de UI, hex e adequado: curto, sem perda dentro de sRGB, facil de validar. Para design wide-gamut ou pipelines de color grading, armazene a string completa oklch() ou lab() e gere hex apenas como fallback de CSS.