Escoller unha cor en HSL é cómodo, pero follas de estilo, entrega de deseño e documentos de marca aínda usan HEX. Este conversor pecha esa fenda e dáche o código de seis díxitos para calquera combinación de tonalidade, saturación e luminancia.
Como funciona a conversión de HSL a HEX
- Convérte a saturación e a luminancia en fraccións: 60% convértese en 0.6.
- Calcula a croma C = (1 − |2L − 1|) × S — así determínas canto se afasta a cor do gris.
- Usa a tonalidade para colocar esa croma nos canais vermello, verde e azul, logo despraza os tres por L − C/2.
- Multiplica cada canal por 255, redóndeo e escríbeo como dous díxitos hexadecimais.
Exemplo práctico
A redondeo ocorre unha vez, no último paso, cando cada canal se axusta a un valor enteiro entre 0 e 255. O resultado é o código HEX máis próximo ao teu input HSL e normalmente idéntico ao que mostra unha ferramenta de deseño.
HSL e HEX explicados
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
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
Táboa de referencia de HSL a HEX
As cores CSS máis comúns, convertidas de HSL a 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 |