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

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.

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.

Synthwave ist der stilisierte Neon-Cousin des echten Himmels; Vaporwave-Farben und Retro-Farbverläufe 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.

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 und für die Theorie schlammige Farbverläufe.

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 erklärt, wie Temperatur die Stimmung eines Designs verändert.

So baust du deinen eigenen Sonnenuntergang-Farbverlauf

1. 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. 2

   Leg Warm nach unten

   Gold und Orange gehören an den Horizont. Umgedrehte Sonnenuntergänge können funktionieren, wirken aber stilisiert.

3. 3

   Überspring nie einen Nachbarn

   Zwischen Blau und Orange gehören Violett und Pink. Zwischen Orange und Dunkel gehören Pflaume oder Indigo.

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

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

Weitere Himmels- und Landschaftspaletten findest du unter Farbpaletten aus der Natur, Versionen mit Pink im Mittelpunkt unter pinke Farbverläufe.