# Sonnenuntergang-Farbverläufe: Orange, Koralle und Dämmerung

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

Die meisten Sonnenuntergang-Farbverläufe scheitern an derselben Stelle: in der Mitte, wo Blau auf Orange trifft und grau wird. Ein echter Himmel tut das nie. Hier ist die Reihenfolge der Natur und zehn Paletten, die darauf aufbauen.

## The short version

- Ein Sonnenuntergang-Farbverlauf lässt warme Farben wie Gold, Orange und Koralle in Pink, Violett und ein tiefes Abendblau übergehen.
- Bei einem echten Sonnenuntergang läuft der Himmel von Gelb und Orange am Horizont über Rot und Pink bis zu Violett und Blau über dir.
- Wer Blau direkt in Orange übergehen lässt, überspringt die Pink- und Violetttöne dazwischen, und die Mitte wird grau.
- Orange direkt in Schwarz auslaufen zu lassen, ergibt Braun, also sehen Dämmerungsverläufe besser aus, wenn sie über Pflaume oder Indigo dunkler werden.
- Setz Text auf den dunkleren, oberen Teil eines Sonnenuntergang-Farbverlaufs, wo der Kontrast zu weißer Schrift am höchsten ist.

Ein **Sonnenuntergang-Farbverlauf** lässt warme Farben, Gold, Orange und Koralle, in Pink, Violett und ein tiefes Abendblau übergehen. Er gehört zu den beliebtesten Farbverläufen im Design, weil jeder ihn erkennt und fast jeder ihn mag. Er ist aber auch einer der am leichtesten verpatzten. Das Geheimnis ist, der Reihenfolge zu folgen, die der Himmel tatsächlich nutzt: warm und hell am Horizont, kühler werdend über Pink und Violett, je weiter du nach oben schaust. Lässt du diese mittleren Farben weg, wird der Verlauf grau.

## Die natürliche Reihenfolge der Sonnenuntergangsfarben

Steht die Sonne tief, legt ihr Licht einen viel längeren Weg durch die Atmosphäre zurück, bis es dich erreicht. Unterwegs streut die Luft blaues Licht aus dem direkten Strahl, also kommt das Licht nahe der Sonne gelb, orange und rot an. Höher am Himmel, weg von der Sonne, bleibt mehr Blau übrig. Das Ergebnis sind Farbbänder, die vom Horizont nach oben gestapelt sind.

Die volle Sonnenuntergangsfolge: `linear-gradient(180deg, #1e3a8a 0%, #6d28d9 25%, #db2777 50%, #f97316 75%, #fcd34d 100%)`

Von tiefem Blau oben über Violett, Pink und Orange bis zu Gold am Horizont. Jeder Schritt ist ein Nachbar des nächsten, also wird nichts grau.

| Höhe am Himmel | Farbe | Beispielcode |
| --- | --- | --- |
| Über dir | Tiefes Blau bis Indigo | `#1e3a8a` |
| Oberer Himmel | Violett bis Malve | `#6d28d9` |
| Mittlerer Himmel | Pink bis Magenta | `#db2777` |
| Unterer Himmel | Orange bis Koralle | `#f97316` |
| Horizont | Gold bis Blassgelb | `#fcd34d` |

Die Bänder eines klaren Sonnenuntergangs. Echte Himmel variieren mit Wolken, Dunst und Jahreszeit, aber die Reihenfolge bleibt.

## Sonnenuntergang-Paletten mit Codes

Diese zehn Paletten folgen alle der Reihenfolge des Himmels, von oben nach unten. Manche nutzen die ganze Bandbreite, andere nur das warme Ende oder nur die Dämmerung.

- Korallendämmerung: `linear-gradient(180deg, #2e2a5a 0%, #8e4a7e 40%, #f07167 75%, #fed9b7 100%)`
- Wüstenabend: `linear-gradient(180deg, #5b3a6e 0%, #c0587e 35%, #f28c5b 70%, #f9d29d 100%)`
- Blaue Stunde: `linear-gradient(180deg, #0b1437 0%, #1e3a8a 45%, #6b5b95 75%, #f4a28c 100%)`
- Nachglühen: `linear-gradient(180deg, #111827 0%, #3b1f4a 40%, #b1455f 75%, #f29e6d 100%)`
- Tropisch, nur warm: `linear-gradient(180deg, #ff6f61 0%, #ff9966 55%, #ffd194 100%)`
- Pfirsichdunst: `linear-gradient(180deg, #fbc2c2 0%, #fcd5b5 55%, #fef3c7 100%)`
- Mittelmeer: `linear-gradient(180deg, #4a6fa5 0%, #c38fb8 45%, #f6a57f 75%, #ffe0a3 100%)`
- Synthwave: `linear-gradient(180deg, #2b1055 0%, #d53a9d 55%, #ffb86c 100%)`
- Sonne am Horizont: `radial-gradient(circle at 50% 100%, #fff3b0 0%, #ffb347 18%, #ff6f61 40%, #6d2e6b 75%, #1b1b3a 100%)`
- Glut: `linear-gradient(180deg, #7c2d12 0%, #c2410c 40%, #f59e0b 80%, #fde68a 100%)`

Zehn Sonnenuntergang-Farbverläufe. Der radiale setzt die Sonne selbst an den unteren Bildrand.

Synthwave ist der stilisierte Neon-Cousin des echten Himmels; [Vaporwave-Farben](https://gradiently.design/de/guide/vaporwave-colors) und [Retro-Farbverläufe](https://gradiently.design/de/guide/retro-gradients) führen diese Richtung weiter.

## Warum Sonnenuntergang-Farbverläufe schlammig werden und wie du das behebst

Es gibt zwei klassische Fehler. Der erste ist, Blau und Orange direkt zu verbinden. Sie liegen im Farbkreis fast gegenüber, und ein gerader Übergang zwischen ihnen mittelt sich in der Mitte zu Grau. Der Himmel tut das nie, weil er über Violett und Pink läuft. Der zweite ist, Orange für eine dunklere Stimmung in Schwarz auslaufen zu lassen. Dunkles Orange ist Braun, also wirkt der Verlauf wie Rost oder Schlamm statt wie Abend.

- Blau direkt zu Orange: graue Mitte: `linear-gradient(180deg, #1d4ed8 0%, #f97316 100%)`
- Über Violett und Pink: sauber: `linear-gradient(180deg, #1d4ed8 0%, #7c3aed 30%, #db2777 60%, #f97316 100%)`
- Schwarz zu Orange: braun: `linear-gradient(180deg, #0a0a0a 0%, #f97316 100%)`
- Indigo über Pflaume: Dämmerung: `linear-gradient(180deg, #1b1b3a 0%, #6d2e6b 45%, #f97316 100%)`

Zwei schlammige Sonnenuntergänge und ihre Lösungen. Beide Lösungen fügen die Farben hinzu, die der Himmel selbst durchläuft.

Willst du weniger Stopps, hilft Mischen in OKLCH: Es hält die Farben bis in die Mitte des Übergangs gesättigt. Siehe [OKLCH-Farbverläufe in CSS](https://gradiently.design/de/guide/css-gradient-oklch) und für die Theorie [schlammige Farbverläufe](https://gradiently.design/de/guide/muddy-gradients).

## Wo Sonnenuntergang-Farbverläufe passen

Sonnenuntergänge tragen ein klares Gefühl: das Ende des Tages, Wärme, ein wenig Nostalgie. Das macht sie für manche Aufgaben natürlich und für andere seltsam. Ein heller Sonnenuntergang mit voller Bandbreite passt zu Sommerveranstaltungen, Reisen, Musik und Gastronomie. Eine dämmrige, überwiegend violette Version passt zu Launches am Abend, Podcasts und allem Nachdenklichen. Eine rein warme Version, Gold zu Koralle, passt zu Essen, Getränken und Sale-Momenten.

- **Veranstaltungsplakate und Einladungen:** Die Farben sagen Abend, bevor es das Datum tut.
- **Reisen und Gastronomie:** Die goldene Stunde ist das meistfotografierte Licht überhaupt, und Leute erkennen es.
- **Musik-Cover und Playlists:** Dämmerungspaletten wirken filmisch und ein wenig wehmütig.
- **Saisonale Kampagnen:** Ein Sonnenuntergang, der im Herbst kühler wird, markiert die Jahreszeit ohne neue Gestaltung.

Weniger gut passen sie zu seriöser Finanzwelt, Gesundheitswesen und allem, was neutral wirken soll. Die Wärme wirkt nach Freizeit. Sonnenuntergangsfarben liegen außerdem klar auf der warmen Seite des Farbkreises; [warme und kalte Farben](https://gradiently.design/de/guide/warm-and-cool-colors) erklärt, wie Temperatur die Stimmung eines Designs verändert.

## So baust du deinen eigenen Sonnenuntergang-Farbverlauf

1. **Entscheide, wie viel Himmel du willst** Die ganze Bandbreite für Drama, nur das warme Ende für Energie oder nur die Dämmerung für Ruhe.
2. **Leg Warm nach unten** Gold und Orange gehören an den Horizont. Umgedrehte Sonnenuntergänge können funktionieren, wirken aber stilisiert.
3. **Überspring nie einen Nachbarn** Zwischen Blau und Orange gehören Violett und Pink. Zwischen Orange und Dunkel gehören Pflaume oder Indigo.
4. **Gib dem warmen Band weniger Raum** Bei echten Himmeln schmiegen sich die hellsten Farben an den Horizont. Beschränkst du sie auf das untere Viertel, wirkt der Verlauf natürlich.
5. **Füge Körnung hinzu** Lange, weiche Himmel zeigen leicht Streifen. Eine feine Rauschebene hält den Übergang auch nach der Kompression weich.

## Text auf einem Sonnenuntergang-Farbverlauf

Der obere Teil eines Sonnenuntergang-Farbverlaufs ist dunkel und kühl, perfekt für weißen Text. Der untere Teil ist hell und warm, perfekt für dunklen Text oder für gar nichts. Die Mitte, wo Pink auf Orange trifft, ist für beides die schwierigste Stelle. Setz Überschriften nach oben und Details nach unten, oder halte die Worte in einem ruhigen Band.

Ein Veranstaltungsplakat im Hochformat mit einer Überschrift nahe dem oberen Rand eines warmen Abendverlaufs

Die Überschrift hoch im dunkleren Himmel, Details weiter unten.

Eine vertikale Sale-Story mit einer Überschrift über einem warmen Leuchten am unteren Rand

Eine Story, bei der das warme Leuchten unter den Worten liegt.

```css
.hero {
  background-color: #1b1b3a;
  background-image: radial-gradient(circle at 50% 100%, #fff3b0 0%, #ffb347 18%, #ff6f61 40%, #6d2e6b 75%, #1b1b3a 100%);
  color: #ffffff;
}
.hero h1 {
  /* keep the headline in the dark upper half */
  margin-top: 12vh;
}
```

Die Palette Sonne am Horizont als Hero einer Seite, die Überschrift im dunklen Himmel über dem Leuchten.

Weitere Himmels- und Landschaftspaletten findest du unter [Farbpaletten aus der Natur](https://gradiently.design/de/guide/nature-color-palettes), Versionen mit Pink im Mittelpunkt unter [pinke Farbverläufe](https://gradiently.design/de/guide/pink-gradient).

## FAQ

### Welche Farben stecken in einem Sonnenuntergang-Farbverlauf?

Meist Gold und Orange am Horizont, dann Koralle, Pink und Magenta, dann Violett und ein tiefes Blau oben.

### Warum sieht mein Sonnenuntergang-Farbverlauf schlammig aus?

Meist, weil er Blau direkt in Orange oder Orange direkt in Schwarz übergehen lässt. Füge Violett und Pink zwischen Blau und Orange ein und dunkle über Pflaume oder Indigo statt über Schwarz ab.

### Wie lautet der CSS-Code für einen Sonnenuntergang-Farbverlauf?

Für einen vollen Sonnenuntergang probier linear-gradient(180deg, #1e3a8a 0%, #6d28d9 25%, #db2777 50%, #f97316 75%, #fcd34d 100%). Jede Palette auf dieser Seite lässt sich als CSS kopieren.

### Wohin gehört Text auf einem Sonnenuntergang-Farbverlauf?

In den dunkleren, kühleren oberen Teil für weißen Text oder in das blasse warme Band für dunklen Text. Meide die Mitte, wo Pink auf Orange trifft.