# Interpolación de degradados: sRGB, OKLab y por qué importa [Canonical HTML page](https://gradiently.design/es/guide/gradient-interpolation) Elige azul y amarillo, mézclalos y el centro se vuelve gris. No es que tus colores fallen. Son las matemáticas del espacio de color que hace la mezcla, y desde CSS Color 4 puedes cambiarlo. ## The short version - La interpolación de un degradado es el método con el que se calcula cada color entre dos paradas, y el espacio de color en que ocurre cambia el resultado. - Mezclar en sRGB avanza en línea recta por los valores de rojo, verde y azul, así que colores opuestos como el azul y el amarillo pasan por el gris. - OKLab está diseñado para que pasos iguales parezcan cambios iguales a la vista, lo que da una luminosidad más suave y uniforme a lo largo del degradado. - OKLCH mezcla por separado la luminosidad, el croma y el tono, así que los colores siguen saturados y recorren la rueda de color en vez de cruzar su centro gris. - En CSS eliges el espacio dentro del propio degradado, por ejemplo `linear-gradient(in oklch, #2563eb, #f97316)`. 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. - Inicio: azul: #0000ff - Punto medio en sRGB: #808080 - Punto medio, sRGB lineal: #bcbcbc - Punto medio en OKLab: #6cabc7 - Punto medio en OKLCH: #00cfbd - Final: amarillo: #ffff00 El color a medio camino entre el azul puro y el amarillo puro en cuatro espacios. sRGB cae en un gris muerto; OKLCH cae en un turquesa vivo. ## sRGB, OKLab y OKLCH lado a lado - Azul a naranja, sRGB: `linear-gradient(90deg in srgb, #2563eb, #f97316)` - Azul a naranja, OKLab: `linear-gradient(90deg in oklab, #2563eb, #f97316)` - Azul a naranja, OKLCH: `linear-gradient(90deg in oklch, #2563eb, #f97316)` - Rojo a azul, sRGB: `linear-gradient(90deg in srgb, #ff0000, #0000ff)` - Rojo a azul, OKLab: `linear-gradient(90deg in oklab, #ff0000, #0000ff)` - Rojo a azul, OKLCH: `linear-gradient(90deg in oklch, #ff0000, #0000ff)` Dos parejas de colores, tres espacios cada una. Las filas en sRGB se apagan y oscurecen en el centro; OKLab iguala la luminosidad; OKLCH conserva el color. | Espacio | Cómo mezcla | Ideal para | Cuidado con | | --- | --- | --- | --- | | sRGB | Línea recta por los valores de rojo, verde y azul | Igualar diseños antiguos con exactitud | Centros grises y oscuros entre tonos lejanos | | sRGB lineal | Igual, sin codificación gamma | Mezclas de luz, resplandores | Los puntos medios parecen demasiado claros | | OKLab | Luminosidad y color uniformes a la vista | Mezclas suaves y naturales; el valor por defecto para los colores CSS modernos | Los opuestos aún pierden algo de color | | OKLCH | Luminosidad, croma y tono por separado | Mezclas vivas, arcoíris, colores de marca muy alejados | Puede pasar por tonos inesperados | Los cuatro espacios que más vas a encontrarte. CSS ofrece otros, como `lab`, `lch`, `hsl` y `display-p3`. ## 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](https://gradiently.design/es/guide/muddy-gradients), 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](https://gradiently.design/es/guide/rainbow-gradient). 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](https://gradiently.design/es/guide/oklch-explained) explica el espacio con más detalle. - Rojo a azul, shorter hue: `linear-gradient(90deg in oklch shorter hue, #ef4444, #3b82f6)` - Rojo a azul, longer hue: `linear-gradient(90deg in oklch longer hue, #ef4444, #3b82f6)` Los mismos dos colores. El camino corto pasa por el magenta; el largo recorre el naranja, el amarillo y el verde. ## Cómo definir la interpolación de un degradado en CSS Añade `in ` 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](https://developer.mozilla.org/en-US/docs/Web/CSS/color-interpolation-method), y [degradados CSS en OKLCH](https://gradiently.design/es/guide/css-gradient-oklch) tiene más recetas. ```css .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); } ``` La palabra clave de interpolación funciona en degradados lineales, radiales y cónicos. Un degradado cónico de rojo a rojo con `longer hue` dibuja un arcoíris completo y uniforme. ## Qué espacio de color elegir 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. **OKLCH para colores lejanos o vivos** Cuando los colores están muy separados en la rueda y quieres que el centro siga brillante. 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. **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. ### Costumbre antigua - Mezclar en sRGB y añadir paradas para ocultar el gris - Aceptar un bajón oscuro en el centro - Elegir colores cercanos para ir sobre seguro ### Mejor - Mezclar en OKLab u OKLCH con menos paradas - Luminosidad uniforme de un extremo a otro - Usar parejas más atrevidas y dejar que el espacio las mantenga limpias 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](https://gradiently.design/es/guide/gradient-stops). 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](https://gradiently.design/es/developers) muestra cómo ChatGPT o Claude pueden buscar Marks y crear diseños que se abren en el Studio. ## FAQ ### ¿Qué es la interpolación de un degradado? El cálculo de cada color entre dos paradas del degradado. El espacio de color en que ocurre, como sRGB u OKLab, cambia qué colores aparecen en el centro. ### ¿Por qué mis degradados se ven grises en el centro? Se están mezclando en sRGB entre colores de lados opuestos de la rueda, así que el camino pasa cerca del gris. Mezcla en OKLCH o añade un color puente. ### ¿Es mejor OKLab u OKLCH para los degradados? OKLab da las mezclas más uniformes y naturales. OKLCH mantiene los colores más saturados y es mejor para parejas vivas y arcoíris. ### ¿Cómo uso OKLCH en un degradado CSS? Añade `in oklch` antes de los colores, por ejemplo `linear-gradient(90deg in oklch, #2563eb, #f97316)`. Escribe antes una versión en sRGB como alternativa. ### ¿Qué espacio de color usan por defecto los degradados CSS? sRGB cuando todos los colores usan una sintaxis antigua como hex o `rgb()`, y OKLab cuando algún color usa una sintaxis más nueva como `oklch()`.