Validador de Cor Hexadecimal

Validação de cor hexadecimal: formatos, regex e CSS moderno

A cor hex e a forma mais concisa de escrever uma cor sRGB na web. A notação #RRGGBB empacota três canais de 8 bits — vermelho, verde, azul — em seis dígitos 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 especificação CSS Color.

Uma cor hex bem formada não e o mesmo que uma cor visível ou uma cor boa. O validador confirma sintaxe; checar contraste contra o fundo (WCAG), distância até outra amostra (deltaE) ou acessibilidade para daltonicos exige lógica extra.

Os quatro formatos válidos

O CSS Color Module Level 4 permite quatro tamanhos após o #:

• 3 dígitos: #RGB. Cada dígito e expandido duplicando-se — #F0A vira #FF00AA. Útil para as 4.096 cores "redondas".
• 6 dígitos: #RRGGBB. A forma clássica, 16.777.216 cores possíveis.
• 4 dígitos: #RGBA. Abreviada de 3 dígitos com alfa — #F00C = #FF0000CC.
• 8 dígitos: #RRGGBBAA. Cor completa com canal alfa explícito.

Uma única 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 dígitos são suportadas no Chrome 62+, Firefox 49+, Safari 9.1+ e Edge 79+ — seguras para qualquer público 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 várias 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(): espaços perceptualmente uniformes (CSS Color 4).
• color(): espaço de cor explícito, incluindo display-P3 para telas wide-gamut.

Hex vive sempre em sRGB, o espaço de cor padrão da web. Para trabalho wide-gamut, prefira color(display-p3 ...) ou oklch(...); para paletas de tema, hex continua sendo o formato mais fácil de copiar e colar.

Onde a validação aparece em projetos reais

Casos de uso comuns:

• Campo de formulário: 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 (maiúsculas, 6 dígitos, sem espaços 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 razão de contraste contra branco ou preto.

Armadilhas comuns

Antipadroes a evitar: rejeitar a abreviacao valida de 3 dígitos #FFF; cortar o sinal # e depois esquecer de readicionar; comparacoes case-sensitive (#fff e #FFF são idênticos); 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 são case-sensitive?

Não. O CSS e case-insensitive para hex: #fff, #FFF e #FfF são o mesmo. A convenção e maiúsculas por legibilidade em design tokens, minúsculas em CSS comprimido.

#FFF e equivalente a #FFFFFF?

Sim. A forma de 3 dígitos expande repetindo cada dígito: #FFF -> #FFFFFF, #F0A -> #FF00AA. Não e uma cor diferente, apenas abreviacao para 4.096 valores específicos.

Hex de 8 dígitos 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, fácil 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.