# Dégradés rétro : soleils des années 70 aux écrans 90

[Canonical HTML page](https://gradiently.design/fr/guide/retro-gradients)

Rayures moutarde et rouille, néon sur noir, sarcelle et violet, bleu des barres de titre. Trois décennies de dégradés rétro avec codes, et les petits changements qui les rajeunissent.

## The short version

- 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.

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](https://gradiently.design/fr/guide/history-of-gradients).

## 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.

- Crème: #f2e2c4
- Or des moissons: #e0a526
- Orange brûlé: #d9661f
- Rouille: #a8431f
- Chocolat: #4a2c1d
- Avocat: #7d7b35

Une palette des années 70. Tout penche vers le chaud, même le vert.

Rayures de soleil couchant des années 70: `linear-gradient(180deg, #f2e2c4 0 20%, #e0a526 20% 36%, #d9661f 36% 52%, #a8431f 52% 68%, #4a2c1d 68%)`

Des points de couleur nets font des rayures : chaque couleur commence exactement là où la précédente s’arrête. C’est le dégradé rétro le plus reconnaissable de tous.

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](https://gradiently.design/fr/guide/sunset-gradient).

- Coucher de soleil doré: `linear-gradient(180deg, #e0a526 0%, #d9661f 50%, #a8431f 100%)`
- Cuisine avocat: `linear-gradient(135deg, #7d7b35 0%, #b9a44c 50%, #e9d8a6 100%)`
- Velours brun: `radial-gradient(circle at 50% 30%, #c77d3a 0%, #6b3a1f 55%, #2e1a10 100%)`
- Soda crème: `linear-gradient(180deg, #f2e2c4 0%, #f0c27a 55%, #e0a526 100%)`

Fondus doux des années 70 : de l’or à la rouille, de l’avocat au crème, une lueur brune veloutée et un crème pâle vers l’or.

## 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](https://gradiently.design/fr/guide/vaporwave-colors) traite la nuit néon en profondeur, avec un coucher de soleil et une grille en CSS.

- Chewing-gum: #ff4f9a
- Sarcelle piscine: #00c2c7
- Canari: #ffe14d
- Lilas: #b18cff
- Noir gribouillis: #111111

Le pop pastel des années 80. Le noir fait partie de la palette : il cerne les formes et empêche les couleurs vives de flotter.

- Nuit néon: `linear-gradient(180deg, #0b0221 0%, #2d0b59 60%, #ff2a6d 100%)`
- Chrome: `linear-gradient(180deg, #ffffff 0%, #9fb3c8 46%, #2b3a55 50%, #d6c0ff 100%)`
- Aérobic: `linear-gradient(90deg, #ff4f9a 0%, #b18cff 50%, #00c2c7 100%)`
- Rayure pop: `repeating-linear-gradient(45deg, #ffe14d 0 14px, #ff4f9a 14px 28px)`

Dégradés des années 80. Chrome utilise un point net entre 46 et 50 % pour simuler un horizon réfléchi ; Rayure pop est un dégradé répété, donc il se répète à l’infini.

## 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.

- Bleu barre de titre: `linear-gradient(90deg, #000080 0%, #1084d0 100%)`
- Du sarcelle au magenta: `linear-gradient(135deg, #0f7c80 0%, #5b2a86 60%, #c2185b 100%)`
- Sarcelle translucide: `linear-gradient(160deg, #b8f1f0 0%, #3cc6c4 50%, #1a7f8e 100%)`
- Prune et bordeaux: `linear-gradient(160deg, #3d1f4f 0%, #800020 100%)`
- Vert anglais: `linear-gradient(160deg, #2f4f3a 0%, #6b7d4f 100%)`

Dégradés des années 90, de l’écran (bleu barre de titre) au rayon (sarcelle translucide) et à la page (tons bijou).

Le passage au millénaire est une histoire à part : argenté, irisé et pétillant. Ce style a son propre guide, l’[esthétique Y2K](https://gradiently.design/fr/guide/y2k-aesthetic), et il s’associe naturellement aux [dégradés holographiques](https://gradiently.design/fr/guide/holographic-gradients).

## 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 |

Choisissez la décennie selon l’ambiance voulue, pas seulement selon l’époque où votre public a grandi.

## 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](https://gradiently.design/fr/guide/css-gradient-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](https://gradiently.design/fr/guide/grainy-gradients) 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.

```css
/* 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%);
}
```

Les mêmes rayures, deux fois. La version moderne utilise des couleurs un peu plus calmes, des fondus de 4 % entre les bandes, l’interpolation OKLCH et une couche de bruit SVG par-dessus.

### 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 annonçant des soldes d’été sur du denim vintage, du daim et du velours côtelé

Une affiche A4 : chaleur des années 70 avec une typographie moderne et généreuse.

Une pochette de playlist carrée intitulée Chansons du lecteur de cassettes

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](/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](https://gradiently.design/fr/guide/print-gradients) avant d’envoyer vos fichiers, car les oranges et bruns chauds peuvent changer sur papier.

## FAQ

### 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.