Convertir color HEX a HSL
Convierte un color hexadecimal a HSL (matiz, saturación, luminosidad), el formato más intuitivo para crear variantes más claras u oscuras de un mismo color.
HSL
hsl(173, 82%, 24%)
Calcula el matiz (ángulo de 0 a 360), la saturación y la luminosidad a partir de los canales RGB, siguiendo el modelo de color HSL estándar.
Casos de uso
- Crear variantes de un color ajustando solo la luminosidad.
- Definir un sistema de color en CSS con hsl().
- Entender la composición de un color de marca.
Cómo funciona
- 1
Escribe el HEX
Introduce el código hexadecimal, con o sin almohadilla.
- 2
Copia el HSL
El valor hsl(h, s%, l%) se calcula al instante.
Preguntas frecuentes
¿Por qué usar HSL en vez de HEX?
HSL facilita crear tonos más claros u oscuros de un mismo color cambiando solo el valor de luminosidad, algo difícil de hacer a ojo con HEX.
¿Cómo se usa el valor HSL en CSS?
Se pega tal cual en cualquier propiedad de color: background-color: hsl(210, 80%, 50%); Todos los navegadores modernos lo soportan de forma nativa, sin necesidad de convertirlo a HEX.