HSL describe unha cor do xeito en que a xente fala dela: que tonalidade, canto de saturada, canto de luminosa. Converter un código HEX a HSL é a forma máis rápida de poñer unha cor nun formato que poidas axustar — aclarala, apagala ou crear toda unha escala a partir dela.
Como funciona a conversión de HEX a HSL
- Converte o código HEX a RGB e divide cada canal por 255, de xeito que os tres queden entre 0 e 1.
- Atopa o maior e o menor dos tres valores. A súa media é a luminancia L.
- A diferenza entre eles determina a saturación S: divídese por (2 − max − min) para cores claras, ou por (max + min) para as escuras.
- O canal que contén o máximo decide a tonalidade H — vermello en 0°, verde en 120°, azul en 240° — e os outros dous canles posicionan a tonalidade dentro dese segmento.
Exemplo práctico
A matemática é exacta, pero os valores HSL normalmente redóndanse a graos enteiros e porcentaxes. Converter de volta pode quedar a un ou dous pasos RGB do orixinal — imperceptible na práctica, pero útil saber se fas viaxes de ida e volta repetidamente.
HEX e HSL explicados
Que é HEX?
Un código HEX é un número hexadecimal de seis díxitos que almacena os canles vermello, verde e azul dunha cor detrás dun # inicial. Cada par de díxitos cubre un canal, desde 00 (ningún) ata FF (completo), o que dá os mesmos 16,7 millóns de cores que RGB nunha notación moito máis curta. HEX é o predeterminado en CSS, ferramentas de deseño e guías de marca.
- Sintaxe:
- #RRGGBB
- Rango:
- 00–FF por canal
- Mellor para:
- CSS, entrega de deseño, guías de marca
Que é HSL?
HSL divide unha cor en tonalidade (0–360° na roda de cores), saturación (o nivel de cor, 0–100%) e luminosidade (o brillo, 0–100%). Como cada parte coincide coa forma en que a xente describe a cor, HSL é o formato máis sinxelo para crear tintas, sombras e paletas coherentes — manualmente ou en código.
- Sintaxe:
- hsl(H, S%, L%)
- Rango:
- 0–360°, 0–100%, 0–100%
- Mellor para:
- paletas, tintas e sombras, tematización
Táboa de referencia de HEX a HSL
As cores CSS máis comúns, convertidas de HEX a 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%) |