# Couleurs synthwave : codes hex et dégradés pour nuits néon

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

Un coucher de soleil qui ne finit jamais, une grille qui file vers l’horizon, des lettres chromées et un ciel couleur d’ecchymose. Voici la palette derrière, avec codes et dégradés à utiliser dès aujourd’hui.

## The short version

- Les couleurs synthwave s’organisent autour du rose vif, du cyan électrique, de l’orange coucher de soleil et du violet posés sur un ciel indigo profond ou presque noir.
- Le dégradé synthwave emblématique va du jaune au violet en passant par l’orange et le rose, comme un soleil qui s’enfonce dans l’horizon.
- La synthwave, aussi appelée retrowave ou outrun, emprunte aux affiches de films des années 1980, aux jeux d’arcade et aux publicités de voitures vus à travers une nostalgie ultérieure.
- Le fond de ciel nocturne compte le plus : sans base indigo sombre, les couleurs néon perdent leur éclat et paraissent plates.
- Gardez le texte en encre claire pleine sur la partie la plus sombre du design plutôt que de l’entourer de lueur, pour qu’il reste net aux petites tailles.

Les **couleurs synthwave** sont le rose vif, le cyan électrique, l’orange coucher de soleil et le violet profond, le tout posé sur un ciel nocturne indigo. Le style vient d’une scène musicale et artistique qui réimagine les années 1980 : un soleil rayé à l’horizon, un sol en grille lumineuse, un lettrage chrome et des silhouettes de palmiers. Les couleurs sont vives, mais elles ne fonctionnent que parce que le fond est si sombre. Commencez par la nuit, puis ajoutez le néon.

## La palette de couleurs synthwave avec codes hex

- Minuit: #0b0221
- Ciel indigo: #241047
- Brume violette: #6a1b9a
- Rose vif: #ff2a6d
- Orange coucher de soleil: #ff8a3d
- Jaune soleil: #ffd23f
- Cyan électrique: #05d9e8
- Blanc chrome: #d1f7ff

Trois sombres pour le ciel, trois chauds pour le soleil, un néon froid et un reflet chrome. La plupart des designs synthwave en utilisent cinq au plus.

Voyez la palette en deux moitiés. La moitié chaude (jaune, orange, rose) appartient au soleil et à l’horizon. La moitié froide (cyan et blanc chrome) appartient à la grille, aux lignes et au lettrage. Garder chaque moitié à sa place donne sa structure au style et l’empêche de tourner à la bouillie de néons.

## Des dégradés synthwave à copier

Le coucher de soleil est le cœur de la synthwave. Il va toujours du chaud au froid, du haut vers le bas du soleil, ou de l’horizon vers le ciel. Voici les dégradés qui reviennent sans cesse, chacun écrit comme une seule valeur CSS.

- Soleil rayé: `linear-gradient(180deg, #ffd23f 0%, #ff8a3d 35%, #ff2a6d 70%, #b3138f 100%)`
- De la nuit à l’horizon: `linear-gradient(180deg, #0b0221 0%, #241047 45%, #6a1b9a 75%, #ff2a6d 100%)`
- Du cyan au rose: `linear-gradient(135deg, #05d9e8 0%, #6a1b9a 55%, #ff2a6d 100%)`
- Remplissage de lettre chrome: `linear-gradient(180deg, #d1f7ff 0%, #7aa7c7 49%, #241047 50%, #05d9e8 100%)`
- Lueur d’horizon: `radial-gradient(circle at 50% 100%, #ff2a6d 0%, #6a1b9a 30%, #241047 60%, #0b0221 90%)`
- Fond de nuit uni: `linear-gradient(180deg, #241047 0%, #0b0221 100%)`

Le remplissage chrome a une cassure nette au milieu, ce qui lui donne l’air d’un métal poli qui reflète un horizon.

> **Évitez le gris là où le rose rencontre le cyan** Le rose et le cyan sont très éloignés sur le cercle chromatique, donc un fondu direct entre eux plonge dans un mauve terne. Faites passer le fondu par le violet, comme dans le dégradé du cyan au rose ci-dessus, et il reste vif. [Les dégradés boueux](https://gradiently.design/fr/guide/muddy-gradients) expliquent pourquoi.

## Soleil et grille synthwave en CSS

Les deux formes classiques sont faciles à construire avec des dégradés superposés. Le soleil est un cercle rempli du dégradé de coucher de soleil et coupé par des bandes horizontales. La grille est faite de deux dégradés répétés, un horizontal et un vertical, inclinés en arrière par une transformation de perspective.

```css
.sky {
  background: linear-gradient(180deg, #0b0221 0%, #241047 55%, #6a1b9a 100%);
}

.sun {
  width: 320px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffd23f 0%, #ff8a3d 40%, #ff2a6d 75%, #b3138f 100%);
  /* solid top half, plus stripes: mask layers add together */
  mask-image:
    linear-gradient(180deg, #000 0 55%, transparent 55%),
    repeating-linear-gradient(180deg, #000 0 14px, transparent 14px 22px);
}

.grid {
  height: 40vh;
  background-color: #0b0221;
  background-image:
    repeating-linear-gradient(0deg, #05d9e8 0 2px, transparent 2px 48px),
    repeating-linear-gradient(90deg, #05d9e8 0 2px, transparent 2px 48px);
  transform: perspective(300px) rotateX(60deg);
  transform-origin: top;
}
```

Un ciel nocturne, un soleil couchant rayé dans sa moitié basse et une grille cyan inclinée en perspective. Placez le soleil sur la ligne d’horizon entre le ciel et la grille.

Pour en savoir plus sur les rayures et les grilles, voyez [les dégradés CSS répétés](https://gradiently.design/fr/guide/css-repeating-gradient). Si vous animez la grille qui défile vers le spectateur, respectez les personnes qui ont demandé à leur appareil moins de mouvement, comme expliqué dans [la réduction des animations](https://gradiently.design/fr/guide/reduced-motion).

## Synthwave, vaporwave et cyberpunk comparés

Ces trois-là se confondent parce qu’ils partagent le néon. Les différences tiennent au fond et à l’ambiance, et elles comptent quand vous choisissez une palette.

| Style | Fond | Couleurs clés | Ambiance |
| --- | --- | --- | --- |
| Synthwave | Nuit indigo profond | Chauds du coucher de soleil, grille cyan, chrome | Conduite de nuit, héroïque, nostalgique |
| Vaporwave | Pastel ou bleu canard doux | Lilas, menthe, rose saumon | Ironique, rêveur, centre commercial |
| Cyberpunk | Presque noir, rues mouillées | Jaune acide, vert toxique, magenta | Sombre, urbain, dystopique |

La synthwave est la plus chaleureuse et la plus romantique des trois. Lisez [les couleurs vaporwave](https://gradiently.design/fr/guide/vaporwave-colors) et [les palettes de couleurs cyberpunk](https://gradiently.design/fr/guide/cyberpunk-colors) pour les autres.

## Trois combinaisons de couleurs synthwave pour différentes ambiances

La palette complète, c’est beaucoup. La plupart des bons travaux synthwave choisissent une combinaison plus étroite et s’y tiennent. Ces trois-là couvrent les ambiances que l’on veut en général, et chacune est construite avec les codes ci-dessus.

| Combinaison | Couleurs | Idéal pour |
| --- | --- | --- |
| Coucher de soleil classique | `#0b0221`, `#ff2a6d`, `#ff8a3d`, `#ffd23f` | Pochettes d’albums, affiches d’événements, tout ce qui est héroïque |
| Néon froid | `#0b0221`, `#241047`, `#05d9e8`, `#d1f7ff` | Tech, jeu, contenus plus calmes de fin de nuit |
| Crépuscule violet | `#241047`, `#6a1b9a`, `#ff2a6d`, `#d1f7ff` | Podcasts, playlists, fils de marque plus doux |

Chaque combinaison garde un fond sombre et n’ajoute pas plus de trois couleurs par-dessus.

Si vous construisez un fil entier, choisissez une combinaison pour les posts réguliers et gardez le coucher de soleil complet pour les grands moments comme une sortie ou un lancement. Un fil où chaque post est un coucher de soleil flamboyant cesse vite d’être spécial, et le coucher de soleil perd son attrait quand vous en avez enfin besoin. La même logique apparaît dans [les arrière-plans dégradés sombres](https://gradiently.design/fr/guide/dark-gradient-backgrounds), qui expliquent comment garder un fond de nuit riche sans qu’il devienne plat ou rayé.

## Utiliser les couleurs synthwave dans vos designs

La synthwave convient aux sorties musicales, aux streams de jeux, aux soirées en club, aux podcasts sur le cinéma et à tout ce qui veut ressembler à une conduite de nuit. Le piège est la lisibilité : les designers entourent souvent le texte d’une lueur néon, qui bave aux petites tailles et sur mobile. Composez plutôt les mots en blanc chrome plein ou en jaune soleil sur la partie la plus sombre du ciel. C’est la couleur autour d’eux qui fait la lueur.

Une pochette de podcast carrée intitulée Night Drive Radio en texte clair sur un arrière-plan synthwave violet sombre et rose

Une pochette de podcast carrée : texte clair plein sur le ciel sombre, couleur gardée sur les bords.

Une story verticale annonçant un nouveau single en texte clair en haut d’un ciel synthwave sombre avec de la couleur chaude près du bas

La même palette en story, avec le coucher de soleil chaud gardé en bas et les mots en haut dans le sombre.

- Gardez le soleil ou la zone chaude la plus vive loin du titre.
- Utilisez le cyan pour les lignes fines et les petits détails, pas pour les grands aplats.
- Ajoutez un grain fin pour que le ciel sombre ne montre pas de bandes à l’export.
- Choisissez une police d’affichage à l’allure chrome ou italique et utilisez-la partout.

Les Marks de Gradiently se comportent comme la synthwave l’exige : la partie la plus calme et la mieux contrastée de l’arrière-plan passe derrière vos mots, et l’encre Auto choisit un texte clair ou sombre ligne par ligne, si bien qu’un titre ne lutte jamais contre le soleil. Pour la décennie qu’elle imite, voyez [l’esthétique années 80](https://gradiently.design/fr/guide/80s-aesthetic).

## FAQ

### Quelles couleurs utilise la synthwave ?

Rose vif, cyan électrique, orange coucher de soleil, jaune soleil et violet, posés sur un ciel indigo profond ou presque noir avec des reflets blanc chrome.

### Qu’est-ce que le dégradé synthwave ?

Un coucher de soleil qui va du jaune au violet en passant par l’orange et le rose. En CSS : `linear-gradient(180deg, #ffd23f 0%, #ff8a3d 35%, #ff2a6d 70%, #b3138f 100%)`.

### La synthwave est-elle la même chose que la retrowave ou l’outrun ?

Les noms sont employés presque indifféremment. L’outrun renvoie souvent au côté conduite et voitures de sport du style, mais la palette est la même.

### Quelle différence entre les couleurs synthwave et vaporwave ?

La synthwave utilise des néons saturés sur un ciel nocturne sombre. La vaporwave utilise des pastels plus doux comme le lilas, la menthe et le saumon sur des fonds clairs ou bleu canard.