Entendiendo OKLCH: El espacio de color que realmente tiene sentido

¿Te has preguntado alguna vez por qué algunas combinaciones de colores simplemente se sienten correctas mientras que otras hacen que tus ojos quieran escapar?

No es magia. No es talento natural. Son matemáticas—específicamente, las matemáticas detrás de cómo nuestros ojos realmente perciben el color.

Durante décadas, hemos estado atascados con RGB y HSL, sistemas de color diseñados para computadoras, no para humanos. Pero OKLCH lo cambia todo.

Ve el problema por ti mismo

Comencemos con una demostración simple. En HSL, si estableces tres colores diferentes al mismo valor de "luminosidad", deberían verse igualmente brillantes, ¿verdad?

Intenta cambiar entre los dos sistemas arriba. ¿Notas algo? En modo HSL, el verde domina absolutamente—aunque los tres colores están establecidos al 50% de luminosidad. En modo OKLCH, realmente se ven equilibrados.

Esa es la diferencia entre igualdad matemática e igualdad visual.

¿Qué es OKLCH, realmente?

OKLCH significa OK Lightness Chroma Hue (OK Luminosidad Croma Matiz). La parte "OK" viene de Björn Ottosson, quien desarrolló el espacio de color OKLab subyacente en el que se basa OKLCH.

Esto es lo que lo hace especial:

L (Lightness/Luminosidad): Brillo que tiene sentido

A diferencia de la falsa luminosidad de HSL, la luminosidad OKLCH corresponde a qué tan brillante algo realmente se ve a tus ojos. L=50% realmente se ve la mitad de brillante que L=100%.

C (Chroma/Croma): Saturación sin mentiras

El croma mide qué tan lejos está un color del gris. Mismo valor de croma = misma saturación percibida, independientemente del matiz.

H (Hue/Matiz): La rueda de color, arreglada

Igual que HSL, pero organizada según la percepción humana en lugar de la tecnología de pantalla.

Por qué RGB y HSL fallan

RGB: Construido para máquinas

RGB fue diseñado para monitores CRT en los años 1950. Describe cuánta luz roja, verde y azul emitir—no cómo los colores realmente se ven para los humanos.

El problema: rgb(0, 255, 0) y rgb(255, 0, 0) tienen la misma "intensidad" matemáticamente, pero el verde se ve dramáticamente más brillante.

HSL: Un intento noble

HSL trató de ser más amigable para los humanos separando matiz, saturación y luminosidad. Buena idea, ejecución defectuosa.

El problema: La luminosidad HSL es solo RGB disfrazado. No toma en cuenta cómo nuestros ojos realmente perciben diferentes colores.

Cómo OKLCH arregla todo

OKLCH está construido sobre décadas de investigación en ciencia del color. Está diseñado alrededor de la visión humana, no de la tecnología de pantalla.

Uniformidad perceptual

El santo grial de los espacios de color. En OKLCH, las distancias matemáticas corresponden a diferencias visuales. Si dos colores están numéricamente dos veces más separados, se ven dos veces más diferentes a tus ojos.

Gradientes que no apestan

¿Has notado cómo los gradientes RGB a menudo se ven lodosos en el medio? Eso es porque la interpolación RGB no sigue el camino que tus ojos esperan.

La diferencia es impactante. Los gradientes RGB luchan contra la percepción humana. Los gradientes OKLCH trabajan con ella.

Beneficios del mundo real

Paletas de color predecibles

¿Quieres cinco colores que se vean igualmente importantes? Ponlos en los mismos valores L y C, varía solo H. Hecho.

Diseño accesible hecho fácil

¿Necesitas asegurar contraste de texto? La luminosidad OKLCH realmente corresponde al brillo percibido, haciendo que los cálculos de accesibilidad sean significativos.

Color a prueba de futuro

OKLCH no está atado a ninguna tecnología de pantalla específica. Describe colores como los humanos los ven, haciéndolo relevante para pantallas que aún no hemos inventado.

La mejor parte: Ya está aquí

OKLCH no es alguna tecnología futura teórica. Es compatible en:

• Chrome 111+ (Marzo 2023)
• Firefox 113+ (Mayo 2023)
• Safari 15.4+ (Marzo 2022)

Eso es más del 95% de usuarios web hoy.

Empezando

La sintaxis es maravillosamente simple:

/* Sintaxis OKLCH */
color: oklch(60% 0.15 240);

/* Comparar con RGB */
color: rgb(57, 130, 246);

¿Cuál te dice más sobre el color real? Con OKLCH, puedes leer los valores:

• 60% brillo
• 0.15 saturación
• 240° matiz azul

¿Con RGB? Solo tienes que confiar en que esos tres números de alguna manera hacen azul.

Por qué esto importa

El color es una de las herramientas más poderosas en diseño. Influye el estado de ánimo, guía la atención y comunica significado.

Por demasiado tiempo, hemos estado trabajando con herramientas rotas—sistemas de color que no se alinean con la percepción humana. OKLCH arregla esa discrepancia fundamental.

¿El resultado? Elecciones de color que son más predecibles, más consistentes y más efectivas.

No necesitas ser un experto en color para beneficiarte de OKLCH. Solo necesitas empezar a usar un sistema de color que está diseñado para humanos en lugar de máquinas.

Bienvenido al futuro del color en la web. Te ha estado esperando.