Elegir el espacio de interpolación de un degradado

El degradado de azul a amarillo que pasa por un gris muerto es el ejemplo canónico de que sRGB no sirve para interpolar, y la explicación que se da casi siempre es incompleta. Ahí no hay un defecto sino dos, con causas distintas y con arreglos distintos, y confundirlos lleva a elegir mal el espacio. Con los números delante se ve exactamente qué arregla cada opción y qué no arregla ninguna.

Dos defectos en el mismo degradado

Toma linear-gradient(#0000ff, #ffff00) y mide los colores intermedios en los cuatro espacios candidatos. Esto es lo que sale:

Y las mismas coordenadas medidas en claridad y croma:

Lee las dos tablas juntas y aparecen los dos problemas separados.

El primer defecto es la oscuridad. En srgb el punto del 25% tiene claridad 46% y el degradado entero se hunde en la mitad izquierda. La causa es que sRGB codifica con gamma: sus números no son proporcionales a la luz, así que promediarlos no promedia la luz. srgb-linear sube ese mismo punto a 67% porque promedia intensidades de verdad.

El segundo defecto es el gris. En srgb y en srgb-linear el punto medio tiene croma exactamente cero: es un gris puro. Y esto no lo arregla ninguno de los dos, porque no es un problema de gamma. Azul y amarillo son tonos casi opuestos, con lo que el segmento recto que los une en cualquier espacio cartesiano pasa por el eje neutro. Con oklab la cosa mejora —el croma en el centro es 0.077 en vez de cero— pero sigue siendo una interpolación rectilínea y el centro sigue siendo apagado.

Solo el espacio polar lo evita. oklch no interpola las coordenadas cartesianas: interpola claridad, croma y ángulo, así que en vez de cortar por el medio recorre el arco. El punto medio tiene croma 0.136 y es un turquesa vivo.

Qué arregla cada opción

De ahí sale una regla de decisión en dos pasos.

Si los dos colores son de tonos parecidos, cualquier espacio perceptual vale y oklab es la elección sensata: no hay ángulo que recorrer, la recta ya va por donde quieres, y evitas los efectos secundarios de la interpolación polar.

.superficie {
  background: linear-gradient(in oklab to bottom, #3364db, #112961);
}

Si los tonos están lejos y quieres mantener la intensidad, oklch es la respuesta. El degradado recorrerá los tonos intermedios en vez de atravesar el gris.

.arcoiris-corto {
  background: linear-gradient(in oklch to right, #0000ff, #ffff00);
}

Si de verdad quieres que pase por el gris, cosa que a veces es exactamente lo que buscas —una transición entre dos zonas de la página, un fundido que no llame la atención—, oklab es la elección correcta y no un defecto.

Y srgb sigue teniendo un uso legítimo: reproducir un degradado que ya existía. Si estás portando un diseño y necesitas el mismo resultado, el espacio original era sRGB.

Los cuatro métodos de tono

Al interpolar en un espacio polar hay que decidir por qué lado gira el ángulo. La especificación define cuatro métodos, y se escriben detrás del nombre del espacio:

.corto  { background: linear-gradient(in oklch shorter hue to right,  #f38ba8, #89b4fa); }
.largo  { background: linear-gradient(in oklch longer hue to right,   #f38ba8, #89b4fa); }

longer hue es el que produce el arcoíris completo entre dos colores cualesquiera, y es la forma más corta de escribir una rueda de color:

/* Todo el espectro, con claridad y croma constantes. */
.rueda {
  background: conic-gradient(in oklch longer hue,
    oklch(70% 0.15 0), oklch(70% 0.15 359.9));
}

increasing hue y decreasing hue sirven cuando la dirección importa aunque el arco sea largo: una escala de temperatura que tenga que ir siempre de azul a rojo por el mismo lado, independientemente de dónde caigan los extremos, no puede depender de cuál sea el arco más corto.

El precio de interpolar en polar

Interpolar por el arco tiene un efecto secundario que conviene conocer antes de que te sorprenda: el arco puede salirse del gamut aunque los dos extremos estén dentro.

En el degradado de azul a amarillo interpolado en oklch, el croma en el punto medio pedido es 0.262 —la media de 0.313 y 0.211—, mientras que el máximo disponible en sRGB para esa claridad y ese tono es 0.124. De veintiún puntos muestreados a lo largo del recorrido, dieciséis están fuera del gamut de sRGB. Todos ellos se mapean, y el resultado que ves en el 50% no tiene croma 0.262 sino 0.136.

No es un fallo: es geometría. El gamut de sRGB en coordenadas OKLCH es un sólido con la cintura estrecha en la zona de los cianes, y un arco que mantiene el croma alto mientras cruza esa zona se sale por fuerza. Lo que ocurre después con esos colores es el mapeo de gamut, aplicado punto a punto. Los dos extremos están en las esquinas del cubo, que es donde más croma hay; el camino entre esquinas por el exterior no cabe.

Tres consecuencias prácticas:

El degradado sigue siendo mejor que el rectilíneo, porque incluso mapeado conserva croma 0.136 frente a 0. Salirse y ser recortado no es peor que ir por el centro.

El resultado depende del algoritmo de mapeo del navegador, con lo que un degradado polar entre colores muy saturados puede verse distinto en motores distintos. Si te importa la reproducibilidad exacta, baja el croma de los extremos hasta que el arco quepa.

Puede haber puntos intermedios más vivos que los extremos. Si los dos extremos están fuera del gamut y se comprimen mucho, mientras que el centro del arco cae en una zona ancha, verás un degradado que gana intensidad hacia el medio. Es desconcertante y es correcto.