Interpolación de degradados: sRGB, OKLab y por qué importa

La interpolación de degradados es la forma en que se calculan los colores entre tus paradas. Eliges azul en un extremo y amarillo en el otro; el software tiene que inventar todos los colores intermedios, y lo hace trazando una línea entre ambos colores dentro de algún espacio de color. El espacio que use cambia lo que ves. Si mezclas en sRGB, el azul pasa al amarillo por un gris plano. Si mezclas en OKLCH, pasa por un turquesa brillante. Mismas paradas, degradados muy distintos.

Qué significa la interpolación de un degradado

Cualquier color puede describirse como un punto en un espacio. En sRGB los tres ejes son rojo, verde y azul. En OKLab son la luminosidad y dos ejes oponentes, de verde a rojo y de azul a amarillo. En OKLCH son la luminosidad, el croma (cuánto color hay) y el tono (el ángulo en la rueda). Interpolar significa caminar de un punto al otro. Un camino recto en un espacio puede ser una curva, o un rodeo por el gris, en otro.

sRGB, OKLab y OKLCH lado a lado

Por qué los degradados sRGB se vuelven grises o sucios

sRGB se diseñó para las pantallas, no para el ojo. Sus números están codificados con gamma y sus ejes no coinciden con nuestra forma de ver el tono o la luminosidad. Cuando dos colores están en lados opuestos de la rueda, la línea recta entre ellos pasa cerca del centro neutro, así que el medio pierde el color. El azul y el amarillo dan de media #808080. Esta es la causa principal de los degradados sucios, y es por lo que funciona el instinto de añadir un color puente: la parada extra curva el camino alrededor del gris.

OKLab: pasos uniformes para el ojo

OKLab, publicado por Björn Ottosson en 2020, se construyó para que distancias iguales parezcan diferencias iguales. El resultado práctico es un degradado cuya luminosidad cambia de forma uniforme de un extremo a otro, sin un bajón oscuro ni un abultamiento claro en el centro. Sigue tomando un camino recto, así que dos opuestos reales pierden algo de color en el centro, pero mucho menos que en sRGB. El CSS moderno usa OKLab por defecto siempre que algún color del degradado esté escrito con una sintaxis más nueva, como oklch().

OKLCH: mantener vivo el color

OKLCH es el mismo espacio que OKLab, descrito en forma polar: luminosidad, croma y un ángulo de tono. Interpolar en él recorre la rueda, así que los colores intermedios conservan su saturación. Es ideal para degradados vivos y protagonizados por la marca y para los degradados arcoíris. También puedes elegir en qué sentido recorrer la rueda con shorter hue (el valor por defecto), longer hue, increasing hue o decreasing hue. La guía de OKLCH explica el espacio con más detalle.

Cómo definir la interpolación de un degradado en CSS

Añade in <space> antes de las paradas, después del ángulo o la forma si los hay. Los navegadores que no lo entienden ignoran toda la declaración, así que escribe antes una versión en sRGB como alternativa. Todos los espacios y palabras clave de tono están en la referencia de color interpolation de MDN, y degradados CSS en OKLCH tiene más recetas.

.hero {
  /* Fallback for older browsers: a bridge stop avoids the grey middle */
  background: linear-gradient(135deg, #2563eb, #c026d3, #f97316);
  /* Modern browsers: let OKLCH keep the colour */
  background: linear-gradient(135deg in oklch, #2563eb, #f97316);
}

.radial {
  background: radial-gradient(circle at 30% 30% in oklab, #fde68a, #0f766e);
}

.conic-rainbow {
  background: conic-gradient(in oklch longer hue, #ef4444, #ef4444);
}

Qué espacio de color elegir

1. 1

   Por defecto, OKLab

   Para la mayoría de las mezclas de dos o tres colores da el resultado más suave y sin sorpresas.

2. 2

   OKLCH para colores lejanos o vivos

   Cuando los colores están muy separados en la rueda y quieres que el centro siga brillante.

3. 3

   sRGB para igualar trabajos antiguos

   Si un degradado debe verse idéntico a un recurso o imagen existente, mézclalo en el mismo espacio en que se hizo.

4. 4

   Revisa el punto medio

   Sea cual sea el espacio, mira el color a medio camino. Si es gris o un tono que no esperabas, cambia de espacio o añade una parada.

La interpolación es solo una parte de una buena mezcla; dónde van las paradas importa igual, y lo explica paradas de color de un degradado. Si prefieres saltarte las matemáticas, los Marks de Gradiently son fondos degradados terminados que se renderizan a cualquier tamaño en el que diseñes, y la documentación para desarrolladores muestra cómo ChatGPT o Claude pueden buscar Marks y crear diseños que se abren en el Studio.