Desbloqueando Colores Vibrantes con OKLCH

Introducción

El diseño web ha evolucionado significativamente a lo largo de los años, al igual que la forma en que manejamos el color. Si bien RGB y los códigos hexadecimales han sido el estándar durante décadas, ha surgido un nuevo contendiente para abordar sus limitaciones: el modelo de color OKLCH.

¿Qué es OKLCH?

OKLCH es un espacio de color basado en el modelo de color Oklab, diseñado para ser perceptualmente uniforme. Resuelve muchos de los problemas encontrados en modelos más antiguos como HSL y RGB, particularmente con respecto a cómo nuestros ojos perciben la luminosidad y la saturación.

El nombre OKLCH significa:

• L - Luminosidad (Lightness)
• C - Croma (Chroma)
• H - Matiz (Hue)

Los Componentes de OKLCH

Luminosidad (L)

La luminosidad controla qué tan claro u oscuro es el color.

• 0% es negro absoluto.
• 100% es blanco absoluto.

A diferencia de HSL, donde el 50% de luminosidad puede verse muy diferente según el matiz (por ejemplo, amarillo frente a azul), la luminosidad de OKLCH es consistente. Un valor de 60% de luminosidad parecerá igualmente brillante en todos los matices.

Croma (C)

El croma representa la intensidad o pureza del color (similar a la saturación).

• 0 es completamente gris.
• 0.4 (aprox.) es el máximo para la mayoría de los colores sRGB.
• Los valores pueden ser más altos (por ejemplo, 0.5 o más) para pantallas de amplia gama (P3, Rec.2020).

Matiz (H)

El matiz es el ángulo en la rueda de colores, similar a HSL.

• 0 - 360 grados.
• 0 es aproximadamente rojo, 120 verde, 240 azul.

¿Por qué usar OKLCH?

1. Uniformidad Perceptual

En HSL, cambiar el matiz manteniendo la luminosidad constante puede hacer que el color sea visualmente más claro o más oscuro. En OKLCH, el brillo percibido se mantiene constante, lo que hace que sea mucho más fácil crear paletas de colores accesibles.

2. Acceso a Colores de Amplia Gama

SRGB (utilizado por Hex y RGB) solo puede mostrar una gama limitada de colores. Los monitores modernos admiten P3 y Rec.2020, que pueden mostrar verdes y cianes mucho más vivos. OKLCH le permite acceder a estos colores "súper saturados" que anteriormente eran imposibles de especificar en CSS.

3. Mezcla de Colores Predecible

Debido a su uniformidad perceptual, la creación de degradados y la mezcla de colores en OKLCH produce transiciones suaves y naturales sin las "zonas muertas grises" que a menudo se ven en los degradados RGB.

Usando OKLCH en CSS

El soporte para OKLCH ahora está disponible en todos los principales navegadores modernos.

.my-element {
  /* Un rosa vivo */
  background-color: oklch(60% 0.25 330);
}

.semi-transparent {
  /* Con transparencia alfa */
  color: oklch(80% 0.1 120 / 0.5);
}

Conclusión

OKLCH es el futuro del color en la web. Al proporcionar una forma de definir colores que se alinean con la percepción humana y desbloquear todas las capacidades de las pantallas modernas, brinda a los diseñadores y desarrolladores una nueva herramienta poderosa para crear experiencias digitales hermosas y accesibles.