La versión corta
- Un degradado turbio es el que se vuelve gris, marrón o apagado donde se encuentran sus colores, en lugar de mantenerse brillante de un lado al otro.
- La causa es la mezcla en el espacio de color sRGB, donde el punto medio entre dos colores opuestos, como el azul y el amarillo, es un gris plano.
- Mezclar en OKLCH mantiene la intensidad del color porque da la vuelta por la rueda de tonos en lugar de atravesar el gris en línea recta.
- Una parada central elegida a mano, como un turquesa entre el azul y el amarillo, arregla el efecto turbio en cualquier herramienta y formato.
- Los tonos vecinos de la rueda de color casi nunca se vuelven turbios, por eso los degradados análogos son los más seguros de diseñar.
En esta página
Un degradado turbio es una mezcla que se vuelve gris, marrón o apagada en el medio, aunque sus dos colores sean brillantes. Ocurre porque la mayoría de las herramientas mezclan los colores en el espacio de color sRGB, combinando valores de rojo, verde y azul en línea recta. Cuando los dos colores están en lados opuestos de la rueda de color, esas líneas rectas se encuentran cerca del gris. La solución es elegir el camino que sigue la mezcla: añade un color en el medio, mezcla en OKLCH o usa tonos más cercanos entre sí.
Por qué los colores opuestos se vuelven grises
Mira los números. El azul puro es rojo 0, verde 0, azul 255. El amarillo puro es rojo 255, verde 255, azul 0. A medio camino entre ambos, cada canal cae en torno a 128, que es #808080: un gris medio. Lo mismo ocurre con el rojo y el cian, el naranja y el azur, o cualquier otra pareja complementaria. Matemáticamente, la línea recta entre ellos pasa justo por el eje del gris.
Un segundo problema, más sutil, es la caída oscura. El azul a rojo en sRGB pasa por #800080, un morado más oscuro que ambos extremos, así que el medio de la mezcla parece un moratón. Los colores no son opuestos, pero la mezcla sigue perdiendo brillo donde se encuentran.
Solución 1: añade una parada central
La solución más sencilla funciona en todas las herramientas y todos los formatos: elige el color que quieres en el medio y colócalo tú mismo. Escoge un color brillante y saturado que quede entre los dos extremos en la rueda de color. Entre azul y amarillo, es el turquesa o el verde. Entre naranja y azul, un rosa toma el camino cálido, el que usan la mayoría de los degradados de atardecer.
Solución 2: mezcla en OKLCH
OKLCH describe el color como luminosidad, croma (intensidad) y tono, y se diseñó para que pasos iguales parezcan cambios iguales a las personas. Mezclar en OKLCH mantiene alto el croma y da la vuelta por la rueda de tonos en lugar de cortarla en línea recta, así que la mezcla nunca se colapsa en gris. En CSS lo pides con una sola expresión. También puedes elegir por qué lado de la rueda ir.
/* Default for hex colours: sRGB, grey in the middle */
.muddy { background: linear-gradient(90deg, #0000ff, #ffff00); }
/* OKLCH, shorter way round the wheel: through teal and green */
.clean { background: linear-gradient(90deg in oklch, #0000ff, #ffff00); }
/* OKLCH, longer way round: through magenta, red and orange */
.sunset { background: linear-gradient(90deg in oklch longer hue, #0000ff, #ffff00); }
/* OKLab: straight line, but with even lightness */
.even { background: linear-gradient(90deg in oklab, #0000ff, #ffff00); }También vale la pena conocer OKLab. Es la opción predeterminada de la sintaxis moderna de color en CSS y da mezclas suaves y uniformes, pero como sigue viajando en línea recta, los opuestos verdaderos pierden intensidad en el medio. Usa OKLab para colores que ya están cerca; usa OKLCH o una parada central para colores muy separados. Para la sintaxis completa, consulta los degradados OKLCH en CSS, o explora el espacio en oklch.com.
Solución 3: elige tonos más cercanos
La forma más fiable de evitar el barro es no pedirlo. Los colores que están uno junto al otro en la rueda, como el azul y el violeta o el naranja y el rosa, se mezclan limpiamente en cualquier espacio de color porque su línea recta nunca pasa cerca del gris. Por eso los colores análogos dan los degradados más seguros, y por eso las parejas complementarias requieren cuidado; consulta los colores complementarios.
| Pareja | Resultado predeterminado | Puente limpio |
|---|---|---|
| Azul y amarillo | Gris plano | Turquesa #14b8a6 o verde #22c55e |
| Naranja y azul | Gris parduzco | Rosa #ec4899 o violeta #8b5cf6 |
| Morado y verde | Gris azulado apagado | Azul #0ea5e9 |
| Rojo y cian | Gris plano | Violeta #8b5cf6 |
| Rosa y verde | Beige turbio | Amarillo pálido #fde68a o lavanda #c4b5fd |
| Azul y rojo | Caída a morado oscuro | Magenta brillante #d946ef |
Solución 4: vigila la luminosidad
El barro no es solo gris. Una mezcla también puede verse apagada cuando su luminosidad se hunde en el medio, o cuando un extremo es mucho más oscuro que el otro y la transición ocurre en una franja estrecha. Mantén la luminosidad de tus paradas más o menos pareja, o cámbiala de forma constante en una dirección, y dale espacio a la transición. Una posición de parada del 40 % o del 60 % suele verse más natural que un 50 % mecánico.
Se vuelve turbio
- Colores opuestos sin nada entre ellos
- Un extremo brillante y otro oscuro que se encuentran en una franja estrecha
- Muchos colores sin relación en una mezcla
- Fiarse de la mezcla predeterminada en parejas complementarias
Se mantiene limpio
- Un color brillante elegido en el punto medio
- Mezclar en OKLCH tonos muy separados
- Tonos vecinos más un acento
- Comprobar el punto medio por sí solo antes de publicar
El efecto turbio empeora en los degradados de malla, donde se encuentran varios colores a la vez. Las mismas reglas valen para cada solape: mantén cerca a los vecinos y pon un puente entre los opuestos.
Si prefieres partir de una mezcla que ya está equilibrada, busca en el Mercado con palabras de color como «azul y amarillo» o «turquesa profundo» y diseña con cualquier Mark que encuentres.
Preguntas frecuentes
¿Por qué mi degradado se ve gris en el medio?
Tus colores están casi opuestos en la rueda de color y se están mezclando en sRGB, donde el punto medio entre opuestos es gris.
¿Cómo arreglo un degradado turbio?
Añade una parada central brillante entre los dos colores, mezcla en OKLCH en lugar de sRGB o elige colores que estén más cerca en la rueda de color.
¿Qué significa in oklch en un degradado CSS?
Le dice al navegador que mezcle los colores en el espacio de color OKLCH, que conserva la intensidad del color y da la vuelta por la rueda de tonos en lugar de pasar por el gris.
¿Es mejor OKLab u OKLCH para degradados?
OKLab da mezclas uniformes y suaves para colores que están cerca. OKLCH es mejor para tonos muy separados porque conserva su intensidad.
¿Qué combinaciones de colores nunca se vuelven turbias?
Los tonos vecinos, como el azul y el violeta o el naranja y el rosa, se mezclan limpiamente en casi cualquier espacio de color.
Escrito por Gradiently
El equipo detrás de Gradiently, una herramienta de diseño creada en torno a los Marks: degradados vivos que hacen que todo lo que diseñas parezca tuyo.
Ver nuestro perfil
