Escolher uma cor em HSL é confortável, mas folhas de estilo, entregas de design e documentos de marca ainda usam HEX. Este conversor fecha essa lacuna e dá-te o código de seis dígitos para qualquer combinação de matiz, saturação e luminosidade.
Como funciona a conversão de HSL para HEX
- Transforma saturação e luminosidade em frações: 60% torna-se 0.6.
- Calcula a croma C = (1 − |2L − 1|) × S — isso indica a distância da cor para o cinzento.
- Usa a matiz para colocar essa croma nos canais vermelho, verde e azul, depois desloca os três por L − C/2.
- Multiplica cada canal por 255, arredonda, e escreve-o como dois dígitos hexadecimais.
Exemplo prático
O arredondamento acontece uma vez, na última etapa, quando cada canal é fixado a um valor inteiro de 0–255. O resultado é o código HEX mais próximo do teu input HSL e normalmente idêntico ao que uma ferramenta de design mostra.
HSL e HEX explicados
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
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
Tabela de referência HSL para HEX
As cores CSS mais comuns, convertidas de HSL para HEX.
| Cor | HSL | HEX |
|---|---|---|
| black | hsl(0, 0%, 0%) | #000000 |
| white | hsl(0, 0%, 100%) | #FFFFFF |
| red | hsl(0, 100%, 50%) | #FF0000 |
| lime | hsl(120, 100%, 50%) | #00FF00 |
| blue | hsl(240, 100%, 50%) | #0000FF |
| yellow | hsl(60, 100%, 50%) | #FFFF00 |
| orange | hsl(39, 100%, 50%) | #FFA600 |
| teal | hsl(180, 100%, 25%) | #007F80 |
| purple | hsl(300, 100%, 25%) | #80007F |
| gray | hsl(0, 0%, 50%) | #808080 |