¿Qué es OKLCH? Una explicación para diseñadores

OKLCH es una forma de describir el color con tres valores que coinciden con cómo lo perciben realmente los humanos: Luminosidad (qué tan brillante se ve), Croma (qué tan colorido es) y Tono (qué color es, como un ángulo). Su propiedad definitoria es la uniformidad perceptual: dos colores con el mismo valor L se ven de verdad igual de claros — algo que modelos más antiguos como HSL hacen mal. Esa propiedad es la razón por la que CSS añadió soporte nativo, y por la que herramientas como Tailwind v4 han movido sus paletas a él.

Este artículo es la versión en lenguaje sencillo; la serie completa del modelo de color vive en nuestra guía de OKLCH.

¿Qué significan las tres letras?

• L — Luminosidad (0–100%). Qué tan claro aparece el color, calibrado contra la visión humana en vez de contra operaciones sobre números RGB.
• C — Croma (0 a ~0,37). Qué tan colorido es, desde gris (0) hacia arriba. A diferencia del porcentaje de saturación de HSL, el croma es una cantidad absoluta — 0,15 de croma significa la misma cantidad de colorido sin importar el tono. Esa distinción tiene consecuencias prácticas para el trabajo de paleta.
• H — Tono (0–360°). El ángulo en la rueda de color: ~30 es rojo-naranja, ~145 verde, ~260 azul.

El “OK” no es un consuelo — nombra el espacio de color OKLab, presentado por Björn Ottosson en A perceptual color space for image processing (2020), que corrigió distorsiones conocidas de modelos perceptuales anteriores, en particular alrededor de los azules.

¿Por qué HSL miente sobre la luminosidad?

Prueba esto en cualquier selector de color: hsl(60, 100%, 50%) es un amarillo abrasador, casi blanco. hsl(240, 100%, 50%) es un azul profundo y oscuro. La misma “luminosidad del 50%” — un brillo real radicalmente distinto. La luminosidad de HSL es una fracción geométrica de los valores RGB, no una afirmación sobre la percepción, y el amarillo simplemente carga mucha más luz percibida que el azul con la misma intensidad RGB.

Esto no es un error cosmético. Rompe los dos trabajos para los que los diseñadores más necesitan un modelo de color:

1. Rampas. Genera una paleta de 10 pasos marchando la luminosidad HSL del 95% al 20% y los pasos se apiñan, se desvían en tono aparente y se enturbian en el centro — las paletas construidas así solían necesitar una ronda de corrección manual.
2. Contraste. El contraste del texto es función de la diferencia de luminosidad percibida. Si la L de tu modelo no sigue la percepción, no puedes predecir qué pasos de tu paleta pasarán la accesibilidad — solo puedes probar y parchear.

En OKLCH, la L es luminosidad percibida, que es lo que hace predecibles ambos trabajos.

¿Qué te da realmente la uniformidad perceptual?

Una vez que la luminosidad significa lo que dice, las cosas que antes requerían ajuste manual se vuelven calculables:

• Rampas de color uniformes. Coloca tus pasos en una curva de luminosidad y se ven igualmente espaciados — para cada tono, sin una pasada de corrección por tono.
• Contraste predecible. Mantén el texto y el fondo a una distancia L conocida y los requisitos de contraste pasan a ser una propiedad de la escala, no una prueba por par.
• Neutros honestos. Los grises pueden llevar un susurro intencional de croma hacia el tono de marca en vez de un tinte RGB accidental.
• Modo oscuro por derivación. Una paleta oscura puede calcularse a partir de la clara — nueva curva de luminosidad, croma reforzado — en vez de re-elegirse a mano.

Mira el primer punto en vivo: abre una rampa OKLCH de 10 pasos en Scale Composer — una semilla azul, pasos colocados en una curva de luminosidad. Cada salto visual entre vecinos es del mismo tamaño, que es lo que a la generación basada en HSL le cuesta entregar.

¿Cómo se escribe OKLCH en CSS?

Es CSS nativo desde 2023 — con soporte en todos los navegadores principales, sin plugin ni paso de compilación:

.button {
  background: oklch(0.55 0.15 260);        /* L C H */
  color: oklch(0.98 0.01 260);
  border-color: oklch(0.55 0.15 260 / 40%); /* alfa opcional */
}

También existe una forma de color relativa — oklch(from …) — que deriva un color de otro, útil para estados hover y matices.

¿Cuál es la trampa? Croma y gama

Como el croma es absoluto, no toda combinación L/C/H corresponde a un color que tu pantalla pueda producir. Los colores muy claros y muy oscuros solo pueden sostener un poco de croma; pasa del límite y el color se recorta (“recorte de gama”), lo que aplana las rampas justo donde deberían brillar. La solución habitual es limitar el croma un poco por debajo del techo físico en cada luminosidad — margen en vez de recorte.

Las pantallas de gama más amplia elevan ese techo: las pantallas Display-P3 (la mayoría de móviles y Macs actuales) pueden mostrar bastante más croma en los medios tonos de lo que sRGB permite.

¿Alguna vez escribo valores OKLCH a mano?

Rara vez — y ese es el punto. El papel real de OKLCH es como el motor bajo tu paleta: eliges un color semilla, y las curvas de luminosidad más los perfiles de croma generan la escala. Te encontrarás valores oklch() en crudo sobre todo en tokens generados, en la paleta por defecto de Tailwind v4, y al depurar por qué un color se ve mal.

Una forma rápida de construir intuición sobre el modelo: alterna la misma rampa azul entre sRGB y P3 y observa cómo los pasos medios ganan croma a medida que el techo de gama sube — L y H se quedan quietos mientras solo se mueve “qué tan colorido”. Una vez que has visto los tres ejes moverse de forma independiente, el hex empieza a parecer lo que es: un formato de salida, no una forma de pensar sobre el color.