Formatos de cor em CSS

Navegadores aceitam várias sintaxes de cor em CSS. Saber o que sua matriz de suporte permite evita fallbacks silenciosos.

Hex em CSS

.brand {
  color: #2563eb;
  border-color: #2563eb80; /* hex de 8 dígitos com alpha em navegadores modernos */
}

Hex em minúsculas é escolha comum de guia de estilo; o navegador trata #ABC e #abc da mesma forma.

rgb() e hsl() funcionais

Sintaxe legada com vírgula:

background: rgba(37, 99, 235, 0.12);

Sintaxe moderna com espaços (CSS Color Level 4):

background: rgb(37 99 235 / 0.12);
color: hsl(221 83% 53%);

Autoprefixers e minificadores podem normalizar formatos — mantenha tokens de origem consistentes no repositório do design system.

Cores nomeadas e keywords

transparent, currentColor e a longa lista de cores nomeadas (tomato, rebeccapurple) compilam rápido em protótipos. Temas de produção devem preferir tokens em vez de cores nomeadas aleatórias para evitar deriva.

Herança com currentColor

color: currentColor faz ícones e bordas seguirem a cor do texto — útil em botões que mudam de estado sem duplicar hex.

Espaços modernos: oklch e color-mix

CSS mais novo suporta espaços perceptualmente uniformes:

--accent: oklch(58% 0.22 264);
--hover: color-mix(in oklch, var(--accent) 85%, black);

A adoção depende dos alvos de navegador. Stacks de fallback costumam manter hex sRGB primeiro e blocos @supports para temas wide-gamut.

Restrições de e-mail e PDF

Muitos clientes de HTML para e-mail removem hsl() e variáveis. Exporte hex inline para templates mesmo que o app web use variáveis CSS por dentro.

Conclusão

Escolha um formato de autoria para tokens, gere saídas específicas por plataforma no build e documente quais superfícies exigem fallback só em hex.