Degradado CSS con OKLCH: interpolación para mezclas más suaves

La interpolación OKLCH en degradados CSS significa pedir al navegador que calcule los colores intermedios de un degradado en el espacio de color OKLCH y no en sRGB. Añades dos palabras tras la dirección: linear-gradient(90deg in oklch, #2563eb, #facc15). El resultado es una mezcla cuya luminosidad cambia de forma pareja y cuyo medio se mantiene vivo, en lugar de hundirse en la banda gris y turbia por la que son conocidas las mezclas sRGB simples.

Por qué los degradados sRGB se vuelven grises

sRGB se diseñó para codificar con eficiencia los colores de pantalla, no para coincidir con cómo ve la gente. Mezclar dos colores sRGB significa promediar sus números de rojo, verde y azul, y a medio camino entre un azul y un amarillo hay un conjunto de números intermedios que se ve gris. Además, su luminosidad cambia de forma desigual, así que algunas mezclas se abomban más claras o más oscuras en el medio. La parte de diseño de este problema está en los degradados turbios.

Oklab y su forma cilíndrica, OKLCH, se diseñaron para que pasos iguales en sus números se vean como pasos más o menos iguales para el ojo. Mezclar en ellos mantiene la luminosidad percibida avanzando de forma constante, y por eso los degradados hechos así se ven más suaves y luminosos con los mismos extremos.

La sintaxis: in oklch e in oklab

El método de interpolación va en el primer argumento, antes o después de la dirección. Funciona en linear-gradient(), radial-gradient(), conic-gradient() y sus formas repetidas, y también en color-mix(). Tus puntos de color pueden seguir en hex; solo cambian las matemáticas.

/* direction first or interpolation first: both are valid */
background: linear-gradient(135deg in oklch, #7c3aed, #f97316);
background: linear-gradient(in oklch 135deg, #7c3aed, #f97316);

/* works in the other gradient functions too */
background: radial-gradient(in oklab circle at 30% 30%, #22d3ee, #1e1b4b);
background: conic-gradient(in oklch from 90deg, #ef4444, #3b82f6, #ef4444);

oklab u oklch: cuál elegir

Ambos son perceptuales; difieren en el camino que toman. Oklab traza una línea recta entre los dos colores, así que el medio puede perder algo de saturación cuando los extremos están lejos en la rueda de color, pero nunca pasa por un tono que no pediste. OKLCH conserva el croma, la intensidad del color, y recorre el círculo de tonos, así que el medio se mantiene saturado pero pasa por los tonos intermedios. De azul a amarillo en oklch se pasa por el verde. A veces es justo lo que buscas; a veces es una sorpresa.

Elegir la dirección del tono

Entre dos tonos cualesquiera hay dos formas de recorrer la rueda de color. Por defecto oklch toma el shorter hue. Puedes pedir longer hue o forzar una dirección con increasing hue o decreasing hue. La palabra clave va justo después del espacio de color.

longer hue es la forma más limpia de dibujar un espectro: dos puntos en lugar de siete. También es como se hace un degradado arcoíris completo cuyos colores se sienten igual de brillantes, algo que un arcoíris sRGB nunca acaba de lograr.

Escribir colores en oklch()

También puedes escribir los propios puntos en OKLCH: oklch(L C H), donde L es la luminosidad de 0% a 100%, C es el croma de 0 hasta unos 0,37 y H es el ángulo del tono. Mantener L igual en todos los puntos da un degradado de luminosidad uniforme, algo difícil de hacer a ojo en hex. oklch.com es un buen selector para encontrar valores.

.band {
  /* same lightness and chroma, only the hue changes */
  background: linear-gradient(
    90deg in oklch,
    oklch(68% 0.17 300),
    oklch(68% 0.17 20),
    oklch(68% 0.17 70)
  );
}

Compatibilidad con navegadores y alternativas

Los métodos de interpolación y los colores oklch() son compatibles con las versiones actuales de Chrome, Edge, Safari y Firefox. Los navegadores omiten cualquier declaración que no puedan interpretar, así que la alternativa es simplemente escribir antes la versión simple. Donde se ignora la línea mejorada, se queda el degradado sRGB.

.hero {
  background-color: #7c3aed;
  background-image: linear-gradient(135deg, #7c3aed, #f97316);
  background-image: linear-gradient(135deg in oklch, #7c3aed, #f97316);
}

Si quieres ir más allá, las mezclas perceptuales combinan bien con el grano para evitar el banding en degradados, y con las técnicas de puntos y pistas de la guía del degradado lineal CSS.