Color HSL: la forma más cómoda de escribir colores en CSS

Un color HSL se escribe con tres números: tono, saturación y luminosidad. En CSS, hsl(262 83% 58%) significa un tono de 262 grados (violeta), 83% de saturación (intenso) y 58% de luminosidad (un poco por encima del punto medio). Es el mismo violeta que #7c3bed, pero se puede leer. ¿Lo quieres más claro? Sube el último número. ¿Más suave? Baja el del medio. Esa propiedad, un significado por número, es lo que hace del HSL la forma más cómoda de escribir colores a mano.

Qué significan tono, saturación y luminosidad

El tono es una posición en la rueda de color, expresada en grados. El rojo está en 0 y otra vez en 360, el amarillo en 60, el verde en 120, el cian en 180, el azul en 240 y el magenta en 300. Mover el tono hace girar el color sin cambiar su fuerza.

La saturación es cuánto color hay. Al 0% todos los tonos son el mismo gris; al 100% es tan intenso como permite la pantalla. La luminosidad va del negro al 0% al blanco al 100%, con el tono puro al 50%. El modelo se explica más a fondo en tono, saturación y brillo, que también cuenta en qué se diferencia el HSB de las apps de diseño del HSL de CSS.

Sintaxis HSL en CSS

Hay dos formas de escribirlo. La moderna separa los valores con espacios y pone el alfa tras una barra. La antigua usa comas y una función aparte, hsla(). Los navegadores aceptan ambas, y hsl() ya admite alfa, así que hsla() ya no hace falta. La referencia de MDN para hsl() recoge todas las variantes.

.button {
  /* modern syntax */
  background: hsl(262 83% 58%);

  /* with 80% opacity */
  background: hsl(262 83% 58% / 0.8);

  /* older comma syntax, still valid */
  background: hsla(262, 83%, 58%, 0.8);

  /* hue can carry a unit */
  background: hsl(262deg 83% 58%);
}

Crea una escala de color cambiando la luminosidad

Aquí es donde el HSL se gana su sitio. Fija el tono y la saturación, ve cambiando la luminosidad por pasos y tendrás una familia de tintes y sombras que claramente van juntos. Aquí tienes un violeta en siete pasos, con el hex al que se convierte cada uno.

Combínalo con propiedades personalizadas de CSS y todo tu tema depende de dos números. Guarda el tono y la saturación una vez y elige una luminosidad para cada función. Cambia la variable del tono y toda la interfaz pasa de violeta a verde azulado, que es la idea detrás de las variables CSS para temas.

:root {
  --brand-h: 262;
  --brand-s: 83%;

  --brand-50:  hsl(var(--brand-h) var(--brand-s) 95%);
  --brand-200: hsl(var(--brand-h) var(--brand-s) 85%);
  --brand-500: hsl(var(--brand-h) var(--brand-s) 58%);
  --brand-800: hsl(var(--brand-h) var(--brand-s) 30%);
}

/* a teal theme is one line */
.theme-teal {
  --brand-h: 175;
}

Colores relativos

Los navegadores más recientes también admiten la sintaxis de color relativo, que lee las partes HSL de cualquier color y te deja ajustarlas. hsl(from var(--brand) h s calc(l + 15%)) da una versión más clara del color de marca, sea cual sea, aunque se haya definido en hex. Consulta el soporte actual en caniuse antes de depender de ella y deja un valor alternativo sencillo. Para mezclar dos colores en lugar de retocar uno, la herramienta es color-mix() en CSS.

Dónde te engaña el HSL

El HSL es una reordenación del RGB, no un modelo de la visión humana. Su luminosidad es una simple media del canal más brillante y el más tenue, así que ignora que nuestros ojos ven el amarillo y el verde mucho más claros que el azul. El resultado: dos colores con la misma luminosidad HSL pueden parecer completamente distintos en claridad.

Esto importa en dos sitios. Primero, una escala creada por pasos de luminosidad HSL será desigual entre tonos: un amarillo al 50% es demasiado claro para texto, mientras que un azul al 50% pasa sin problema. Prueba siempre pares reales con un comprobador de contraste. Segundo, los degradados y las paletas generadas que giran el tono a luminosidad fija se aclaran y oscurecen al pasar por el amarillo y el azul.

OKLCH conserva la misma idea amable (luminosidad, colorido, tono) pero mide la luminosidad como lo hacen los ojos. Si empiezas un sistema de diseño nuevo, es la mejor opción por defecto; si editas CSS existente o quieres un ajuste rápido y legible, el HSL sigue siendo perfectamente válido.

Convertir HSL a hex y al revés

Rara vez necesitas hacer las cuentas, porque cualquier herramienta de diseño y el panel de herramientas para desarrolladores del navegador convierten por ti: haz clic en una muestra de color en las devtools de Chrome o Firefox y ve pasando por los formatos. Por dentro, el HSL se convierte primero a RGB, y de RGB a hex es simple aritmética de pares, explicada en hex a RGB. Cuenta con pequeñas diferencias de redondeo: hsl(262 83% 58%) cae en #7c3bed, a un paso del #7c3aed con el que quizá empezaste, porque los porcentajes enteros no pueden alcanzar cada uno de los 16,7 millones de valores hex.

Si diseñas en Gradiently, casi nunca tocas estos números: un Mark lleva su propia paleta y, en Pro, el kit de marca guarda tus colores para que el Designer los aplique por ti.