Color HSL

HSL (Hue, Saturation, Lightness) es un modelo de color que describe los colores de la misma manera en que los percibe el ojo humano: por su matiz (qué color es), su saturación (qué tan vivo) y su luminosidad (qué tan claro u oscuro). Es más intuitivo que RGB para crear y ajustar colores, y cada vez más utilizado en sistemas de diseño modernos.

Los tres parámetros de HSL

Matiz (Hue) — 0 a 360°

El matiz es la posición en la rueda de color. Funciona como un ángulo:

Saturación — 0 % a 100 %

Controla la viveza del color. Al 0 % todos los matices se convierten en gris. Al 100 % el color es puro.

• hsl(0, 0%, 50%) → gris medio (independientemente del matiz)
• hsl(0, 50%, 50%) → rojo apagado
• hsl(0, 100%, 50%) → rojo vibrante

Luminosidad — 0 % a 100 %

Controla el brillo. El 50 % es el color base; valores menores lo oscurecen y mayores lo aclaran:

• hsl(240, 100%, 0%) → negro (cualquier matiz)
• hsl(240, 100%, 50%) → azul puro
• hsl(240, 100%, 100%) → blanco (cualquier matiz)

Sintaxis en CSS

color: hsl(210, 80%, 50%);          /* azul medio */
color: hsl(30, 100%, 50%);           /* naranja puro */
color: hsl(120, 60%, 35%);           /* verde oscuro */
color: hsla(210, 80%, 50%, 0.5);     /* azul al 50 % de opacidad */

Desde CSS Color Level 4, hsl() también acepta una barra para el alfa, igual que rgb():

color: hsl(210 80% 50% / 0.5);   /* nueva sintaxis, sin comas */

Por qué HSL es más práctico que RGB para ajustar colores

Con RGB, si quieres aclarar un color tienes que modificar los tres canales a la vez. Con HSL, basta con subir la luminosidad:

/* Color base */
--brand-500: hsl(220, 90%, 56%);

/* Variantes generadas solo tocando L */
--brand-300: hsl(220, 90%, 72%);
--brand-700: hsl(220, 90%, 36%);
--brand-900: hsl(220, 90%, 20%);

Este patrón es la base de los sistemas de tokens de color de bibliotecas como Tailwind CSS (que internamente calcula sus variantes de color en HSL) o Material Design.

Equivalencias con HEX y RGB

Limitaciones de HSL

• HSL no es perceptualmente uniforme: dos colores con la misma luminosidad HSL pueden parecer muy distintos de brillo para el ojo humano. Por ejemplo, un amarillo al 50 % de luminosidad parece mucho más brillante que un azul al 50 %. Para diseño de alta precisión existen otros modelos como LCH u OKLAB (disponibles en CSS con lch() y oklab()).
• No es lo mismo que HSB/HSV: el modelo HSB (Hue, Saturation, Brightness), usado por Photoshop y otras herramientas de diseño, es diferente al HSL de CSS. Un mismo color puede tener valores distintos en cada modelo, así que presta atención a qué modelo usa la herramienta que estás consultando.