OKLCH es un modelo de color perceptual enfocado en la accesibilidad y la usabilidad

¿Qué es OKLCH?

OKLCH representa a un modelo de color perceptual comprendido en el espacio Oklab, que trabaja con coordenadas cilíndricas. Esta notación se introdujo en la especificación CSS Color 4 para mejorar la gestión del color en el diseño web, especialmente en términos de uniformidad perceptual y soporte para gamuts más amplios como Display P3 desarrollado por Apple.

Como tal, OKLCH es una variante del espacio de color Oklab, que a su vez es una mejora del espacio de color CIELAB, diseñado para ser perceptualmente uniforme, lo que significa que los cambios en los valores de color se corresponden más estrechamente con los cambios percibidos por el ojo humano.

Imagen superior: Captura desde la página https://oklch.com/

Parámetros de OKLCH

OKLCH utiliza tres parámetros principales:

• L (luminosidad), cuyo valor varia entre 0% y 100%, o entre 0 y 1, representando la luminosidad del color (negro a blanco).
• C (saturación), cuyo valor varia entre 0 y 0.4, representando la intensidad (pureza) del color.
• H (tono), con valores de entre 0° y 360°, que definen el ángulo de la posición del color en el círculo cromático.

Beneficios del modelo OKLCH

OKLCH ofrece varios beneficios en comparación con otros modelos de color:

• Uniformidad perceptual: Los cambios en los valores de color se perciben de manera más consistente frente a otros modelos, considerando aspectos de usabilidad (contrastes cromáticos). A diferencia de RGB o HSL, en OKLCH un cambio en la luminosidad o croma afecta el color de manera más predecible.
• Ajustes de color relativos: OKLCH facilita la creación de ajustes predecibles y visualmente consistentes al modificar la luminosidad, saturación o tono de un color existente, permitiendo ajustar el contraste con mayor precisión, útil para diseño de aplicaciones y páginas web accesibles.
• Compatibilidad con CSS moderno: OKLCH se integra con las últimas características de CSS, lo que permite desarrollar sistemas de color dinámicos y flexibles en entornos web.
• Optimización para diseño: Facilita la interpolación de colores y la generación de paletas con transiciones más naturales.

Enlaces relacionados

• MDN | oklch()
• Lenguaje CSS | La función LCH() y OKLCH()
• UploadCare | What is OKLCH in CSS and why we use it at Uploadcare
• Kinsta | Dominar las técnicas CSS avanzadas: profundiza en las transiciones, animaciones y transformaciones | 3. oklch() y oklab()

Sigamos aprendiendo, ¡con fundamentos!

Plácido Luna.

#OKLCH #oklab #MDN #RGB #HSL #CIELab #Color #Accesibilidad