HEX, RGB e HSL

Cada formato enfatiza modelos mentais diferentes. Conhecer a matemática em alto nível evita bugs silenciosos de arredondamento.

HEX

#RRGGBB empacota três canais de byte em hexadecimal:

• #2563EB → vermelho 0x25 (37), verde 0x63 (99), azul 0xEB (235)

A forma curta #RGB duplica nibbles: #26E → #2266EE.

HEX é compacto em handoffs de design e diffs Git. É incômodo para edits “10% mais escuro” sem conversor.

RGB

rgb(37, 99, 235) nomeia canais diretamente — fácil validar contra specs de design que listam 0–255.

A notação funcional também suporta alpha:

rgba(37, 99, 235, 0.85)

CSS moderno prefere rgb(37 99 235 / 0.85) com canais separados por espaço.

HSL

hsl(hue, saturation, lightness) alinha com a linguagem de designers:

• Hue — ângulo na roda de cores (0–360)
• Saturation — vívido vs cinza
• Lightness — claro vs escuro

Exemplo: hsl(221, 83%, 53%) corresponde a #2563EB.

HSL ajuda a gerar estados hover/active: mantenha o matiz, reduza um pouco a lightness.

Cuidado: “lightness” em HSL não é uniformidade perceptual. Dois matizes a 50% de lightness podem parecer desiguais — use ferramentas de contraste para pares de texto.

Arredondamento e deriva

Converter HEX → HSL → HEX pode não fazer round-trip idêntico. Para design tokens, escolha uma forma canônica armazenada (muitas vezes HEX ou OKLCH em sistemas modernos) e derive o resto no build.

Quando usar cada um

Formato	Bom para
HEX	Tokens, export Figma, armazenamento compacto
RGB	Specs de assets Android/iOS, pipelines de imagem
HSL	Ajustes de tema, paletas programáticas

Resumo

Use conversores para mover entre visões, mas armazene um valor autoritativo por token. Documente se alpha pertence ao mesmo token ou a uma escala de opacidade separada.