RGB, HEX ou HSL: que notação escolher?

Na Web, a mesma cor pode ser escrita de várias formas. Um azul pode aparecer como #2563eb, rgb(37 99 235) ou hsl(221 83% 53%). Visualmente podem produzir exatamente o mesmo resultado, mas apresentam a informação de maneira diferente.

HEX, RGB e HSL não são três níveis de qualidade: são formas diferentes de descrever ou manipular uma cor.

A diferença numa frase

• RGB descreve uma cor através das componentes vermelho, verde e azul;
• HEX codifica normalmente essas mesmas componentes RGB em formato hexadecimal compacto;
• HSL descreve hue, saturação e lightness.

O conversor de cores permite passar de uma notação para outra.

RGB

Os ecrãs produzem cores combinando luz vermelha, verde e azul. É um modelo aditivo: valores baixos aproximam-se do preto; valores altos, do branco.

Numa representação comum de 8 bits por canal, cada componente varia entre 0 e 255:

rgb(255 0 0)     /* vermelho */
rgb(0 0 0)       /* preto */
rgb(255 255 255) /* branco */

Três canais de 256 valores permitem 16.777.216 combinações.

Porque 0 a 255?

8 bits representam 2⁸ = 256 valores. Como o primeiro é zero, o intervalo termina em 255.

Esta estrutura permite compreender diretamente HEX.

HEX

A notação hexadecimal utiliza 16 símbolos, de 0 a F. Cada par vai de 00 a FF, correspondente a 0–255 em decimal.

Uma cor é normalmente escrita:

#RRGGBB

#FF0000 equivale a rgb(255 0 0). #2563EB corresponde a rgb(37 99 235).

HEX não é um espaço de cor diferente: é sobretudo uma forma compacta de escrever componentes RGB.

Forma abreviada

Quando cada par repete o mesmo caráter, certas cores podem ser abreviadas:

#ffffff → #fff
#336699 → #369

A cor é exatamente a mesma.

Alpha e transparência

CSS moderno permite incluir alpha:

rgb(37 99 235 / 50%)

A cor mantém as componentes RGB e recebe 50% de opacidade. HEX também pode usar uma componente alpha em notações de oito dígitos.

Alpha não altera as coordenadas da cor; altera a forma como ela é composta com o fundo.

HSL

HSL separa três ideias:

• Hue: posição na roda cromática, geralmente em graus;
• Saturation: intensidade da cor;
• Lightness: posição entre preto e branco no modelo HSL.

Por exemplo:

hsl(221 83% 53%)

pode representar o mesmo azul que #2563eb.

Porque HSL pode ser prático?

Ao criar variantes de uma mesma tonalidade, ajustar hue, saturation ou lightness pode ser mais intuitivo do que alterar três componentes RGB.

É útil em sistemas de design, temas e geração de paletas.

Lightness não é luminância WCAG

Este ponto é fundamental. Duas cores com L=50% em HSL não têm necessariamente a mesma luminosidade percebida ou o mesmo contraste.

Amarelo e azul com igual lightness HSL podem ter luminâncias relativas muito diferentes. Para acessibilidade, utilize o verificador de contraste, não apenas HSL.

Que notação escolher?

Escolha aquela que torna o código mais legível e o sistema mais fácil de manter.

HEX é compacto e muito comum. RGB é direto ao trabalhar com canais e alpha. HSL é intuitivo para certas variações e paletas.

CSS moderno também suporta modelos mais recentes como Lab, LCH e OKLCH, úteis quando se pretende maior controlo perceptual e gamuts alargados.

A reter

RGB, HEX e HSL podem representar a mesma cor sRGB. Alterar a notação não melhora a qualidade da cor: apenas muda a forma de a escrever e manipular. Para contraste e perceção, escolha a ferramenta e o modelo adequados ao problema real.