OKLCH para diseñadores: por qué reemplazó a HSL

Si alguna vez armaste una escala de color subiendo la luminosidad de HSL en pasos iguales y notaste que el centro se veía mal, ya conociste la razón por la que existe OKLCH.

Qué falla en HSL

HSL es práctico. El tono como un ángulo, la saturación y la luminosidad como porcentajes: fácil de entender y fácil de ajustar a mano.

El problema es que su eje de luminosidad no corresponde a la luminosidad que percibimos. hsl(60 100% 50%) es un amarillo intenso. hsl(240 100% 50%) es un azul profundo. Los dos dicen tener un 50% de luminosidad. Ponlos lado a lado y el amarillo es muchísimo más brillante: la luminancia relativa medida es 0.928 frente a 0.072, unas trece veces de diferencia.

No es un error de redondeo. Es consecuencia de que HSL sea una simple transformación matemática de RGB, sin ningún modelo de la visión humana. Nuestros ojos son mucho más sensibles a las longitudes de onda verdes que a las azules, y HSL no lo sabe.

El daño práctico:

• Una escala construida con pasos iguales de HSL se ve desigual, con colores amontonados en unas zonas y saltos en otras
• Dos colores con la misma luminosidad HSL tienen contrastes muy distintos contra el mismo fondo
• Ajustar la saturación cambia la luminosidad aparente como efecto secundario

Qué hace distinto OKLCH

OKLCH se basa en el espacio de color Oklab, diseñado específicamente para que la distancia numérica coincida con la distancia percibida.

Tres componentes:

• L: luminosidad, de 0% a 100%, perceptualmente uniforme
• C: croma, más o menos la saturación, empieza en 0 y no tiene un límite superior fijo
• H: tono, de 0 a 360 grados

La propiedad importante: los pasos iguales en L se ven como pasos iguales. oklch(50% 0.2 60) y oklch(50% 0.2 250) realmente se perciben con la misma luminosidad, uno amarillo anaranjado y el otro azul.

Eso hace que los tres componentes sean independientes, tal como los diseñadores ya suponen que son. Puedes cambiar la luminosidad sin que el color parezca cambiar de tono, y cambiar el tono sin que el color parezca aclararse.

Por qué esto importa para el contraste

El contraste depende casi por completo de la luminosidad. El tono apenas lo afecta y la saturación casi nada.

En OKLCH, eso significa que hay exactamente una perilla que girar. Fija H y C, mueve L, y cambias el contraste sin que el color deje de reconocerse. En HSL, el mismo movimiento cambiaría el color aparente, porque la luminosidad de HSL está enredada con todo lo demás.

Por eso “conservar el color de la marca y corregir el contraste” es un problema que se puede resolver y no una negociación. Tu marca vive en el tono; la medición vive en la luminosidad; OKLCH los mantiene separados.

Cómo construir una escala

El enfoque estándar es fijar el tono, subir la luminosidad en pasos iguales y reducir el croma en ambos extremos, porque los colores muy claros y muy oscuros no pueden sostener una saturación alta sin salirse del rango que se puede mostrar.

--blue-100: oklch(95% 0.03 255);
--blue-300: oklch(82% 0.09 255);
--blue-500: oklch(62% 0.16 255);
--blue-700: oklch(48% 0.14 255);
--blue-900: oklch(30% 0.08 255);

Un solo tono, pasos de luminosidad iguales y el croma en su punto más alto en el centro. El resultado se ve como una familia coherente, que es justo lo que una escala HSL con pasos iguales no logra.

La trampa de la gama

OKLCH puede describir colores que tu pantalla no puede mostrar. oklch(70% 0.4 150) es una coordenada perfectamente válida y está muy fuera de sRGB.

Cuando eso pasa, el navegador recorta el color, y el recorte no es elegante: puede cambiar el tono de forma notable, así que el color que obtienes no es el que especificaste. Cualquier herramienta que haga cálculos en OKLCH tiene que bajar el croma hasta que el color quepa, en lugar de dejar que se recorte. Si escribes los valores a mano, mantén el croma por debajo de alrededor de 0.24 para no salirte de sRGB, o compruébalo en una herramienta que tenga en cuenta la gama.

Compatibilidad con navegadores

Todos los navegadores principales admiten OKLCH desde 2023, y tiene el estado Baseline Widely available. Puedes escribirlo directamente en CSS sin alternativa de respaldo para la mayoría de los públicos:

color: oklch(62% 0.16 255);

Tailwind CSS v4 usa OKLCH en su paleta predeterminada, lo que es una señal razonable de hacia dónde se ha movido el ecosistema.

Cuándo HSL sigue sirviendo

Para un ajuste rápido y puntual a un solo color, HSL funciona perfectamente y su modelo mental es conocido.

En cuanto estás generando un sistema (una escala, un conjunto de tokens semánticos, variantes clara y oscura del mismo color de marca), la uniformidad importa, y HSL te va a pelear en cada paso.

Nuestro contrast checker busca en OKLCH justamente por esta razón: puede fijar tu tono y tu croma y mover solo la luminosidad, y así encuentra el color más cercano que pasa y que todavía se ve como el tuyo.