HEX, RGB, HSL: Entendendo os Códigos de Cores da Web

Você está editando um site e vê #FF5733 no CSS. Ou está trabalhando com um designer que envia rgb(255, 87, 51). Ou uma ferramenta de design mostra uma cor como hsl(11, 100%, 60%). Todos descrevem exatamente a mesma cor, um vermelho-alaranjado vibrante, mas em três formatos diferentes.

Se você já ficou confuso com códigos de cores da web, este guia vai esclarecer tudo em cinco minutos.

Como as Cores Digitais Funcionam

Cada cor na sua tela é criada pela mistura de três cores primárias de luz: Vermelho, Verde e Azul. Este é o modelo de cores RGB. Variando a intensidade de cada canal de zero (desligado) ao máximo (brilho total), você pode criar qualquer uma das aproximadamente 16,7 milhões de cores que um display padrão pode mostrar.

• Vermelho 255, Verde 0, Azul 0 = vermelho puro
• Vermelho 0, Verde 255, Azul 0 = verde puro
• Vermelho 0, Verde 0, Azul 255 = azul puro
• Vermelho 255, Verde 255, Azul 255 = branco (todos os canais no máximo)
• Vermelho 0, Verde 0, Azul 0 = preto (todos os canais desligados)
• Vermelho 255, Verde 255, Azul 0 = amarelo (vermelho + verde)

Cada formato de cor usado na web é simplesmente uma forma diferente de expressar esses valores de canal.

Cores HEX

Como São

#FF5733
#3498DB
#2ECC71
#000000
#FFFFFF

Como Funcionam

Um código de cor HEX é uma string de seis caracteres precedida por um símbolo de cerquilha. Os seis caracteres são divididos em três pares, cada um representando um canal de cor em hexadecimal (base 16):

Hexadecimal usa dígitos 0-9 e letras A-F, onde A=10, B=11, C=12, D=13, E=14, F=15. Então FF em hexadecimal equivale a 255 em decimal (15 x 16 + 15 = 255).

Decompondo #FF5733:

• FF = Vermelho em 255 (máximo)
• 57 = Verde em 87
• 33 = Azul em 51

Isso produz um vermelho-alaranjado vibrante.

Abreviação

Quando cada par tem dois caracteres idênticos, você pode usar uma abreviação de três caracteres:

• #FF0000 pode ser escrito como #F00
• #3366FF pode ser escrito como #36F
• #000000 pode ser escrito como #000

Cores RGB

Como São

rgb(255, 87, 51)
rgb(52, 152, 219)
rgb(46, 204, 113)
rgb(0, 0, 0)
rgb(255, 255, 255)

Como Funcionam

A notação RGB declara diretamente os valores dos canais vermelho, verde e azul como números decimais de 0 a 255. É o formato mais intuitivo porque os números correspondem diretamente à intensidade de cada canal de luz.

rgb(255, 87, 51) significa:

• Vermelho: 255 (máximo)
• Verde: 87 (cerca de um terço)
• Azul: 51 (cerca de um quinto)

RGBA: Adicionando Transparência

RGBA adiciona um quarto valor para opacidade (alfa), variando de 0 (totalmente transparente) a 1 (totalmente opaco):

rgba(255, 87, 51, 0.5)   /* 50% transparente */
rgba(0, 0, 0, 0.8)        /* 80% opaco preto */

Isso é útil para sobreposições, sombras e qualquer elemento de design que precise mostrar conteúdo por trás dele.

Cores HSL

Como São

hsl(11, 100%, 60%)
hsl(204, 70%, 53%)
hsl(145, 63%, 49%)
hsl(0, 0%, 0%)
hsl(0, 0%, 100%)

Como Funcionam

HSL significa Matiz (Hue), Saturação (Saturation), Luminosidade (Lightness). Em vez de pensar em termos de mistura de canais vermelho/verde/azul, HSL descreve a cor da maneira como humanos naturalmente pensam sobre ela.

Matiz é a cor em si, expressa como um grau na roda de cores (0-360):

• 0° / 360° = Vermelho
• 60° = Amarelo
• 120° = Verde
• 180° = Ciano
• 240° = Azul
• 300° = Magenta

Saturação é quão vívida a cor é, de 0% (cinza) a 100% (totalmente saturada).

Luminosidade é quão clara ou escura a cor é, de 0% (preto) a 100% (branco). 50% é a luminosidade "normal."

hsl(11, 100%, 60%) significa:

• Matiz: 11° (vermelho levemente alaranjado)
• Saturação: 100% (totalmente vívido)
• Luminosidade: 60% (ligeiramente mais claro que o normal)

HSLA: Adicionando Transparência

Assim como RGBA, HSLA adiciona um canal alfa:

hsla(11, 100%, 60%, 0.5)   /* 50% transparente */

Quando Usar Cada Formato

Para Desenvolvimento Web

HEX é o padrão de fato. A maioria do CSS é escrito com códigos HEX porque são compactos e todo desenvolvedor os reconhece.

Para Sistemas de Design

HSL é ideal para criar paletas de cores consistentes. Para criar variantes mais claras e mais escuras de uma cor de marca, você simplesmente ajusta o valor de luminosidade:

• Primária: hsl(210, 80%, 50%)
• Variante clara: hsl(210, 80%, 70%)
• Variante escura: hsl(210, 80%, 30%)

A matiz e a saturação permanecem iguais, garantindo que as variantes são a mesma "cor" em diferentes brilhos.

Para Transparência

Use RGBA ou HSLA quando precisar de cores semi-transparentes para sobreposições, sombras ou efeitos de vidro.

Convertendo Entre Formatos

Você frequentemente precisará converter entre formatos. Um designer envia valores HSL, mas sua base de código usa HEX. Um guia de marca especifica RGB, mas você precisa de HSL para criar variantes.

A matemática é direta mas tediosa para fazer manualmente. Uma ferramenta de conversão resolve instantaneamente.

Comece a trabalhar com cores:

• Converter Códigos de Cores
• Ferramenta de Conversão de Cores
• Gerador de Paleta de Cores

Todas as ferramentas são gratuitas e funcionam diretamente no seu navegador.