Synthwave-Farben: Hex-Codes und Verläufe für Neonnächte

Synthwave-Farben sind Knallpink, elektrisches Cyan, Sonnenuntergangsorange und tiefes Violett, alle vor einem indigofarbenen Nachthimmel. Der Look stammt aus einer Musik- und Kunstszene, die die 1980er neu erfindet: eine gestreifte Sonne am Horizont, ein leuchtender Rasterboden, Chrom-Schrift und Palmensilhouetten. Die Farben sind leuchtend, funktionieren aber nur, weil der Grund so dunkel ist. Beginne mit der Nacht, dann füge das Neon hinzu.

Die Synthwave-Farbpalette mit Hex-Codes

Denk an die Palette in zwei Hälften. Die warme Hälfte (Gelb, Orange, Pink) gehört der Sonne und dem Horizont. Die kühle Hälfte (Cyan und Chromweiß) gehört dem Raster, den Linien und der Schrift. Hältst du die Hälften an ihren Plätzen, gibt das dem Look seine Struktur und verhindert, dass er zu einem Neon-Durcheinander wird.

Synthwave-Verläufe zum Kopieren

Der Sonnenuntergang ist das Herz von Synthwave. Er läuft immer von warm zu kühl, von oben nach unten durch die Sonne oder vom Horizont hinauf in den Himmel. Unten stehen die Verläufe, die immer wieder auftauchen, jeder als einzelner CSS-Wert geschrieben.

Synthwave-Sonne und -Raster in CSS

Die zwei klassischen Formen lassen sich leicht mit geschichteten Verläufen bauen. Die Sonne ist ein Kreis, gefüllt mit dem Sonnenuntergangsverlauf und von waagerechten Streifen durchschnitten. Das Raster besteht aus zwei sich wiederholenden Verläufen, einem waagerechten und einem senkrechten, mit einer Perspektivtransformation nach hinten gekippt.

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

Mehr zu Streifen und Rastern findest du unter Sich wiederholende CSS-Verläufe. Wenn du das Raster animierst, sodass es auf den Betrachter zuläuft, nimm Rücksicht auf Menschen, die ihr Gerät um weniger Bewegung gebeten haben, wie in Reduzierte Bewegung beschrieben.

Synthwave, Vaporwave und Cyberpunk im Vergleich

Diese drei werden verwechselt, weil sie Neon teilen. Die Unterschiede liegen im Grund und in der Stimmung, und sie zählen, wenn du eine Palette wählst.

Drei Synthwave-Farbkombinationen für verschiedene Stimmungen

Die volle Palette ist viel. Die meisten guten Synthwave-Arbeiten wählen eine engere Kombination und bleiben dabei. Diese drei decken die Stimmungen ab, die man meist will, und jede ist aus den Codes oben gebaut.

Baust du einen ganzen Feed, wähle eine Kombination für reguläre Posts und spar dir den vollen Sonnenuntergang für große Momente wie eine Veröffentlichung oder einen Launch. Ein Feed, in dem jeder Post ein glühender Sonnenuntergang ist, fühlt sich schnell nicht mehr besonders an, und der Sonnenuntergang verliert seine Wirkung, wenn du ihn endlich brauchst. Derselbe Gedanke steht in Dunkle Verlaufshintergründe, das behandelt, wie du einen Nachtgrund satt hältst, ohne dass er flach wird oder Banding zeigt.

Synthwave-Farben in deinen Designs nutzen

Synthwave passt zu Musikveröffentlichungen, Gaming-Streams, Clubnächten, Podcasts über Film und allem, was sich wie eine nächtliche Autofahrt anfühlen soll. Die Falle ist Lesbarkeit: Gestaltende umgeben Text oft mit Neon-Glow, der in kleinen Größen und auf Handys verschmiert. Setze Worte stattdessen in solidem Chromweiß oder Sonnengelb auf den dunkelsten Teil des Himmels. Die Farbe drumherum übernimmt das Glühen.

• Halte die Sonne oder die hellste warme Fläche von der Überschrift fern.
• Nutze Cyan für dünne Linien und kleine Details, nicht für große Flächen.
• Füge feine Körnung hinzu, damit der dunkle Himmel beim Export kein Banding zeigt.
• Wähle eine Display-Schrift mit Chrom- oder Kursiv-Gefühl und nutze sie überall.

Die Marks von Gradiently verhalten sich so, wie Synthwave es braucht: Der ruhigste, am besten kontrastierende Teil des Hintergrunds wandert hinter deine Worte, und Automatische Farbe wählt zeilenweise helle oder dunkle Schrift, sodass eine Überschrift nie mit der Sonne kämpft. Für das Jahrzehnt, das alles imitiert, siehe die 80er-Ästhetik.