Vaporwave Farben und Synthwave Farbpaletten, mit Hex-Codes

Vaporwave Farben sind weiche, leuchtende Pastelltöne: knalliges Pink, Cyan, Mint, Flieder und ein blasses Zitronengelb, meist auf hellen oder verwaschenen Himmeln. Der lautere Verwandte Synthwave nimmt dasselbe Pink und Cyan, dreht sie auf Neon und setzt sie in eine fast schwarze Nacht mit einer gestreiften Sonne, die in ein Raster sinkt. Unten findest du beide Paletten mit Hex-Codes, Verläufe zum Kopieren, das CSS für die Sonnenuntergangsszene und wie du die Stimmung nutzt, ohne dass sie in Parodie kippt.

Ein wenig Kontext hilft, sie bewusst einzusetzen. Vaporwave entstand Anfang der 2010er-Jahre online als Musik- und Bildstil aus halb erinnerter Konsumkultur: frühe Computergrafik, die Ruhe von Einkaufszentren, alte Betriebssystemfenster und antike Statuen. Synthwave greift den Look von Filmen und Arcade-Spielen der 1980er auf: Nachtfahrten, Leuchtreklamen und Laserraster. Die größere Geschichte des Jahrzehnts steht in Retro-Farbverläufe.

Die klassische Vaporwave Farbpalette

Ein Satz aus fünf Farben taucht immer wieder auf, wenn Menschen Vaporwave beschreiben, und er verdient seinen Platz: Jede Farbe ist hell, gesättigt und leicht künstlich, wie ein Bildschirm, durch Dunst gesehen. Nimm ihn als Ausgangspunkt und entscheide dann, welche ein oder zwei Farben führen.

Pink und Cyan sind das Herzstück: ein warmer und ein kühler Ton mit ähnlicher Helligkeit, deshalb stehen sie nebeneinander, ohne dass einer den anderen verschluckt. Flieder verbindet sie, sodass eine Mischung von Pink über Flieder zu Cyan nie durch Grau läuft. Mint und Zitrone hältst du am besten klein, für einen Preis, einen Sticker oder ein einzelnes Wort.

Synthwave Farben: die Nachtversion

Synthwave, manchmal Retrowave genannt, behält die Farbtöne, ändert aber das Licht. Der Grund ist fast schwarz mit violettem Stich, der Horizont glüht magenta, und die Sonne läuft oben von Gelb nach unten zu Pink und Lila. Wo Vaporwave sich wie ein dunstiger Nachmittag anfühlt, ist Synthwave Mitternacht auf einer leeren Straße.

Vaporwave und Synthwave Verläufe zum Kopieren

In Farbverläufen lebt dieser Stil, denn jedes Motiv ist eigentlich eine Lichtquelle: eine Sonne, ein Horizont, ein leuchtendes Schild. Jede Mischung unten bleibt auf einer Seite des Farbkreises oder läuft durch Flieder, deshalb wird keine in der Mitte matschig. Passiert es doch auf deinem Bildschirm, erklärt matschige Farbverläufe, warum und wie du es behebst.

Neonmischungen wie diese zeigen auf großen Bildschirmen leicht Banding, weil lange Strecken ähnlichen dunklen Violetts nur wenige Farbstufen lassen. Ein wenig Körnung versteckt die Stufen und fügt die weiche, leicht verwaschene Oberfläche hinzu, für die der Stil bekannt ist. Die Methode steht in körnige Farbverläufe, helleres, saubereres Neon ohne Retro-Rahmen in Neon-Farbverläufe.

Einen Synthwave Sonnenuntergang mit Raster in CSS zeichnen

Die ganze Szene besteht aus drei Ebenen: einem Himmelsverlauf, einer Sonne mit waagerechten Schnitten durch ihre untere Hälfte und einem perspektivisch gekippten Rasterboden. Die Schnitte sind eine Maske mit harten Stopps, das Raster sind zwei dünne Linienverläufe, in derselben Größe wiederholt. Es läuft in jedem aktuellen Browser.

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

Zum Animieren verschiebst du die Hintergrundposition des Bodens in einer Schleife um genau eine Zelle, 60px, nach unten, sodass das Raster endlos auf dich zuzurollen scheint. Halte es langsam und respektiere Menschen, die weniger Bewegung wünschen, mit prefers reduced motion.

Den Vaporwave Look ohne Parodie nutzen

Der Stil ist so wiedererkennbar, dass ein Haufen seiner Klischees wie ein Witz wirkt. Für ein Meme ist das in Ordnung; für eine Marke, ein Plattencover oder ein Poster, das ernst genommen werden soll, ist es ein Problem. Die Lösung heißt Zurückhaltung: Leih dir die Farbe und ein Motiv und lass alles andere modern sein.

Wo Vaporwave Farben am besten wirken

Die Palette passt zu allem, was nächtlich, musikalisch oder verspielt nostalgisch ist: Playlist-Cover in 1080×1080, Podcast-Cover in 3000×3000, Club- und Konzertposter, Twitch-Offline-Bildschirme in 1920×1080 und Produkt-Drops mit Retro-Kante. Schwerer zu verkaufen ist sie für Banken, Gesundheit oder alles, was still vertrauenswürdig wirken muss. Für einen Stream erklärt Stream-Hintergründe das Layout, für Cover siehe Podcast-Cover gestalten.

Wenn du die Synthwave Nacht willst, ohne sie von Grund auf zu bauen, durchsuche den Markt von Gradiently mit Farbwörtern wie „Neonmagenta“ oder „Tiefviolett“ und gestalte kostenlos mit jedem Mark, den du findest. Für den eng verwandten Pastell-Look der späten Neunziger und frühen 2000er lies die Y2K-Ästhetik.