Tono, saturación y luminosidad

En HSL, el amarillo y el azul tienen ambos una luminosidad de 50%, pero según la fórmula de luminancia de WCAG el amarillo refleja casi 13 veces más luz que el azul.

Del cubo al cilindro

Los números RGB son fáciles para una pantalla y difíciles para una persona. Si quieres «el mismo azul, un poco más claro», tienes que cambiar los tres canales a la vez, en cantidades distintas. HSL reorganiza los mismos colores sRGB para que los controles coincidan con cómo habla la gente del color. CSS Color 4 lo describe como un modelo cilíndrico: un ángulo de tono alrededor, un eje central de luminosidad del negro al blanco y un radio de saturación, que indica qué tan lejos está un color de un gris neutro.

Imagina el cubo RGB apoyado sobre su esquina negra, con el blanco justo arriba. El eje de grises queda vertical. Mira desde arriba: las seis esquinas vivas, rojo, amarillo, verde, cian, azul y magenta, forman un anillo alrededor del eje. HSL toma ese anillo, lo redondea y estira todo el sólido hasta formar un cilindro. El modelo de arriba muestra el resultado: un disco horizontal a la luminosidad elegida y una rebanada vertical en el tono elegido y su opuesto. Haz clic en cualquier punto de cualquiera de las dos superficies para elegir ese color.

Tono

El tono es un ángulo en grados. CSS Color 4 fija el punto de partida: 0deg es el rojo sRGB, 120deg es el verde y 240deg es el azul, y 360deg vuelve al rojo. A medio camino entre los primarios están los secundarios: 60deg amarillo, 180deg cian y 300deg magenta. Como el tono es un ángulo, da la vuelta. Un tono de 390deg es igual a 30deg, y al sumar 180deg a cualquier tono llegas al color justo al otro lado del círculo.

Saturación y luminosidad

La saturación es un porcentaje. Con 100% el color está en la parte exterior del cilindro y es tan vivo como permite sRGB a esa luminosidad. Con 0% está en el eje central y es un gris; CSS Color 4 dice que entonces el tono no tiene ningún efecto, así que hsl(0deg 0% 50%) y hsl(180deg 0% 50%) son el mismo gris. La luminosidad también es un porcentaje. 0% es negro para cualquier tono, 100% es blanco para cualquier tono y 50% da la versión más viva de un tono. Así, hsl(0deg 100% 50%) es el mismo rojo que #ff0000, mientras que hsl(120deg 100% 25%) es un verde oscuro, rgb(0 128 0).

Dónde engaña HSL

HSL es cómodo, y la especificación CSS es franca sobre sus límites. Su luminosidad no es la que ve tu ojo. El amarillo, hsl(60deg 100% 50%), y el azul, hsl(240deg 100% 50%), tienen la misma L de 50%, pero el amarillo se ve mucho más claro. La fórmula de luminancia de WCAG da 0.9278 para ese amarillo y 0.0722 para ese azul, una razón de casi 13. Tampoco el ángulo de tono es uniforme: la especificación señala que un paso de 30 grados entre azules parece pequeño, mientras que el mismo paso entre el amarillo y el verde parece grande. Espacios más nuevos de CSS, como oklch(), se diseñaron para corregir esto. Para comprobar si un texto se puede leer, nunca te fíes de la luminosidad HSL. Usa la relación de contraste, que calcularás en la unidad 6.