Couleurs vaporwave et palettes synthwave, avec codes hex

Les couleurs vaporwave sont des pastels doux et lumineux : rose vif, cyan, vert menthe, lilas et jaune citron pâle, généralement posés sur des ciels pâles ou délavés. Sa cousine plus bruyante, la synthwave, reprend le même rose et le même cyan, les pousse jusqu’au néon et les pose sur une nuit presque noire avec un soleil rayé qui s’enfonce dans une grille. Voici les deux palettes avec leurs codes hex, des dégradés à copier, le CSS de la scène de coucher de soleil, et comment utiliser l’ambiance sans basculer dans la parodie.

Un peu de contexte aide à les utiliser à bon escient. La vaporwave est née en ligne au début des années 2010, comme un style musical et visuel construit à partir d’une culture de consommation à moitié oubliée : premiers graphismes informatiques, calme des centres commerciaux, vieilles fenêtres de systèmes d’exploitation et statues antiques. La synthwave puise dans l’esthétique des films et des jeux d’arcade des années 1980 : trajets de nuit, enseignes néon et grilles laser. Pour l’histoire plus large des décennies, voir les dégradés rétro.

La palette vaporwave classique

Un même ensemble de cinq couleurs revient sans cesse quand on décrit la vaporwave, et il mérite sa place : chaque couleur est claire, saturée et un peu synthétique, comme un écran vu à travers une brume. Prenez-le comme point de départ, puis décidez quelles une ou deux couleurs mènent.

Le rose et le cyan en sont le cœur : une couleur chaude et une froide de luminosité proche, ce qui explique qu’elles cohabitent sans que l’une avale l’autre. Le lilas fait le pont entre elles : un fondu du rose au lilas puis au cyan ne passe jamais par le gris. La menthe et le citron gagnent à rester petits, pour un prix, un sticker ou un seul mot.

Les couleurs synthwave : la version nocturne

La synthwave, parfois appelée retrowave, garde les teintes mais change la lumière. Le fond est presque noir avec une nuance violette, l’horizon rougeoie en magenta, et le soleil va du jaune en haut au rose et au violet en bas. Là où la vaporwave ressemble à un après-midi brumeux, la synthwave, c’est minuit sur une route déserte.

Dégradés vaporwave et synthwave à copier

C’est dans les dégradés que ce style vit, car chaque motif est en réalité une source de lumière : un soleil, un horizon, une enseigne lumineuse. Chaque fondu ci-dessous reste d’un seul côté du cercle chromatique ou passe par le lilas, et aucun ne devient boueux au milieu. Si l’un d’eux le devient sur votre écran, les dégradés boueux explique pourquoi et comment corriger.

Les fondus néon comme ceux-ci forment facilement des bandes sur grand écran, car de longues étendues de violet sombre proche laissent peu de paliers de couleur. Un peu de grain masque les paliers et ajoute la surface douce et légèrement dégradée qui fait la réputation du style. Voir les dégradés granuleux pour la méthode, et les dégradés néon pour un néon plus vif et plus net, sans le cadre rétro.

Dessiner un coucher de soleil synthwave et sa grille en CSS

Toute la scène tient en trois couches : un dégradé de ciel, un soleil traversé de coupes horizontales dans sa moitié basse, et un sol en grille incliné en perspective. Les coupes sont un masque à arrêts nets, et la grille est faite de deux dégradés de lignes fines répétés à la même taille. Cela fonctionne dans tous les navigateurs actuels.

.scene {
  position: relative;
  height: 480px;
  overflow: hidden;
  perspective: 400px;
  background: linear-gradient(180deg, #0b0221 0%, #2d0b59 55%, #b3176f 100%);
}

.sun {
  position: absolute;
  left: 50%;
  top: 12%;
  width: 240px;
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffd319 0%, #ff901f 40%, #ff2975 75%, #8c1eff 100%);
  /* horizontal cuts across the lower half */
  mask: linear-gradient(180deg, #000 55%, transparent 55% 59%, #000 59% 66%, transparent 66% 71%, #000 71% 79%, transparent 79% 85%, #000 85%);
}

.floor {
  position: absolute;
  inset: 55% -50% -40%;
  transform: rotateX(60deg);
  transform-origin: top;
  background:
    linear-gradient(#ff2a6d 2px, transparent 2px) 0 0 / 60px 60px,
    linear-gradient(90deg, #ff2a6d 2px, transparent 2px) 0 0 / 60px 60px,
    #0b0221;
}

Pour l’animer, déplacez la position de fond du sol vers le bas en boucle d’exactement une case, 60px, pour que la grille semble rouler vers vous sans fin. Gardez un mouvement lent, et respectez les personnes qui demandent moins de mouvement avec prefers-reduced-motion.

Utiliser l’esthétique vaporwave sans parodie

Le style est si reconnaissable qu’un empilement de ses clichés se lit comme une blague. Pour un mème, c’est parfait ; pour une marque, une pochette de disque ou une affiche que vous voulez voir prise au sérieux, c’est un problème. La solution est la retenue : empruntez la couleur et un motif, et laissez tout le reste être moderne.

Où les couleurs vaporwave fonctionnent le mieux

La palette convient à tout ce qui est nocturne, musical ou joyeusement nostalgique : pochettes de playlist en 1080×1080, pochettes de podcast en 3000×3000, affiches de club et de concert, écrans hors ligne Twitch en 1920×1080 et lancements de produits à la touche rétro. Elle se défend moins bien pour une banque, la santé ou tout ce qui doit inspirer une confiance tranquille. Pour un stream, les arrière-plans de stream couvrent la mise en page ; pour les pochettes, voir la pochette de podcast.

Si vous voulez la nuit synthwave sans la construire de zéro, cherchez dans le Marché de Gradiently avec des mots de couleur comme « neon magenta » ou « deep violet », et créez gratuitement avec n’importe quel Mark trouvé. Pour le style pastel voisin de la fin des années 1990 et du début des années 2000, lisez l’esthétique Y2K.