OKLCH vs HSL: por qué HSL miente sobre la luminosidad

La diferencia que importa entre OKLCH y HSL es lo que significa «luminosidad». La L de HSL es una fracción geométrica de los valores RGB de un color; la L de OKLCH es una medida de cuán brillante se ve realmente el color. Dos colores HSL que comparten una «luminosidad del 50 %» pueden diferir drásticamente en brillo percibido — dos colores OKLCH con la misma L se ven casi igual de claros.

Ambos modelos describen el color como tres valores con un ángulo de tono, lo que hace que parezcan intercambiables. Este artículo desmonta por qué no lo son; el resto de la serie sobre modelos de color vive en nuestra guía de OKLCH.

¿Cómo pueden dos colores compartir un valor de luminosidad y no parecerse en nada?

Compara hsl(60, 100%, 50%) con hsl(240, 100%, 50%) en cualquier selector de color. El primero es amarillo — tan brillante que apenas sobrevive sobre un fondo blanco. El segundo es un azul profundo, lo bastante oscuro como para llevar texto blanco. Ambos afirman tener una luminosidad del 50 %.

Mide los seis tonos de las esquinas de HSL en «100 %, 50 %» con OKLCH, donde la L sigue la percepción, y la dispersión se vuelve visible como números:

Seis colores, un único valor de luminosidad HSL — y una dispersión de luminosidad medida de 0,45 a 0,97, más de la mitad de todo el eje. El amarillo al «50 %» se sitúa cerca del blanco; el azul al «50 %» se sitúa más cerca del negro.

¿Qué mide en realidad HSL?

HSL data de finales de la década de 1970, diseñado como una forma más amigable de manejar los valores RGB — geométricamente, un cilindro envuelto alrededor del cubo RGB, como detalla el artículo de Wikipedia sobre HSL y HSV. Su luminosidad es pura aritmética de canales: toma el más alto y el más bajo de los tres valores RGB y promédialos. #ffff00 (255, 255, 0) y #0000ff (0, 0, 255) promedian ambos al 50 %, así que HSL los reporta como igual de claros.

Nada en ese cálculo involucra a un ojo — y los ojos ponderan el espectro de forma muy desigual. La visión humana es mucho más sensible a la luz en la región verde-amarilla que en el extremo azul; el efecto se llama eficiencia luminosa. Una pantalla que lleva su canal azul a plena potencia entrega una fracción del brillo percibido que la misma potencia entrega a través del verde. El amarillo (rojo más verde al máximo) cae cerca del pico de la curva de sensibilidad; el azul cae cerca de su borde. Ese es el núcleo intuitivo del problema: HSL cuenta energía RGB, pero el brillo es una experiencia producida por un sistema visual con fuertes preferencias sobre la longitud de onda. Un modelo que nunca consulta al observador reportará mal lo que el observador ve.

OKLCH está calibrado en la dirección opuesta: parte de mediciones de la percepción y trabaja de vuelta hacia las matemáticas, de modo que una L igual está diseñada para significar «se ve igual de claro» entre tonos.

¿Por qué esto rompe las rampas y el contraste?

Un número de luminosidad engañoso cuesta poco cuando ajustas un color de forma aislada. El daño aparece en cualquier flujo de trabajo que compara la luminosidad entre tonos:

• Las rampas se apiñan y se enturbian. Genera una paleta de 10 pasos haciendo bajar la luminosidad HSL del 95 % al 20 %, y cada tono se distorsiona de forma distinta: los amarillos quedan desvaídos durante la mitad superior, los azules se hunden en la oscuridad pronto, los tonos medios derivan hacia el gris. Las paletas generadas así solían necesitar una ronda de corrección manual por tono.
• El contraste no se puede leer de los números. El contraste de texto accesible depende de la diferencia de luminosidad percibida entre el texto y el fondo. Cuando la L no sigue la percepción, «estos dos valores están a 40 puntos de distancia» no predice nada — una combinación que aprueba en un tono falla en otro, y te quedas reducido a probar pares uno por uno.

Ambos fallos comparten una raíz: el flujo de trabajo asume que el número de luminosidad es comparable entre tonos, y en HSL no lo es.

¿Cómo se ve un eje de luminosidad honesto?

Una demostración limpia usa los dos tonos que HSL trata de forma más distinta — amarillo y azul — colocados sobre la misma curva de luminosidad de OKLCH. Abre las dos rampas una al lado de la otra en Scale Composer: el paso tres de la rampa amarilla y el paso tres de la rampa azul comparten su luminosidad medida, de forma visible, y el patrón se mantiene hasta el final de ambas escalas. El croma difiere — el amarillo y el azul pueden sostener distintas cantidades de colorido a una luminosidad dada — pero el brillo desciende al unísono.

Producir esto con HSL requeriría una tabla de corrección construida a mano por tono, porque su eje de luminosidad significa algo distinto en cada tono. En OKLCH es sencillamente lo que ocurre cuando dos rampas comparten una misma curva de luminosidad.

¿Cuándo sigue estando bien HSL?

HSL es engañoso específicamente donde importa la consistencia entre tonos — lo que deja espacio real donde no importa. Para un retoque rápido y puntual — oscurecer un poco un solo estado hover, atenuar una insignia, deambular entre tonos en un selector — HSL es cómodo e inofensivo, porque nada aguas abajo depende de comparar sus números entre tonos. El problema empieza cuando se construyen sistemas sobre él: paletas generadas, contraste calculado, temas oscuros derivados de los claros. Ahí, la distorsión de la luminosidad se acumula en cada paso.

Una regla que funciona: HSL para tocar colores individuales, OKLCH para cualquier cosa que los genere o los compare.

¿Cómo haces que la diferencia cale?

Los números argumentan el caso; ver moverse los ejes lo convierte en intuición. Toma una rampa en Scale Composer y arrastra el desplazamiento de tono del azul hacia el amarillo y de vuelta. En HSL, un barrido de tono equivalente haría oscilar el brillo percibido arriba y abajo. Aquí la curva de luminosidad se mantiene quieta: cada paso conserva su brillo mientras solo el tono rota por la paleta. Después de un barrido completo con la luminosidad fijada en su sitio, «la misma L significa el mismo brillo» deja de ser una afirmación de especificación y se convierte en algo en lo que puedes confiar mientras diseñas.