Cores em CSS: HEX, RGB e HSL

Em CSS, que é a linguagem que define a aparência de um site, você pode escrever a mesma cor de três jeitos principais: HEX (#2A6F97), RGB (rgb(42 111 151)) e HSL (hsl(202 56% 38%)). Os três geram a mesma cor na tela. A diferença está em qual é mais fácil de ler, copiar e ajustar. HEX é o mais comum para copiar de um editor de paletas, e HSL é o mais prático para clarear ou escurecer.

A mesma cor nos três formatos

Vamos usar um azul de exemplo, o #2A6F97. Em CSS ele pode ser escrito assim:

color: #2A6F97;
color: rgb(42 111 151);
color: hsl(202 56% 38%);

O resultado visual é o mesmo (os números de HSL são arredondados, então pode haver diferença mínima). Veja o que significa cada formato.

HEX: o código de seis caracteres

HEX é o código de seis caracteres depois do #. Os dois primeiros são a quantidade de vermelho, os dois do meio de verde e os dois últimos de azul. Cada par vai de 00 (nenhum) a FF (máximo). No #2A6F97, 2A é o vermelho, 6F é o verde e 97 é o azul.

Existe a forma curta de três dígitos, como #f09, que o navegador lê como #ff0099. Ela só serve quando cada par tem dígitos iguais. Há também formas com quatro ou oito dígitos, em que os últimos controlam a transparência. Por exemplo, #2A6F97CC é o mesmo azul com cerca de 80% de opacidade.

HEX é bom para copiar e colar, e por isso aparece em editores, guias de marca e neste site. É ruim para ajustar de cabeça: ninguém olha #2A6F97 e sabe qual código dá um azul mais claro.

RGB: três canais de 0 a 255

RGB vem de Red, Green, Blue (vermelho, verde, azul). Cada canal vai de 0 a 255. O #2A6F97 vira rgb(42 111 151), porque 2A em decimal é 42, 6F é 111 e 97 é 151.

A sintaxe moderna usa espaços entre os números e uma barra antes da transparência: rgb(42 111 151 / 80%). A sintaxe antiga, com vírgulas, como rgb(42, 111, 151), também continua funcionando. As duas formas funcionam nos navegadores atuais.

RGB é útil quando você vem de um programa de design que mostra os três números. Para ajustar tons, ainda é incômodo, porque mudar um canal muda matiz e brilho ao mesmo tempo.

HSL: matiz, saturação e luminosidade

HSL vem de Hue, Saturation, Lightness: matiz, saturação e luminosidade. Em português simples:

• Matiz (H): a “cor pura” na roda de cores, em graus de 0 a 360. 0 é vermelho, 120 é verde, 240 é azul.
• Saturação (S): o quanto a cor é intensa, de 0% (cinza) a 100% (viva).
• Luminosidade (L): o quanto é clara, de 0% (preto) a 100% (branco).

O MDN descreve o hsl() com exatamente esses parâmetros: 100% de saturação é totalmente saturado, 0% é cinza, e a luminosidade vai de preto a branco, com 50% como valor “normal”. Se quiser entender melhor cada eixo, leia matiz, saturação e luminosidade explicados.

Nosso azul fica hsl(202 56% 38%). Para um azul mais claro para fundo de aviso, mantenha o matiz e suba a luminosidade: hsl(202 56% 93%). Para um azul mais escuro para o clique, desça: hsl(202 56% 28%). É por isso que HSL é o preferido para fazer variações da mesma cor.

Atenção: a luminosidade do HSL não é a mesma que o olho percebe. O vermelho hsl(0 100% 50%) e o verde hsl(120 100% 50%) têm o mesmo L, 50%, mas sobre fundo branco dão razões de contraste de cerca de 4,0 para 1 e 1,4 para 1. Sempre meça o contraste de verdade. O artigo sobre contraste WCAG mostra como.

Outro truque: a cor complementar tem o matiz 180 graus de distância. O MDN dá o exemplo de 10 graus e 190 graus. Com o azul de 202 graus, a complementar fica perto de 22 graus, um laranja. Veja mais em cores complementares.

Tabela de conversão da paleta de exemplo

Nome	HEX	RGB	HSL
Azul	#2A6F97	rgb(42 111 151)	hsl(202 56% 38%)
Turquesa	#00B2CA	rgb(0 178 202)	hsl(187 100% 40%)
Off-white	#F7F7F2	rgb(247 247 242)	hsl(60 24% 96%)
Laranja	#E4572E	rgb(228 87 46)	hsl(14 77% 54%)

Alfa: cor com transparência

Os três formatos aceitam um quarto valor, o alfa, que controla a transparência. Na sintaxe moderna ele vem depois de uma barra: hsl(202 56% 38% / 0.5) ou hsl(202 56% 38% / 50%). O alfa aceita número de 0 a 1 ou porcentagem, e 0 é totalmente transparente. Se for omitido, a cor é opaca.

Transparência é útil para sombras e camadas escuras sobre fotos. Cuidado ao usar em texto, porque o contraste passa a depender do fundo que está atrás.

Passo a passo: pôr as cores no site

1. Pegue os HEX da sua paleta no editor.
2. Dê um nome a cada cor, em variáveis do CSS (veja tokens de cor).
3. Escreva uma vez, no topo do arquivo:

:root {
  --azul: #2A6F97;
  --fundo: #F7F7F2;
}

4. Use em qualquer lugar com var(--azul).
5. Se precisar de uma variação, escreva em HSL ao lado.

Tropeços ao escrever cores em CSS

• Esquecer o #. 2A6F97 sem cerquilha não funciona como cor.
• Misturar vírgula e espaço. Na sintaxe antiga, hsl(202, 56%, 38%), a porcentagem na saturação e na luminosidade é obrigatória. Na moderna, não use vírgulas.
• Usar nome de cor em vez de código. Nomes como rebeccapurple ou transparent existem, mas poucos nomes servem a uma marca.
• Achar que HSL garante contraste. Meça sempre.
• Colar a cor da tela sem conferir. Cor copiada de uma captura de tela pode ter mudado por causa do perfil de cor do monitor.

Quando escolher HEX, RGB ou HSL

Use HEX para guardar e compartilhar, porque é curto. Use HSL quando for criar variações claras e escuras de uma mesma cor. Use RGB quando o programa de design só entregar os três números. Em um mesmo site, é normal misturar: o importante é que todas as cores venham de um lugar só, as variáveis no topo.