Colores de degradado CSS: por qué los degradados se vuelven grises en el medio y 3 formas de arreglarlo
Mezcla azul con amarillo y el medio se vuelve gris, porque los colores hex se mezclan en RGB. Añade una parada intermedia, mezcla en OKLCH o elige colores vecinos en la rueda. Incluye cinco degradados listos.
Un degradado se vuelve gris en el medio porque el navegador mezcla los colores hex en RGB, y dos colores opuestos entre sí se cancelan a mitad de camino. El arreglo es darle al medio un color a propósito, o cambiar cómo se calcula la mezcla. Aquí van tres arreglos y cinco degradados que puedes pegar.
Por qué el medio se vuelve gris
Mira un degradado que se ve turbio e ignora los extremos. Los extremos están bien. Los elegiste tú. El medio es la parte que nadie eligió.
Un degradado es una mezcla, y una mezcla necesita matemáticas. Los colores hex son valores RGB, así que por defecto el navegador los mezcla canal por canal.
A mitad de camino entre azul y amarillo, el rojo está entre 0 y 255, el verde está entre 0 y 255, y el azul está entre 255 y 0. Cada canal cae cerca de 128. Rojo, verde y azul iguales es la definición de gris.
#0000FF a #FFFF00
Con una parada intermedia #0EBAAE
No es tu monitor ni un problema de compresión. Es aritmética, y aparece siempre que los dos colores están lejos en la rueda de color. El azul y el amarillo son casi opuestos exactos, que es el peor caso.
Arreglo 1: añade una parada intermedia
El arreglo más directo es dejar de dejar el medio al azar. Añade una tercera parada de color al 50% que sea un color elegido por ti.
background: linear-gradient(90deg, #0000FF, #0EBAAE, #FFFF00);
#0EBAAE es un turquesa que se sitúa entre el azul y el amarillo en color percibido. La mezcla ahora va de azul a turquesa, y luego de turquesa a amarillo, y ninguna mitad cruza el gris.
Funciona en todos los navegadores y no necesita sintaxis nueva, así que es la opción segura para un diseño que debe verse igual en todas partes. Elige el color del medio a ojo y luego compáralo junto a los dos extremos. El costo es que ahora tienes tres colores en vez de dos.
Arreglo 2: mezcla en OKLCH
El otro arreglo cambia las matemáticas en lugar de añadir un color. CSS te deja elegir el espacio de color en el que ocurre la mezcla, y OKLCH describe el color como luminosidad, croma y tono. El croma es qué tan colorido es un color, así que una mezcla que conserva el croma sigue siendo colorida.
background: linear-gradient(in oklch, #0000FF, #FFFF00);
Con in oklch el navegador recorre la rueda de color, pasando por verdes y turquesas, en lugar de ir directo por el centro gris. Conservas dos colores y el código sigue corto. MDN lo documenta como el método de interpolación de color dentro de la función de degradado, y los colores hex heredados solo usan RGB cuando no eliges uno, para mantener la compatibilidad con páginas antiguas.
Dos cosas que debes saber. Algunos colores de ese viaje pueden quedar fuera de lo que una pantalla puede mostrar, así que los navegadores los recortan al valor más cercano que sí se puede mostrar. Y la ruta que toma es el camino corto alrededor de la rueda, así que revisa que el camino elegido te guste. Nuestra guía de color OKLCH en CSS moderno cubre el espacio con más profundidad.
Arreglo 3: elige vecinos
El tercer arreglo no toca el código. Elige colores que no pueden cancelarse entre sí.
#0066FF a #FF8800
#6440E0 a #E040A0
Los colores opuestos se mezclan en gris. Los vecinos se mezclan en algo intermedio que sigue siendo un color. Si una marca une dos opuestos, igual puedes usarlos en un degradado: pon una parada intermedia entre ellos, o mezcla en OKLCH.
Azul a naranja, mezcla por defecto
Azul a naranja, en oklch
Cómo revisar tu propio degradado
- Mira el medio, no los extremos.
- Ponle nombre al color que ves ahí. Si el nombre es gris, marrón o barro, como con #808080 o #807780, ese es el problema.
- Elige uno de los arreglos de arriba y compara las dos versiones lado a lado.
Un degradado es tan bueno como su peor punto, y su peor punto casi siempre es el medio.
Cinco degradados para robar
Cada uno fue revisado para que su medio siga siendo colorido. El primero tiene una parada intermedia incorporada. Los otros cuatro usan tonos vecinos. Toca un código para copiarlo.
| Degradado | Inicio | Medio | Final | Por qué funciona |
|---|---|---|---|---|
| Azul, turquesa, amarillo | #0000FF | #0EBAAE | #FFFF00 | Extremos opuestos, rescatados por una parada intermedia real |
| Violeta a rosa | #6440E0 | ninguno | #E040A0 | Vecinos en la rueda |
| Azul a turquesa | #2F5BEA | ninguno | #14B8A6 | Vecinos en la rueda |
| Naranja a rosa intenso | #FF7A00 | ninguno | #FF2E93 | Vecinos en la rueda |
| Verde a lima | #00A86B | ninguno | #C6F432 | Vecinos en la rueda |
Pásale esto a tu desarrollador
.gradient-sunrise { background: linear-gradient(90deg, #0000FF, #0EBAAE, #FFFF00); }
.gradient-violet { background: linear-gradient(90deg, #6440E0, #E040A0); }
.gradient-ocean { background: linear-gradient(90deg, #2F5BEA, #14B8A6); }
.gradient-sunset { background: linear-gradient(90deg, #FF7A00, #FF2E93); }
.gradient-meadow { background: linear-gradient(90deg, #00A86B, #C6F432); }
/* Two opposite colors, no middle stop: choose the blend space instead. */
.gradient-opposites { background: linear-gradient(in oklch, #0066FF, #FF8800); }
Si un navegador no entiende in oklch, ignora toda la declaración. Escribe primero una línea linear-gradient(...) normal como respaldo, y después la línea con OKLCH.
FAQ
¿Por qué mi degradado se vuelve gris en el medio?
Los colores hex se mezclan en RGB, y dos colores muy alejados en la rueda de color se promedian en gris. El azul #0000FF y el amarillo #FFFF00 se encuentran en #808080.
¿Cómo evito que un degradado CSS se vea turbio?
Añade una parada de color intermedia con color real, mezcla en OKLCH con linear-gradient(in oklch, ...), o elige dos colores que estén uno junto al otro en la rueda.
¿Qué hace "in oklch" en un degradado CSS?
Le dice al navegador que mezcle los colores en el espacio de color OKLCH en lugar de RGB, así el medio conserva su color en vez de caer al gris.
¿Qué colores de degradado se ven bien juntos?
Vecinos en la rueda de color, como violeta #6440E0 a rosa #E040A0 o verde #00A86B a lima #C6F432. Su mezcla se mantiene brillante de lado a lado.
¿Todos los navegadores admiten degradados en OKLCH?
Los navegadores modernos sí, pero uno que no lo haga descartará la declaración. Añade antes una línea de degradado normal como respaldo.
¿Por qué de azul a amarillo sale gris y no verde?
Porque la mezcla toma el camino recto por RGB, donde el promedio de los dos es gris. Un medio verde solo aparece si lo añades como parada o mezclas en OKLCH.
Fuentes
- CSS Color Module Level 4, interpolation: los colores sRGB heredados, como el hex, se interpolan en sRGB por defecto, y otros espacios se eligen con el método de interpolación de color.
- MDN, linear-gradient(): la sintaxis
<color-interpolation-method>,in oklch. - MDN, OKLCH color: luminosidad, croma y tono.
- El punto medio de (0, 0, 255) y (255, 255, 0) es (127.5, 127.5, 127.5), que es #808080 con croma OKLCH 0. Los puntos medios de #0066FF a #FF8800 (#807780) y de #6440E0 a #E040A0 (#A240C0) los calculamos nosotros en sRGB. Las barras de esta página se generaron a partir de esos cálculos, y la barra OKLCH recorta los colores fuera del rango de pantalla, como hacen los navegadores.
- Publicado por primera vez como carrusel en UX Brainy.
Want gradients, color and every other detail designed as one system? Our team designs and builds product UI that holds up on every screen.
Get Started
