HEX vs RGB vs HSL em CSS e design tokens

O mesmo azul de marca chega como #2563EB, rgb(37, 99, 235) e hsl(221, 83%, 53%). Os três podem estar certos — e os três podem divergir após arredondamento, composição com alpha ou ajuste no Figma.

Esta comparação ajuda frontend e design system a escolher um formato canônico de armazenamento e derivar os outros sem quebrar checagens de contraste.

O que cada formato otimiza

Formato	Força	Fraqueza
HEX	Compacto em tokens, diffs e handoffs	Difícil clarear/escurecer mentalmente
RGB	Alinha com specs de design (0–255)	Verboso; relações de matiz opacas
HSL	Ajustes de tema (mesma matiz, nova luminosidade)	Não é perceptualmente uniforme; surpresas de contraste

Nenhum dos três é “mais preciso” — são visões do mesmo triplo sRGB, salvo migração para OKLCH etc.

Uma fonte da verdade por token

Design systems saudáveis guardam um valor autoritativo por token semântico (--color-primary) e geram saídas por plataforma:

:root {
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-on-primary: #ffffff;
}

Componentes referenciam --color-on-primary, não hex espalhado. Quando marketing manda um swatch novo, atualize o token uma vez e regenere HSL/RGB para docs.

Use o Conversor de cores para validar conversões e contraste WCAG em pares de texto — não só o swatch em branco.

Alpha muda o contraste

rgba(37, 99, 235, 0.12) em um card branco não é o mesmo par que texto #2563EB em azul sólido. WCAG deve usar foreground/background compostos na superfície que o usuário vê.

Overlays semi-transparentes em fotos falham mais que preenchimentos planos — teste o pior fundo, não o artboard padrão do Figma.

HSL para paletas programáticas, hex na entrega

Pipeline comum:

1. Design no Figma (muitas vezes hex ou RGB)
2. Engenharia armazena hex nos tokens
3. Build emite HSL para geradores de tema ou APIs de gráfico
4. Email/PDF exportam hex inline porque suporte a hsl() é irregular

Se você gera hover subtraindo luminosidade HSL, revalide contraste no novo par — “10% mais escuro” não garante AA.

Arredondamento e deriva no round-trip

HEX → HSL → HEX pode não devolver bytes idênticos. Isso importa quando:

• Compara snapshots de CI em bundles CSS
• Sincroniza cores XML Android com tokens web

Documente regras de arredondamento no README do repo de tokens. Não deixe cada app arredondar por conta própria.

Guia rápido

• Diffs compactos e suporte universal? → Hex canônico
• Canvas/WebGL/APIs de gráfico? → Derive RGB no build
• Temas claro/escuro de uma matiz? → Ajustes em HSL ou OKLCH; valide contraste a cada passo
• HTML email? → Só hex nos templates

Aprendizado relacionado

Razões WCAG, sintaxe CSS Color Level 4 e workflow de amostragem no curso de cor para desenvolvedores.

Conclusão

HEX, RGB e HSL são visões intercambiáveis — não religiões rivais. Escolha uma forma canônica, derive o resto com intenção e meça contraste em fundos reais. Assim #2563EB continua um azul em produção, não cinco.