L’essentiel en bref
- 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.
Sur cette page
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
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 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.
.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;
}Pour en savoir plus sur les rayures et les grilles, voyez les dégradés CSS répétés. 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.
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.
Fond
Couleurs clés
Ambiance
Fond
Couleurs clés
Ambiance
Fond
Couleurs clés
Ambiance
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.
Couleurs
#0b0221, #ff2a6d, #ff8a3d, #ffd23fIdéal pour
Couleurs
#0b0221, #241047, #05d9e8, #d1f7ffIdéal pour
Couleurs
#241047, #6a1b9a, #ff2a6d, #d1f7ffIdéal pour
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, 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 : texte clair plein sur le ciel sombre, couleur gardée sur les bords.
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.
Les questions qu’on nous pose
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.
É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