La versión corta
- Un degradado retro es una mezcla de color que evoca una década concreta, casi siempre las franjas cálidas de los setenta, el neón de los ochenta o el verde azulado y el morado de los noventa.
- Los degradados de los setenta usan mostaza, naranja tostado, óxido y marrón chocolate, a menudo como franjas de borde duro sobre crema.
- Los degradados de los ochenta se dividen en dos estilos: rosa neón y cian sobre negro, y un pop pastel brillante en rosa, verde azulado, amarillo y lila.
- Los degradados de los noventa incluyen mezclas de verde azulado a morado, tonos joya profundos y el degradado de azul marino a azul de las antiguas barras de título de escritorio.
- Para modernizar un degradado retro, suaviza los bordes de las franjas, baja un poco la saturación, mezcla en OKLCH y añade un grano fino.
En esta página
Un degradado retro es una mezcla de color que evoca una década al instante. Los setenta tenían franjas cálidas de mostaza, naranja, óxido y marrón. Los ochenta tenían rosa neón y cian sobre negro, y un pop pastel brillante. Los noventa tenían verde azulado y morado, tonos joya profundos y las barras de azul marino a azul de los primeros programas de escritorio. A continuación hay una paleta y una serie de degradados para copiar de cada década, y luego un método para modernizarlos de modo que se sientan como una referencia y no como un disfraz.
Lo retro funciona porque el color guarda memoria. La gente reconoce una década por su paleta mucho antes de fijarse en la tipografía o en la composición, lo que convierte estos degradados en un atajo hacia un ambiente. Para la historia completa de cómo han evolucionado los degradados en el diseño, lee la historia de los degradados.
Degradados de los setenta: franjas de atardecer en naranja y marrón
La paleta de los setenta es cálida y terrosa: oro cosecha, naranja tostado, óxido y un marrón chocolate profundo, con el verde aguacate como nota discordante y el crema como fondo. Su sello es la franja: cuatro o cinco bandas de color apiladas como un atardecer, con bordes duros en lugar de una mezcla suave.
linear-gradient(180deg, #f2e2c4 0 20%, #e0a526 20% 36%, #d9661f 36% 52%, #a8431f 52% 68%, #4a2c1d 68%)Las mezclas suaves con los mismos colores se sienten más delicadas y van mejor que las franjas con fotos o textos largos. Mantenlas en la familia cálida y nunca se enturbiarán, porque cada paso es un vecino cercano del anterior. Para cielos cálidos más suaves, mira los degradados de atardecer.
Degradados de los ochenta: noches de neón y pop pastel
Los ochenta nos dejaron dos estilos muy distintos. Uno es la noche de neón: magenta y cian brillando sobre negro, letras cromadas y cuadrículas, sacados de las películas y los videojuegos de recreativa de la época. El otro es un pop pastel brillante y divertido: rosa, verde azulado, amarillo canario y lila, a menudo con garabatos negros y formas geométricas. Nuestra guía de colores vaporwave trata a fondo la noche de neón, con un atardecer y una cuadrícula en CSS.
Degradados de los noventa: verde azulado, morado y el azul de las barras de título
El color de los noventa es más frío y más digital. El verde azulado estaba en todas partes, a menudo con morado y magenta en equipaciones deportivas, envases y las primeras páginas web. Los programas de escritorio trajeron el degradado de azul marino a azul brillante de las barras de título de las ventanas, uno de los primeros degradados que mucha gente vio en una pantalla. Más tarde llegaron los plásticos translúcidos verde azulado y, en papel, tonos joya más profundos como el verde cazador, el burdeos y el ciruela.
El cambio de milenio es otra historia: plateado, iridiscente y burbujeante. Ese estilo tiene su propia guía, la estética Y2K, y combina de forma natural con los degradados holográficos.
Degradados retro por década, de un vistazo
| Década | Colores clave | Estilo de degradado | Ideal para |
|---|---|---|---|
| Años 70 | Oro, naranja, óxido, marrón, aguacate | Franjas duras, mezclas cálidas y suaves | Comida, bebida, tiendas vintage, música |
| Años 80 neón | Magenta, cian, violeta sobre negro | Horizontes luminosos, cromo | Vida nocturna, videojuegos, música synth |
| Años 80 pop | Rosa, verde azulado, canario, lila, negro | Mezclas vivas, franjas, formas | Niños, fitness, lanzamientos divertidos |
| Años 90 | Verde azulado, morado, azul marino, tonos joya | Mezclas diagonales, azul barra de título | Nostalgia tecnológica, streetwear, fanzines |
Cómo modernizar un degradado retro
Un degradado retro copiado al pie de la letra puede parecer un disfraz. El retro moderno conserva la paleta que la gente reconoce y cambia el acabado: bordes más suaves, un color algo más tranquilo y una textura que recuerda a la impresión y no a una pantalla plana.
- 1
Conserva la paleta, suaviza los bordes
Da a cada franja una mezcla corta del 3 al 4% en lugar de una parada dura. Se sigue leyendo como franjas, pero parece impreso en vez de dibujado.
- 2
Quita un poco de saturación
Las muestras originales se veían a menudo impresas o en pantallas poco luminosas. Atenuarlas un poco en las pantallas brillantes de hoy se acerca más a cómo se sentían.
- 3
Mezcla en OKLCH
Interpolar en OKLCH mantiene luminoso el centro de cada mezcla en lugar de agrisado. Degradados CSS en OKLCH explica cómo.
- 4
Añade un grano fino
El grano añade la textura de la película y el papel y oculta las bandas. Degradados con grano tiene la receta.
- 5
Usa tipografía moderna
Deja que el color lleve la década y elige una tipografía limpia y actual. Color de época más tipografía de época es donde se cae en el pastiche.
/* Original: hard seventies stripes */
.retro {
background: linear-gradient(180deg, #f2e2c4 0 20%, #e0a526 20% 36%, #d9661f 36% 52%, #a8431f 52% 68%, #4a2c1d 68%);
}
/* Modernised: softer colours, short blends, OKLCH, fine grain */
.retro-modern {
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"),
linear-gradient(180deg in oklch, #f4e6cc 0 18%, #dba84a 22% 34%, #d27a45 38% 50%, #a95a3c 54% 66%, #5a3a2a 70%);
}Anticuado
- Franjas duras y saturadas sacadas tal cual de un muestrario
- Tipografía, composición y color de época, todo a la vez
- Color plano con bandas visibles
- Todos los tópicos retro en un mismo diseño
Retro moderno
- Mezclas cortas entre bandas, color algo más tranquilo
- Color retro con tipografía limpia y actual
- Grano fino para un aire impreso
- Una década, un motivo, mucho espacio
Un cartel A4: la calidez de los setenta con una tipografía moderna y generosa.
Una portada de playlist: una sola línea potente deja que el color haga el viaje en el tiempo.
Si quieres un estilo retro que puedas conservar, descríbelo en la Forge de Gradiently, por ejemplo «franjas de atardecer setenteras sobre crema, con grano», y creará un Mark a partir de la frase. Para piezas impresas, consulta imprimir degradados antes de enviar los archivos, porque los naranjas y marrones cálidos pueden cambiar en papel.
Preguntas frecuentes
¿Qué colores hacen que un degradado parezca retro?
Colores muy ligados a una década: mostaza, naranja, óxido y marrón para los setenta; magenta y cian neón o pasteles vivos para los ochenta; y verde azulado, morado y azul marino para los noventa.
¿Cómo hago franjas setenteras en CSS?
Usa paradas de color duras, en las que cada color empieza exactamente donde termina el anterior, por ejemplo linear-gradient(180deg, #f2e2c4 0 20%, #e0a526 20% 36%, #d9661f 36% 52%, #a8431f 52% 68%, #4a2c1d 68%).
¿Cómo evito que un degradado retro parezca anticuado?
Conserva la paleta pero suaviza los bordes de las franjas, baja un poco la saturación, mezcla en OKLCH, añade un grano fino y combínalo con una tipografía limpia y moderna.
¿Qué diferencia hay entre los degradados retro y los vintage?
Las dos palabras se usan casi como sinónimos. Retro suele significar un diseño nuevo que hace referencia a una década pasada, mientras que vintage sugiere algo que parece envejecido de verdad, a menudo con más textura y desgaste.
¿Qué década encaja con mi marca?
Elige por el ambiente: los setenta para la calidez y lo artesanal, el neón de los ochenta para la vida nocturna y la energía, el pop de los ochenta para el juego, y los noventa para la nostalgia digital y el streetwear.
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
