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

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

Ein Sonnenuntergang, der nie endet, ein Raster bis zum Horizont, Chrom-Buchstaben und ein Himmel in der Farbe eines blauen Flecks. Hier ist die Palette dahinter, mit Codes und Verläufen, die du heute nutzen kannst.

## The short version

- Synthwave-Farben drehen sich um Knallpink, elektrisches Cyan, Sonnenuntergangsorange und Violett vor einem tiefen Indigo- oder fast schwarzen Himmel.
- Der typische Synthwave-Verlauf geht von Gelb über Orange und Pink bis Violett, wie eine Sonne, die im Horizont versinkt.
- Synthwave, auch Retrowave oder Outrun genannt, borgt bei Filmplakaten, Spielhallenspielen und Autowerbung der 1980er, gesehen durch spätere Nostalgie.
- Der nächtliche Himmelsgrund zählt am meisten: Ohne dunkle Indigo-Basis verlieren die Neonfarben ihren Glow und wirken flach.
- Halte Text in solider heller Tinte auf dem dunkelsten Teil des Designs, statt ihn mit Glow zu umgeben, damit er auch in kleinen Größen scharf bleibt.

**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

- Mitternacht: #0b0221
- Indigohimmel: #241047
- Violetter Dunst: #6a1b9a
- Knallpink: #ff2a6d
- Sonnenuntergangsorange: #ff8a3d
- Sonnengelb: #ffd23f
- Elektrisches Cyan: #05d9e8
- Chromweiß: #d1f7ff

Drei Dunkeltöne für den Himmel, drei Warmtöne für die Sonne, ein kühles Neon und ein Chrom-Glanzlicht. Die meisten Synthwave-Designs nutzen höchstens fünf davon.

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.

- Gestreifte Sonne: `linear-gradient(180deg, #ffd23f 0%, #ff8a3d 35%, #ff2a6d 70%, #b3138f 100%)`
- Nacht bis Horizont: `linear-gradient(180deg, #0b0221 0%, #241047 45%, #6a1b9a 75%, #ff2a6d 100%)`
- Cyan zu Pink: `linear-gradient(135deg, #05d9e8 0%, #6a1b9a 55%, #ff2a6d 100%)`
- Chrom-Buchstabenfüllung: `linear-gradient(180deg, #d1f7ff 0%, #7aa7c7 49%, #241047 50%, #05d9e8 100%)`
- Horizontglühen: `radial-gradient(circle at 50% 100%, #ff2a6d 0%, #6a1b9a 30%, #241047 60%, #0b0221 90%)`
- Schlichter Nachtgrund: `linear-gradient(180deg, #241047 0%, #0b0221 100%)`

Die Chrom-Füllung hat in der Mitte einen harten Bruch, der sie wie poliertes Metall aussehen lässt, das einen Horizont spiegelt.

> **Grau vermeiden, wo Pink auf Cyan trifft** Pink und Cyan liegen im Farbkreis weit auseinander, ein direkter Übergang zwischen ihnen rutscht also in ein stumpfes Malve. Führe den Übergang über Violett, wie im Verlauf Cyan zu Pink oben, und er bleibt lebendig. [Schlammige Verläufe](https://gradiently.design/de/guide/muddy-gradients) erklärt, warum.

## 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.

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

Ein Nachthimmel, eine Sonne, deren untere Hälfte gestreift ist, und ein cyanfarbenes Raster in Perspektive. Setze die Sonne auf die Horizontlinie zwischen Himmel und Raster.

Mehr zu Streifen und Rastern findest du unter [Sich wiederholende CSS-Verläufe](https://gradiently.design/de/guide/css-repeating-gradient). 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](https://gradiently.design/de/guide/reduced-motion) 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.

| Look | Grund | Schlüsselfarben | Stimmung |
| --- | --- | --- | --- |
| Synthwave | Tiefe Indigo-Nacht | Sonnenuntergangs-Warmtöne, Cyan-Raster, Chrom | Nachtfahrt, heroisch, nostalgisch |
| Vaporwave | Pastell oder weiches Petrol | Flieder, Mint, Lachsrosa | Ironisch, verträumt, Einkaufszentrum |
| Cyberpunk | Fast Schwarz, nasse Straßen | Säuregelb, Giftgrün, Magenta | Rau, urban, dystopisch |

Synthwave ist der wärmste und romantischste der drei. Lies [Vaporwave-Farben](https://gradiently.design/de/guide/vaporwave-colors) und [Cyberpunk-Farbpaletten](https://gradiently.design/de/guide/cyberpunk-colors) für die anderen.

## 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.

| Kombination | Farben | Am besten für |
| --- | --- | --- |
| Klassischer Sonnenuntergang | `#0b0221`, `#ff2a6d`, `#ff8a3d`, `#ffd23f` | Albumcover, Eventplakate, alles Heroische |
| Kaltes Neon | `#0b0221`, `#241047`, `#05d9e8`, `#d1f7ff` | Tech, Gaming, ruhigere Spätabend-Inhalte |
| Violette Dämmerung | `#241047`, `#6a1b9a`, `#ff2a6d`, `#d1f7ff` | Podcasts, Playlists, weichere Marken-Feeds |

Jede Kombination hält einen dunklen Grund und fügt höchstens drei Farben obenauf hinzu.

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](https://gradiently.design/de/guide/dark-gradient-backgrounds), 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.

Ein quadratisches Podcast-Cover mit dem Titel Night Drive Radio in heller Schrift auf dunkelviolettem und rosa Synthwave-Hintergrund

Ein quadratisches Podcast-Cover: solide helle Schrift auf dem dunklen Himmel, Farbe an den Rändern gehalten.

Eine vertikale Story, die eine neue Single ankündigt, in heller Schrift hoch auf einem dunklen Synthwave-Himmel, mit warmer Farbe nahe am unteren Rand

Dieselbe Palette in einer Story, mit dem warmen Sonnenuntergang tief und den Worten hoch im Dunkeln.

- 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](https://gradiently.design/de/guide/80s-aesthetic).

## FAQ

### Welche Farben werden in Synthwave genutzt?

Knallpink, elektrisches Cyan, Sonnenuntergangsorange, Sonnengelb und Violett, auf einem tiefen Indigo- oder fast schwarzen Himmel mit Chromweiß-Glanzlichtern.

### Was ist der Synthwave-Verlauf?

Ein Sonnenuntergang von Gelb über Orange und Pink bis Violett. In CSS: `linear-gradient(180deg, #ffd23f 0%, #ff8a3d 35%, #ff2a6d 70%, #b3138f 100%)`.

### Ist Synthwave dasselbe wie Retrowave oder Outrun?

Die Namen werden fast austauschbar genutzt. Outrun bezieht sich oft auf die Seite des Looks mit Autofahrt und Sportwagen, aber die Palette ist dieselbe.

### Was ist der Unterschied zwischen Synthwave- und Vaporwave-Farben?

Synthwave nutzt gesättigte Neons auf einem dunklen Nachthimmel. Vaporwave nutzt weichere Pastelle wie Flieder, Mint und Lachs auf hellen oder petrolfarbenen Gründen.