Qué es el color OKLCH

 (jakub.kr)
11 puntos por GN⁺ 2025-08-26 | 1 comentarios | Compartir por WhatsApp
  • 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

Lecturas relacionadas

1 comentarios

 
GN⁺ 2025-08-26
Comentarios en Hacker News

  • Tengo dudas sobre la función “Better Gradients”. OKLCH es un espacio polar, y en ese espacio el hue funciona como un ángulo. Al interpolar colores entre dos puntos distintos, se termina avanzando por el borde del círculo. Por ejemplo, si usas el código linear-gradient(in oklch, #f0f, #0f0), al pasar de verde a púrpura se sale del rango de color de forma evidente. Si recorres el círculo en la otra dirección, como en linear-gradient(in oklch longer hue, #f0f, #0f0), pasa por cian o aqua. Estas trayectorias muestran lo incómodo que resulta que un espacio de color perceptual tenga que lidiar con los bordes de sRGB o de la gama de colores perceptibles por el ser humano, es decir, el gamut. De hecho, con que cambie el valor apenas un poco, el color se sale del rango. Hay varios algoritmos para resolverlo, pero se sacrifica la uniformidad perceptual. Por ejemplo, el rojo dentro del gradiente se vuelve inusualmente oscuro. Si quieres mejores gradientes y te importa la uniformidad perceptual, en realidad la interpolación en Oklab debería ser la opción por defecto. Oklab interpola en línea recta a través del círculo y, si hace falta, incluso pasa por el gris (linear-gradient(in oklab, #f0f, #0f0)). Este método también elimina el oscurecimiento que suele verse en la interpolación sRGB y produce un gradiente natural de magenta a lime. Como referencia, Tailwind v4 usó Oklch en la beta en lugar de sRGB, pero en la versión final eligió Oklab como valor por defecto más seguro

    • Creo que la forma en que los navegadores interpolan colores en sRGB es, en realidad, un bug. sRGB es una codificación en escala logarítmica, así que según la especificación original la interpolación de color no debería hacerse directamente en sRGB, sino convirtiéndolo a linear RGB para interpolar

    • Este artículo fue corregido, así que pueden ignorar mi comentario. Aun así, estoy de acuerdo en que la interpolación en Oklab debería ser la predeterminada. El artículo también decía, sobre los “mejores gradientes”, que como el hue de OKLCH es circular puede seguir trayectorias inesperadas. Para evitar ese problema, muchas herramientas usan OKLAB, y Oklab da resultados consistentes con trayectorias rectas

    • En realidad, CIE LAB ya cumple ese mismo papel y además ya existe como estándar (Wikipedia de CIE LAB)
      Material de revisión del W3C

    • Gracias por la explicación tan útil. Yo soy quien escribió este artículo. Voy a corregir el contenido para que quede más claro

    • Hacer un gradiente con dos colores en extremos opuestos del espectro es un caso un poco extremo. Tampoco hay una respuesta correcta sobre cómo debería verse, y además no creo que en diseño real haga falta ese tipo de gradientes muy seguido. Normalmente, cuando se usan gradientes en diseño, se eligen de forma manual los colores intermedios

  • En relación con OKLCH, oklch.com me ayudó a desarrollar intuición. Eso sí, hay que tener en cuenta que el valor de hue no es igual al de HSL, y que el máximo de chroma cambia según el hue y la lightness. Esto no es un bug, sino un reflejo de cómo funciona la visión humana y de las características de las pantallas. A diferencia de OKLCH, en HSL el máximo siempre es constante, pero el significado del color no es consistente. Lo bueno de OKLCH en CSS es que se puede manipular en forma de fórmula. Por ejemplo, se puede usar oklch(from var(--accent) calc(l + .1) c h). Pero para usar bien esas fórmulas, en la práctica necesitas teoría del color o hacer pruebas. Por ejemplo, pensé que para una sombra bastaba con cambiar solo la lightness, pero en realidad también hay que cambiar el hue. No es cierto que los gradientes en OKLCH siempre sean lo mejor. Cuando usas hues similares, el color sí suele verse uniforme, pero si también te importa cómo cambia físicamente la luz al mezclarse, entonces necesitas el espacio de color XYZ. Sobre eso, conviene revisar la documentación de MDN sobre color-mix. Por cierto, “ok” de verdad viene simplemente de la palabra OK. El nombre nació porque el LCH anterior tenía problemas, o sea, no estaba “ok” en ese sentido

    • Dijiste que es bueno poder usar fórmulas en OKLCH de CSS, pero en realidad la manipulación relativa de color se puede usar en todos los espacios de color de CSS. Por ejemplo, se puede usar así: background-color: rgb(from var(--base-color) calc(r - 76.5) g calc(b + 76.5));

    • Gracias a OKLCH y al color relativo pude reducir bastante la cantidad de colores hardcodeados en la hoja de estilos
      Variables CSS de ejemplo

  • Ya se mencionaron varias críticas, pero me parece que como introducción a OKLCH y a cómo aplicarlo en CSS es un artículo bastante bueno. Como pregunta adicional, me da curiosidad la tendencia reciente de no poner fecha en los posts del blog. En particular, creo que la frase “OKLCH es un modelo de color nuevo” se va a volver obsoleta bastante rápido. En el sitio principal solo aparece “agosto de 2025”, así que da la impresión de que deliberadamente evitaron poner la fecha exacta
    Sitio relacionado

    • No puedo explicarlo con precisión, pero creo que los artículos sin fecha son un problema serio. No sé si esta tendencia es algo de moda últimamente, pero cuando no hay fecha es facilísimo confundirlos con textos viejos. A veces intento adivinar el año por los timestamps de los comentarios, pero muchos blogs ni siquiera tienen comentarios, así que me quitan las ganas de volver. (Es irónico que en la página principal del OP diga que “no se obsesiona con los detalles”, pero al final sí se obsesionó con lo estético del diseño y dejó de lado la funcionalidad)

    • Cuando un artículo no tiene fecha, yo intento fijarme en el encabezado Last-Modified cuando recibo el documento HTML por HTTP. Pero muchas veces el autor tampoco se preocupa por eso. Como sugiere la palabra blog, originalmente era un [web]-log, donde el timestamp era un elemento central, y parece que mucha gente ya no entiende eso. Como referencia, el valor de Last-Modified indica la última vez que se modificó ese recurso (el HTML). Si el servidor no configura caché y re-renderiza desde el backend en cada request, entonces la fecha termina actualizándose siempre
      Ejemplo de este problema

    • Es en gran parte por SEO, para evitar que contenido viejo pierda ranking en los motores de búsqueda. Es un truco bastante molesto

    • Es por Google y el SEO

  • Se decía que los colores OKLCH dan un azul más consistente comparado con HSL, pero en la práctica el cambio de brillo en OKLCH se desplaza bastante hacia el verde. Mantener constante la intensidad perceptual sí es una ventaja clara, pero siento que el efecto que aquí se afirma está exagerado

    • Si miras el gráfico de hue de este color, se entiende por qué
      Gráfico de color OKLCH
      Al aumentar el brillo, se supera el límite de la banda de hue para ese color, y el color se desplaza hacia cyan por la limitación de qué tan brillante puede reproducirse el azul en una pantalla. En OKLCH, al ajustar el brillo en un gradiente no se conserva el hue, sino la saturación. Que ese efecto sea bueno o no ya depende del gusto estético, pero como durante mucho tiempo hemos usado colores web desaturados con hue fijo, se siente refrescante poder “elegir qué compromiso quieres hacer”
      Discusión relacionada en Hacker News
      Como además la ciencia ha inventado LEDs azules aún más profundos recientemente, espero que en 10 o 20 años, cuando surja una tecnología que reemplace Display P3, podamos representar gradientes azules más precisos sin este corrimiento hacia cyan. Hasta entonces, lo correcto es lo que se vea mejor en diseño.
      Por cierto, pensando en futuros diseños de espacios de color, se me ocurre que en vez de elegir de forma binaria entre hue y saturación, tal vez podría mantenerse constante la saturación hasta el límite de la pantalla y, a partir de ahí, pasar gradualmente a mantener constante el hue. Pero esto sería muy difícil por las limitaciones de los perfiles de color (IDCv4). Aun así, suena interesante como objetivo experimental para DisplayCAL

    • En mi pantalla no veo absolutamente nada de green shift en ese ejemplo. Me pregunto si tu monitor no estará mal calibrado

    • De acuerdo. El color cambia por completo de azul a cian. Si OKLCH está implementado correctamente, yo jamás querría usarlo. Parece que hay algo gravemente mal en el cálculo del hue. HSL/HSV tiene problemas con la lightness perceptual, pero el hue en sí siempre se mantiene constante, así que no hace falta corregirlo

    • No sé mucho de ciencia del color y quizá esto sea subjetivo, pero en mi opinión, incluso el extremo derecho del color en OKLCH se percibe, en el peor de los casos, como blue-green o simplemente light blue. En cambio, los dos colores más brillantes de HSL no me parecen azules: el penúltimo desde la derecha se ve más bien light purple, y el de más a la derecha casi parece gris. En el texto se decía que el lado oscuro de HSL era grayish, pero en realidad tanto en OKLCH como en HSL el leftmost (el más oscuro) sí se siente azul. Si lo mides con Digital Color Meter de macOS, verás que el valor green del extremo derecho en OKLCH y HSL es casi igual (226 y 227; en sRGB, 228 y 227)

  • Recomiendo un artículo mejor sobre este tema
    OKLCH in CSS: Why quit RGB, HSL, de Evil Martians
    Herramienta para probar conversiones OKLCH
    Discusión previa en Hacker News (hace 6 meses, 30 comentarios)

  • OKLCH está basado en OKLab (un espacio de color uniforme perceptual) y es un modelo para ajustar Lightness, Chroma y Hue. El “OK” viene de que su creador dijo que “funciona más o menos bien”

    • Sospecho que el “OK” de OKLCH en realidad es la abreviatura de “Ottossons kulör” (“el color de Ottosson” en sueco). Puede que el creador haya dicho lo de OK por modestia

  • Creo que cuando se trabaja con color y con texto/logos también hay que considerar el contraste y la legibilidad
    APCA Contrast

    • Ese sitio viene bien si quieres usar el algoritmo de contraste más nuevo (APCA, que todavía no es el algoritmo oficial del futuro estándar WCAG 3), pero hoy en muchas industrias la referencia sigue siendo WCAG 2, así que también hay que tener presentes los requisitos legales.
      Verificador de contraste (WCAG 2)
      Además hay muchas otras herramientas

  • En mi cabeza, el nombre OKLCH se interpretó naturalmente como "Oklachroma"

  • Hay un primer post de blog que presenta el espacio de color OKLab, y es interesante desde una perspectiva histórica
    Post original de OKLab

  • Me pregunto por qué no está documentada la fórmula para convertir al espacio de color OKLCH. Si buscas en Google, solo aparece un Gist[0] y sí hay una página de Wikipedia sobre Oklab[1]
    Ejemplo de fórmula de conversión en Gist
    Wikipedia de Oklab

    • La clave de la conversión está en la matriz entre Oklab y sRGB. La conversión entre OKLab y OKLCH en sí no es más que un cambio de coordenadas, y eso también aparece en Wikipedia

    • OKLCH y OKLab son el mismo espacio de color. Lo que cambia es la forma de representarlo: coordenadas cartesianas (OKLab) vs. coordenadas polares (OKLCH)