L’essentiel en bref
- Un dégradé rétro est un fondu de couleurs qui rappelle une décennie précise, le plus souvent les rayures chaudes des années 70, le néon des années 80 ou le sarcelle et le violet des années 90.
- Les dégradés des années 70 utilisent moutarde, orange brûlé, rouille et brun chocolat, souvent en rayures nettes sur fond crème.
- Les dégradés des années 80 se divisent en deux styles : rose néon et cyan sur noir, et pop pastel éclatant en rose, sarcelle, jaune et lilas.
- Les dégradés des années 90 comprennent des fondus sarcelle vers violet, des tons bijou profonds et le dégradé du bleu marine au bleu des anciennes barres de titre de bureau.
- Pour moderniser un dégradé rétro, adoucissez les bords des rayures, baissez un peu la saturation, fondez en OKLCH et ajoutez un grain fin.
Sur cette page
Un dégradé rétro est un fondu de couleurs qui rappelle instantanément une décennie. Les années 70 avaient des rayures chaudes de moutarde, d’orange, de rouille et de brun. Les années 80 avaient le rose et le cyan néon sur noir, et le pop pastel éclatant. Les années 90 avaient le sarcelle et le violet, les tons bijou profonds et les barres bleu marine vers bleu des premiers logiciels de bureau. Vous trouverez ci-dessous une palette et une série de dégradés à copier pour chaque décennie, puis une méthode pour les moderniser afin qu’ils fassent référence, pas déguisement.
Le rétro fonctionne parce que la couleur porte la mémoire. On reconnaît une décennie à sa palette bien avant de remarquer la police ou la mise en page, ce qui fait de ces dégradés un raccourci vers une ambiance. Pour l’histoire plus complète de la place des dégradés dans le design, lisez l’histoire des dégradés.
Dégradés des années 70 : rayures de soleil couchant orange et brun
La palette des années 70 est chaude et terreuse : or des moissons, orange brûlé, rouille et brun chocolat profond, avec le vert avocat comme intrus et le crème comme fond. Sa signature, c’est la rayure : quatre ou cinq bandes de couleur empilées comme un coucher de soleil, à bords nets plutôt qu’en fondu doux.
linear-gradient(180deg, #f2e2c4 0 20%, #e0a526 20% 36%, #d9661f 36% 52%, #a8431f 52% 68%, #4a2c1d 68%)Des fondus doux avec les mêmes couleurs paraissent plus tendres et conviennent mieux aux photos ou aux longs textes que les rayures. Restez dans la famille chaude et ils ne tournent jamais à la boue, car chaque étape est une voisine proche de la précédente. Pour des ciels chauds plus doux, voir les dégradés de coucher de soleil.
Dégradés des années 80 : nuits néon et pop pastel
Les années 80 nous ont donné deux styles très différents. L’un est la nuit néon : magenta et cyan qui brillent sur noir, lettrage chromé et grilles, inspirés des films et des jeux d’arcade de l’époque. L’autre est le pop pastel éclatant et ludique : rose, sarcelle, jaune canari et lilas, souvent avec des gribouillis noirs et des formes géométriques. Notre guide sur les couleurs vaporwave traite la nuit néon en profondeur, avec un coucher de soleil et une grille en CSS.
Dégradés des années 90 : sarcelle, violet et bleu des barres de titre
La couleur des années 90 est plus froide et plus numérique. Le sarcelle était partout, souvent associé au violet et au magenta sur les tenues de sport, les emballages et les premières pages web. Les logiciels de bureau ont apporté le dégradé du bleu marine au bleu vif des barres de titre de fenêtre, l’un des premiers dégradés que beaucoup ont vus à l’écran. Plus tard dans la décennie sont venus les plastiques translucides sarcelle et, en imprimerie, des tons bijou plus profonds comme le vert anglais, le bordeaux et la prune.
Le passage au millénaire est une histoire à part : argenté, irisé et pétillant. Ce style a son propre guide, l’esthétique Y2K, et il s’associe naturellement aux dégradés holographiques.
Les dégradés rétro par décennie en un coup d’œil
| Décennie | Couleurs clés | Style de dégradé | Idéal pour |
|---|---|---|---|
| Années 70 | Or, orange, rouille, brun, avocat | Rayures nettes, fondus chauds et doux | Restauration, boissons, boutiques vintage, musique |
| Années 80 néon | Magenta, cyan, violet sur noir | Horizons lumineux, chrome | Vie nocturne, jeux vidéo, musique synthé |
| Années 80 pop | Rose, sarcelle, canari, lilas, noir | Fondus vifs, rayures, formes | Enfants, fitness, lancements ludiques |
| Années 90 | Sarcelle, violet, bleu marine, tons bijou | Fondus en diagonale, bleu barre de titre | Nostalgie tech, streetwear, fanzines |
Comment moderniser un dégradé rétro
Un dégradé rétro copié à l’identique peut ressembler à un costume de déguisement. Le rétro moderne garde la palette que l’on reconnaît et change la finition : des bords plus doux, une couleur un peu plus calme et une texture qui évoque l’imprimé plutôt qu’un écran plat.
- 1
Gardez la palette, adoucissez les bords
Donnez à chaque rayure un court fondu de 3 à 4 % au lieu d’un point net. Cela se lit toujours comme des rayures, mais paraît imprimé plutôt que dessiné.
- 2
Retirez un peu de saturation
Les échantillons d’origine se voyaient souvent en impression ou sur des écrans peu lumineux. Les atténuer légèrement sur les écrans lumineux d’aujourd’hui se rapproche de ce qu’on ressentait.
- 3
Fondez en OKLCH
Interpoler en OKLCH garde le milieu de chaque fondu lumineux au lieu de grisâtre. Dégradés CSS en OKLCH explique comment faire.
- 4
Ajoutez un grain fin
Le grain ajoute la texture du film et du papier et masque le banding. Dégradés granuleux donne la recette.
- 5
Utilisez une typographie moderne
Laissez la couleur porter la décennie et choisissez une police nette et actuelle. Couleur d’époque plus police d’époque, c’est là que l’on bascule dans le 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%);
}Daté
- Rayures nettes et saturées tout droit sorties d’un nuancier
- Police d’époque, mise en page d’époque, couleur d’époque en même temps
- Couleur plate avec banding visible
- Tous les clichés rétro dans une seule création
Rétro moderne
- Courts fondus entre les bandes, couleur un peu plus calme
- Couleur rétro avec une typographie nette et actuelle
- Grain fin pour un rendu imprimé
- Une décennie, un motif, beaucoup d’espace
Une affiche A4 : chaleur des années 70 avec une typographie moderne et généreuse.
Une pochette de playlist : une seule ligne forte laisse la couleur faire le voyage dans le temps.
Si vous voulez un style rétro qui dure, décrivez-le dans la Forge de Gradiently, par exemple « rayures de soleil couchant des années 70 sur crème, avec du grain », et elle construit un Mark à partir de la phrase. Pour les pièces imprimées, consultez imprimer des dégradés avant d’envoyer vos fichiers, car les oranges et bruns chauds peuvent changer sur papier.
Les questions qu’on nous pose
Quelles couleurs donnent un air rétro à un dégradé ?
Des couleurs fortement liées à une décennie : moutarde, orange, rouille et brun pour les années 70, magenta et cyan néon ou pastels éclatants pour les années 80, sarcelle, violet et bleu marine pour les années 90.
Comment faire des rayures des années 70 en CSS ?
Utilisez des points de couleur nets, où chaque couleur commence exactement là où la précédente s’arrête, par exemple linear-gradient(180deg, #f2e2c4 0 20%, #e0a526 20% 36%, #d9661f 36% 52%, #a8431f 52% 68%, #4a2c1d 68%).
Comment éviter qu’un dégradé rétro paraisse daté ?
Gardez la palette mais adoucissez les bords des rayures, baissez un peu la saturation, fondez en OKLCH, ajoutez un grain fin et associez-le à une typographie nette et moderne.
Quelle différence entre dégradés rétro et vintage ?
Les deux mots sont presque interchangeables. Rétro désigne en général un design récent qui fait référence à une décennie passée, tandis que vintage suggère quelque chose qui a vraiment vieilli, souvent avec plus de texture et de patine.
Quelle décennie convient à ma marque ?
Choisissez selon l’ambiance : années 70 pour la chaleur et l’artisanat, néon des années 80 pour la vie nocturne et l’énergie, pop des années 80 pour le jeu, et années 90 pour la nostalgie numérique et le streetwear.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil
