Qué es el color OKLCH

• OKLCH es un modelo de color moderno adaptado a la percepción visual humana, con la característica de que los cambios de brillo, saturación y tono entre colores se perciben de manera uniforme, por lo que es un modelo de color perceptualmente uniforme
• Su estructura está compuesta por Lightness (luminosidad), Chroma (croma/saturación) y Hue (tono), y en comparación con los modelos existentes permite crear paletas de color más consistentes
• Manteniendo la misma luminosidad y croma, es posible crear una paleta uniforme cambiando solo el Hue, lo que resulta ventajoso para el diseño de UI
• Frente a sRGB/HSL, ofrece cambios de contraste más predecibles y gradientes uniformes, aunque en algunos casos puede generar colores no deseados
• En pantallas modernas como Display-P3 permite una representación de color más amplia; además, cuenta con soporte en navegadores modernos mediante CSS Color 4 y también ofrece fallback a sRGB, por lo que se está consolidando gradualmente como estándar web

---

Introducción al modelo de color OKLCH

• OKLCH es un modelo de color moderno desarrollado con el objetivo de la uniformidad perceptual (perceptually uniform)
• Este modelo funciona de una forma más cercana a cómo las personas perciben realmente el color, lo que hace que trabajar con color sea mucho más cómodo en diseño digital y desarrollo frontend

Conceptos básicos de los modelos de color

• Un modelo de color es un sistema que define y representa los colores matemáticamente
• Ejemplos de modelos usados comúnmente: RGB, HSL, LCH, OKLCH, LAB, XYZ
• Cada modelo determina la facilidad para representar y manipular colores

Ejemplos de notación de color

• oklch(0.55 0.18 260)
• hsl(220 100% 50%)
• rgb(0, 128, 255)
• lch(60% 60 260)
• lab(50 -10 -50)
• color(xyz 0.18 0.19 0.6)
• #1E90FF

Gamut (rango del espacio de color)

• Gamut se refiere al rango total de colores que puede representar ese modelo de color
• Gamut representativos: sRGB (base de la web), Display-P3 (compatible con dispositivos modernos)
• Un espacio de color tiene diversas propiedades además del rango de gamut, como white point y transfer function

Estructura de OKLCH

Tanto OKLCH como LCH están compuestos por tres valores: Lightness, Chroma y Hue
OKLCH está basado en el espacio de color OKLab

• Lightness (luminosidad/brillo): se expresa de 0 a 1 o de 0% a 100% y garantiza cambios uniformes en la luminosidad
• Chroma (croma/saturación): intensidad del color, similar a Saturation (saturación) en HSL
• Hue (tono): expresa el color con un ángulo de 0 a 360 grados

Ventajas y usos de OKLCH

• Luminosidad consistente

  • En OKLCH, si se define un color con la misma luminosidad y croma, cambiando solo el hue, todos los colores se perciben con un brillo similar
  • Con sRGB o HSL tradicionales, el brillo o la saturación pueden verse inconsistentes según el color
  • Por eso, OKLCH facilita la creación de paletas de color perceptualmente uniformes

• Niveles de luminosidad de color predecibles

  • En OKLCH, al cambiar la luminosidad, se pueden generar distintos niveles de color sin alterar el hue (tono) ni el chroma (croma)
  • En HSL y otros modelos, al cambiar la luminosidad puede aparecer un efecto de deriva donde el tono cambia
  • OKLCH permite crear niveles de luminosidad consistentes ajustando solo la luminosidad

• Forma de manejar gradientes (Gradients)

  • En sRGB, como la interpolación se hace entre valores rojo, verde y azul, el punto intermedio puede verse apagado o con cambios bruscos de brillo
  • OKLCH permite crear gradientes más naturales al interpolar sobre los ejes de Lightness, Chroma y Hue
  • Sin embargo, como el valor de Hue tiene una estructura circular, pueden aparecer variaciones de color inesperadas
  • Para evitarlo, se puede interpolar linealmente en OKLab (interpolation) para obtener resultados más predecibles

Soporte de espacios de color

• sRGB no alcanza a cubrir parte del amplio espacio de color que muestran las pantallas modernas
• Usando OKLCH, es posible representar colores más intensos en dispositivos compatibles con gamas amplias como Display-P3
• En dispositivos que solo soportan sRGB, el color se mapea al más parecido posible

Valor máximo de Chroma (croma/saturación)

• OKLCH puede especificar matemáticamente colores que están fuera del rango que una pantalla real puede mostrar
• Por ejemplo, un valor de chroma demasiado grande como oklch(0.7 0.4 40) no puede mostrarse realmente y se recorta (clipping) al color más cercano
• Es importante entender el concepto de chroma máximo y ajustar valores apropiados según el matiz, la luminosidad y el espacio de color seleccionado (sRGB, Display-P3)

Soporte en navegadores y fallback

• Los colores OKLCH se introdujeron en CSS Color Module Level 4 y hoy cuentan con soporte en la mayoría de los navegadores modernos
• En navegadores antiguos puede no haber soporte, por lo que se pueden definir valores de fallback con la directiva CSS @supports

  @layer base {  
    :root {  
      /* sRGB hex */  
      --color-gray-100: #fcfcfc;  
      --color-gray-200: #fafafa;  
      --color-gray-300: #f4f4f4;  
  
      @supports (color: oklch(0 0 0)) {  
        /* OKLCH */  
        --color-gray-100: oklch(0.991 0 0);  
        --color-gray-200: oklch(0.982 0 0);  
        --color-gray-300: oklch(0.955 0 0);  
      }  
    }  
  }  
  

• En los navegadores compatibles se aplicará OKLCH, y en los no compatibles se usarán colores sRGB (hex)

Herramienta oklch.fyi

• oklch.fyi es una herramienta web que ofrece funciones relacionadas con OKLCH, como generación de paletas de color OKLCH y conversión de variables CSS
• Ayuda a usar colores OKLCH con mayor facilidad en sistemas de diseño, desarrollo de temas y otros casos