OKLCH explicado: color perceptual para diseñadores

OKLCH es una forma de escribir el color como luminosidad, croma y tono, donde la luminosidad se mide tal como la percibe el ojo humano. En CSS, oklch(60% 0.2 293) es un violeta que parece estar al 60% del camino entre el negro y el blanco, con un color intenso, en un ángulo de tono de 293 grados. La ventaja práctica para quien diseña es sencilla: cambia el tono, mantén la misma L, y el nuevo color parecerá igual de claro. HSL no puede prometer eso, y es la razón de que OKLCH se haya convertido en el estándar de los sistemas de diseño más recientes, incluida la paleta de colores de Tailwind.

Luminosidad, croma y tono

La luminosidad es la protagonista. Viene de OKLab, un espacio de color publicado en 2020 que se construyó para predecir la luminosidad, el colorido y el tono percibidos de forma más uniforme que los modelos anteriores. El croma sustituye a la saturación: en lugar de un porcentaje de algún máximo, es una cantidad absoluta de color, así que un croma de 0,1 significa la misma intensidad visual sea cual sea el tono. El tono sigue siendo un ángulo, pero los ángulos están espaciados para que un paso de 30 grados parezca un cambio similar en toda la rueda.

OKLCH vs HSL: la misma luminosidad, lado a lado

Toma seis tonos y fija la luminosidad y el croma en oklch(65% 0.11 H). Las muestras de abajo parecen una sola familia, y su contraste sobre blanco se mantiene entre 3,1:1 y 3,4:1. Haz lo mismo en HSL con un 50% de luminosidad y el contraste sobre blanco oscila desde aproximadamente 1,07:1 en el amarillo hasta 8,6:1 en el azul.

Esa uniformidad es lo que hace útil a OKLCH en el trabajo real. Un conjunto de colores de estado, series de un gráfico o etiquetas de categoría puede compartir una misma L y C y diferenciarse solo en el tono, y ninguno grita más que los demás. Si además necesitas un conjunto apto para daltonismo, varías también la L, como se explica en paletas aptas para daltonismo.

Cómo escribir OKLCH en CSS

:root {
  /* lightness as a percentage or a number */
  --violet: oklch(60% 0.2 293);
  --violet-same: oklch(0.6 0.2 293);

  /* with transparency */
  --violet-soft: oklch(60% 0.2 293 / 0.4);

  /* grey: chroma 0, hue ignored */
  --grey: oklch(60% 0 0);
}

/* a fallback for very old browsers comes first */
.button {
  background: #8860ea;
  background: oklch(60% 0.2 293);
}

La compatibilidad de los navegadores es amplia, y puedes confirmar el detalle en caniuse. Para explorar valores de forma visual, oklch.com es un selector que muestra qué combinaciones puede mostrar una pantalla normal. Para convertir un hex de marca existente, pégalo en ese selector o en el panel de color de las herramientas de desarrollo de tu navegador, que puede mostrar cualquier color en OKLCH.

Construir una escala con OKLCH

Para hacer una escala de tintes y sombras, avanza la luminosidad en pasos iguales y deja que el croma suba hacia el centro y baje hacia los extremos. Los colores muy claros y muy oscuros físicamente no pueden contener mucho color, así que si mantienes el croma alto en los extremos el navegador tendrá que recortarlos. Aquí tienes una escala violeta construida así.

Como la L sigue la luminosidad percibida, puedes tomar decisiones de contraste aproximadas solo con los números. En esta escala, el texto blanco supera 4,5:1 de L 50 hacia abajo, y el texto negro de L 60 hacia arriba. Confírmalo siempre con un comprobador de contraste, pero rara vez te llevarás sorpresas. Convertir una escala así en tokens con nombre se explica en design tokens.

Gama: cuando un color no existe en pantalla

OKLCH puede describir colores que ninguna pantalla puede mostrar. La mayoría de los monitores muestran sRGB; muchos móviles y portátiles recientes muestran el más amplio Display P3. Sube el croma lo suficiente y te sales de ambos. Cuando eso ocurre, el navegador ajusta el color al más cercano que la pantalla puede mostrar, así que nada se rompe, pero puede que no obtengas lo que escribiste.

Degradados en OKLCH

Los degradados son donde el color perceptual se nota más. Un degradado CSS normal mezcla en sRGB, que cae hacia el gris entre tonos alejados. El CSS moderno te deja elegir el espacio en el que mezclar, y OKLab u OKLCH mantienen el centro luminoso y limpio.

OKLab mezcla en línea recta y sirve para la mayoría de los degradados de dos colores. OKLCH gira el tono, lo que queda precioso en atardeceres y arcoíris pero puede sorprenderte. La técnica completa, incluidas las palabras clave shorter hue y longer hue, está en degradados CSS en OKLCH, y la teoría que hay detrás, en interpolación de degradados.

Los Marks de Gradiently se renderizan en vivo en lugar de escribirse en CSS, y cada uno lleva su propia paleta: la tinta automática elige texto claro u oscuro de esa paleta para cada línea, así que las palabras se leen sin que tengas que comprobar números. Si prefieres partir de un fondo vivo terminado en lugar de un valor en un selector, explora el Mercado con palabras de color.