Formatos de cor explicados: HEX, RGB e HSL

Na web, a mesma cor pode ser escrita de várias formas — #3498db, rgb(52, 152, 219) e hsl(204, 70%, 53%) são exatamente o mesmo azul. Saber o que cada formato significa (e quando recorrer a qual) torna escolher, ajustar e combinar cores muito mais fácil. Este guia destrincha HEX, RGB e HSL, e como eles se relacionam.

Tudo começa com vermelho, verde e azul

As telas criam cor misturando três luzes coloridas: vermelho, verde e azul. Cada cor que você vê é alguma combinação desses três canais, cada um ajustado a uma intensidade de 0 (desligado) a 255 (máximo). Preto total é 0, 0, 0; branco total é 255, 255, 255. HEX e RGB são só duas notações para esses mesmos três números.

RGB

RGB informa os três valores de canal diretamente:

rgb(52, 152, 219)
     R    G    B

É o mais legível dos três porque os números mapeiam direto para "quanto de vermelho, verde, azul". Ótimo quando você quer raciocinar sobre os canais em si.

HEX

HEX codifica esses mesmos valores de canal 0–255 em hexadecimal (base 16), como um # seguido de três pares:

#3498db
 34 98 db
 R  G  B     →  R=52, G=152, B=219

Cada par vai de 00 (0) a ff (255). HEX é compacto e é o padrão na maioria das ferramentas de design e no CSS, por isso é o formato que você mais vai copiar e colar. Também existe uma forma abreviada: #39f se expande para #3399ff duplicando cada dígito.

HSL

HSL descreve a cor do jeito que as pessoas pensam nela intuitivamente, com três eixos diferentes:

• Matiz (Hue) (0–360°) — a cor em si numa roda: 0° vermelho, 120° verde, 240° azul.
• Saturação (Saturation) (0–100%) — quão viva ela é, do cinza à cor plena.
• Luminosidade (Lightness) (0–100%) — quão clara, do preto ao branco passando pela cor.

hsl(204, 70%, 53%)
    hue  sat  light

O superpoder do HSL é ajustar a cor. Quer uma versão mais escura de uma cor? Baixe a luminosidade e deixe matiz e saturação em paz. Quer um conjunto de tons combinando? Mantenha o matiz fixo e varie a luminosidade. Fazer isso em HEX ou RGB significa recalcular os três canais; em HSL é um único número.

Alfa: adicionando transparência

Cada formato tem uma variante com um canal alfa para opacidade, de 0 (totalmente transparente) a 1 (totalmente opaco): rgba(52, 152, 219, 0.5) e hsla(204, 70%, 53%, 0.5). O CSS moderno também permite um HEX de 8 dígitos onde o último par é o alfa — #3498db80 é o mesmo azul a 50%.

Qual você deve usar?

• HEX — copiar uma cor de marca fixa, ou colar numa ferramenta de design. Compacto e universal.
• RGB / RGBA — quando você raciocina sobre os canais brutos ou precisa de transparência simples.
• HSL / HSLA — quando você projeta: construir paletas, tons de hover/ativo, ou ajustar uma cor no feeling.

A boa notícia é que você não precisa converter à mão. Nosso conversor HEX↔RGB traduz entre formatos na hora, e o seletor de cores deixa você escolher uma cor visualmente e ler seus valores HEX, RGB e HSL de uma vez — além de construir gradientes e paletas. Precisa tirar uma cor de uma imagem? O seletor de cores de imagem faz exatamente isso.