¿Qué son los colores OKLCH?
Matheus Cardoso
oklch es un modelo de color más reciente diseñado para ser perceptualmente uniforme — es decir, la forma en que los colores se ven a nuestros ojos coincide con la matemática detrás de ellos. A diferencia de modelos más antiguos como rgb o hsl, OKLCH produce resultados predecibles al ajustar luminosidad, croma o tono.
Modelos de color
La mayoría de los desarrolladores conocen rgb y hsl. Estos modelos se basan en cómo las pantallas emiten luz, no en cómo percibimos el color. Esa desconexión significa que dos colores con el mismo valor de "luminosidad" en HSL pueden verse muy diferentes a nuestros ojos.
OKLCH resuelve esto. Está construido sobre el espacio de color OKLab — un modelo matemáticamente riguroso que mapea directamente la percepción humana del color. El "OK" representa una versión mejorada del modelo Lab original.
Estructura
Un color OKLCH se define por tres valores:
/* oklch(lightness chroma hue) */
color: oklch(0.7 0.15 280);
/* with alpha */
color: oklch(0.7 0.15 280 / 0.5);Brillo consistente
La mayor ventaja de OKLCH: colores con el mismo valor L realmente se ven igualmente brillantes. En HSL, un amarillo y un azul con la misma luminosidad se ven completamente diferentes.
Abajo, cada círculo tiene L = 0.7 y C = 0.15, con el tono rotando de 0° a 330°. Note cómo todos comparten el mismo brillo percibido:
Ahora compare con HSL — mismo valor de "luminosidad" de 50%, pero brillo percibido totalmente diferente:
Interactivo
Ajuste los controles para explorar el espacio de color OKLCH:
oklch(0.70 0.15 280)Gradientes
Los gradientes CSS pueden interpolar en diferentes espacios de color. Los gradientes OKLCH evitan los tonos opacos que afectan al sRGB. Compare:
El gradiente sRGB pasa por un área gris opaca. OKLCH mantiene transiciones vibrantes y perceptualmente suaves — como nuestros ojos esperan que el color se mezcle.
/* Specify the color space in CSS gradients */
background: linear-gradient(in srgb, #ff00ff, #00ff00);
background: linear-gradient(in oklch, #ff00ff, #00ff00);Soporte de navegadores
OKLCH es compatible con todos los navegadores modernos — Chrome 111+, Firefox 113+, Safari 15.4+. Para navegadores más antiguos, proporcione un fallback en RGB o HSL:
/* Fallback for older browsers */
color: #7b61ff;
color: oklch(0.6 0.24 290);El navegador ignora la segunda declaración si no entiende oklch, usando el valor hexadecimal como fallback.
Más
OKLCH ya se usa en los design tokens de este sitio. Para una inmersión más profunda y herramientas interactivas, consulte oklch.com o la MDN docs.