HSL descreve uma cor do jeito que as pessoas falam: que matiz, quão saturada, quão clara. Converter um código HEX para HSL é a forma mais rápida de pôr uma cor num formato que tu realmente possas ajustar — clarear, dessaturar ou construir uma escala inteira.
Como funciona a conversão de HEX para HSL
- Converte o código HEX para RGB e divide cada canal por 255, para que os três fiquem entre 0 e 1.
- Encontra o maior e o menor dos três valores. A média deles é a luminosidade L.
- A diferença entre eles determina a saturação S: divide-a por (2 − max − min) para cores claras, ou por (max + min) para as escuras.
- O canal com o valor máximo decide a matiz H — vermelho em 0°, verde em 120°, azul em 240° — e os outros dois canais posicionam a matiz dentro desse segmento.
Exemplo prático
As contas são exatas, mas os valores HSL normalmente são arredondados para graus inteiros e percentagens. Converter de volta pode portanto ficar um ou dois passos RGB distante do original — invisível na prática, mas bom saber se repetes o vai-e-volta com cores frequentemente.
HEX e HSL explicados
O que é HEX?
Um código HEX é um número hexadecimal de seis dígitos que armazena os canais vermelho, verde e azul de uma cor atrás de um # inicial. Cada par de dígitos representa um canal, de 00 (nenhum) a FF (cheio), o que dá os mesmos 16,7 milhões de cores do RGB numa notação muito mais curta. HEX é o padrão em CSS, ferramentas de design e guidelines de marca.
- Sintaxe:
- #RRGGBB
- Intervalo:
- 00–FF por canal
- Melhor para:
- CSS, entrega de design, guidelines de marca
O que é HSL?
HSL divide uma cor em matiz (0–360° na roda de cores), saturação (quão colorida, 0–100%) e luminosidade (quão clara, 0–100%). Como cada parte corresponde à forma como as pessoas descrevem cor, HSL é o formato mais fácil para criar tons, sombras e paletas consistentes — manualmente ou em código.
- Sintaxe:
- hsl(H, S%, L%)
- Intervalo:
- 0–360°, 0–100%, 0–100%
- Melhor para:
- paletas, tons e sombras, theming
Tabela de referência HEX para HSL
As cores CSS mais comuns, convertidas de HEX para HSL.
| Cor | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |