HSL describe un color como la gente lo expresa: qué tono, qué saturación y qué luminosidad. Convertir un código HEX a HSL es la forma más rápida de obtener un color en una forma que realmente puedas ajustar — aclararlo, atenuarlo o generar una escala completa.
Cómo funciona la conversión de HEX a HSL
- Convierte el código HEX a RGB y divide cada canal por 255, de modo que los tres queden entre 0 y 1.
- Encuentra el valor más alto y el más bajo de los tres. Su promedio es la luminosidad L.
- La diferencia entre ellos determina la saturación S: divídela por (2 − max − min) para colores claros, o por (max + min) para colores oscuros.
- El canal que contiene el máximo decide el matiz H — rojo en 0°, verde en 120°, azul en 240° — y los otros dos canales posicionan el matiz dentro de ese segmento.
Ejemplo práctico
Las fórmulas son exactas, pero los valores HSL normalmente se redondean a grados y porcentajes enteros. Convertir de vuelta puede acabar uno o dos pasos RGB apartado del original — invisible en la práctica, pero útil saberlo si haces viajes de ida y vuelta repetidos.
HEX y HSL explicados
¿Qué es HEX?
Un código HEX es un número hexadecimal de seis dígitos que almacena los canales rojo, verde y azul de un color tras un # inicial. Cada par de dígitos representa un canal, de 00 (ninguno) a FF (completo), lo que da los mismos 16,7 millones de colores que RGB en una notación mucho más corta. HEX es el valor por defecto en CSS, herramientas de diseño y guías de marca.
- Sintaxis:
- #RRGGBB
- Rango:
- 00–FF por canal
- Mejor para:
- CSS, entrega de diseño, guías de marca
¿Qué es HSL?
HSL divide un color en tono (0–360° en la rueda de color), saturación (qué tan colorido, 0–100%) y luminosidad (qué tan claro, 0–100%). Como cada parte coincide con la forma en que la gente describe el color, HSL es el formato más sencillo para crear tintes, sombras y paletas coherentes — a mano o en código.
- Sintaxis:
- hsl(H, S%, L%)
- Rango:
- 0–360°, 0–100%, 0–100%
- Mejor para:
- paletas, tintes y sombras, theming
Tabla de referencia de HEX a HSL
Los colores CSS más comunes, convertidos de HEX a HSL.
| Color | 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%) |