Hemos pasado años ajustando manualmente códigos Hexadecimales y valores HSL para que un botón azul no parezca más oscuro que uno amarillo, o para evitar que un degradado se vuelva grisáceo en el centro.

Esa era de parches y correcciones manuales ha terminado. La llegada de OKLCH a los estándares de CSS y su adopción masiva en frameworks como Tailwind v4 marca el cambio de paradigma más importante en la ciencia del color aplicada a la web desde 1976.

El problema sistémico de HSL y RGB

El modelo HSL (Hue, Saturation, Lightness), aunque intuitivo, tiene un fallo de base: es un modelo matemático, no perceptual.

Si configuras un color amarillo y un color azul con un 50% de Lightness en HSL, notarás que el amarillo brilla intensamente mientras que el azul es profundo y oscuro. Para el ojo humano, no tienen el mismo brillo, pero para la matemática de HSL, sí.

Esta inconsistencia es la que obliga a los equipos de producto a realizar un "trabajo artesanal" constante:

  • Ajustes manuales de contraste: Para cumplir con la normativa WCAG.
  • Deriva de hue (matiz): Al oscurecer un azul en HSL, este tiende a volverse púrpura.
  • Gamas "sucias": Grises muertos en las transiciones de color.

La revolución de las "diez líneas de código"

Lo fascinante de este cambio no es que provenga de un gran laboratorio de colorimetría, sino de un ingeniero de software sueco: Björn Ottosson. En 2020, Ottosson publicó en su blog un nuevo modelo llamado Oklab (y su variante cilíndrica OKLCH).

Su objetivo era simple, crear un espacio de color que fuera computacionalmente eficiente pero perceptualmente uniforme. El resultado fue tan sólido que, en un tiempo récord para los estándares de la industria, fue adoptado por la W3C, integrado en Photoshop, motores de videojuegos como Godot y, finalmente, soportado por todos los navegadores modernos.

¿Qué hace a OKLCH diferente?

A diferencia de sus predecesores, OKLCH separa el color en tres dimensiones que se comportan como el ojo humano espera:

  1. L (Perceptual Lightness): El 70% de luminosidad en un verde se ve igual de brillante que el 70% en un rojo. Esto permite crear sistemas de diseño accesibles mediante aritmética simple, no mediante pruebas de error.
  2. C (Chroma): Representa la cantidad de color. A diferencia de la saturación de HSL, el Chroma es honesto: te indica cuánta "pureza" puede alcanzar un color antes de salirse del espectro visible.
  3. H (Hue): El matiz se mantiene constante. Si cambias la luminosidad, el color no cambia de familia. Un azul siempre será azul, solo que más claro u oscuro.

"En la percepción visual, un color casi nunca se ve como es realmente. El color nos engaña continuamente". — Josef Albers (1963)

Por qué considero esto un estándar crítico

Para los que construimos productos digitales escalables, OKLCH no es solo una "mejora visual"; es una herramienta de eficiencia operativa:

  • Sistemas de diseño programáticos: Permite generar paletas completas (escalas del 50 al 950) de forma automática. Si el valor de L es consistente, el contraste también lo será.
  • Modo oscuro nativo: Implementar un Dark Mode se vuelve tan sencillo como invertir la escala de luminosidad (L), manteniendo la fidelidad de la marca sin retocar cada token.
  • Interpolación perfecta: Los degradados en OKLCH no pasan por zonas grises o "muertas", ya que la transición entre colores ocurre en un espacio que entiende la luz.

Conclusión

La transición ya ha ocurrido. Si estás usando las últimas versiones de herramientas de desarrollo, probablemente ya estás interactuando con OKLCH.

Desde ITDO, recomendamos a los equipos de diseño y desarrollo comenzar la migración de sus design tokens a este formato. No se trata de una moda estética, sino de adoptar una tecnología que, por fin, hace que el código se comporte de la misma manera que nuestros ojos ven el mundo. El color en la web, por fin, funciona.

Referencias:

Compartir es construir