Himmel Farbverlauf: Codes für Morgen bis Nacht

Ein Himmel Farbverlauf läuft von einer tieferen Farbe oben zu einer helleren am Horizont, denn so verhält sich Tageslicht: Licht nahe am Horizont durchquert mehr Luft, streut stärker und driftet Richtung Weiß. Stimmt diese eine Richtung, wirkt fast jedes Blau wie Himmel. Unten findest du kopierbare Codes für sechs Tageszeiten, vom ersten Licht bis zu einer mondlosen Nacht, mit Hinweisen, wo jede funktioniert und welche Schriftfarbe darauf passt.

Wie der echte Himmel aufgebaut ist

Schau an einem klaren Tag nach oben: Das Blau direkt über dir ist satter als das Blau nahe den Dächern. Bei Sonnenauf- und -untergang durchquert das Sonnenlicht so viel Atmosphäre, dass das meiste Blau gestreut wird, bevor es dich erreicht, und Rot, Orange und Rosa bleiben tief am Himmel, während der Zenit kühl bleibt. Daraus ergeben sich zwei Regeln für jeden Himmel Farbverlauf: oben tief, unten hell, und warme Farben nur nahe am Horizont.

Morgenrot und Sonnenaufgang Farbcodes

Der Morgen ist der sanfteste Himmel des Tages. Oben ist noch Nachtindigo, die Mitte wird flieder, und am Horizont liegt ein Band aus Rosé und Pfirsich. Er wirkt still und hoffnungsvoll, weshalb er zu Wellnessmarken, Morgenroutinen, Ankündigungen von etwas Neuem und allem passt, das sanft statt laut wirken soll.

Klarer Mittag und Tageshimmel Verläufe

Ein klarer Mittagshimmel ist der Klassiker unter den Himmelblau Farbverläufen: gesättigtes Blau oben, das zu einem hellen, fast weißen Blau am Horizont verblasst. Halte den Farbton stabil und lass die Helligkeit die Arbeit tun. Wird der untere Stopp grau statt hellblau, wirkt der Himmel verschmutzt. Ein dunstiger Nachmittag ist dieselbe Idee mit weniger Sättigung, und ein bedeckter Tag tauscht Blau gegen ein kühles Grau.

Mehr Blautöne jenseits des Himmels, von Marine bis Eis, findest du bei den Codes für blaue Farbverläufe. Willst du auch das Wasser unter dem Himmel, funktioniert der Artikel zum Meer Farbverlauf andersherum: oben hell, unten tief.

Goldene Stunde, Dämmerung und blaue Stunde Codes

Am Abendhimmel werden Himmel-Verläufe dramatisch. Die goldene Stunde behält oben ein Tagesblau und am Horizont ein kräftiges Bernstein, und das weiche gräuliche Band dazwischen ist echt, kämpfe also nicht dagegen. Die Dämmerung senkt das Blau zu Marine und fügt Magenta und Korall hinzu. Die blaue Stunde, die kurze Spanne nach Sonnenuntergang, ist fast ganz blau und einer der schmeichelhaftesten dunklen Hintergründe überhaupt.

Lehnt sich dein Design ganz in Orange und Rosa, ganz ohne Blau, bist du vom Himmel zum Sonnenuntergang gewechselt, und die Codes für Sonnenuntergang Farbverläufe helfen dir dann mehr.

Nachthimmel Farbcodes

Ein Nachthimmel ist selten reines Schwarz. Städte, der Mond und das schwache Glühen der Atmosphäre halten den Horizont einen Hauch heller als den Zenit. Baue einen Nachtverlauf mit fast schwarzem Oben und tiefmarineblauem Horizont, und er wirkt wie Himmel; kehrst du ihn um, wirkt er wie ein Loch. Für Sterne, Mondlicht und viele weitere dunkle Blautöne lies den Leitfaden zum Nachthimmel Farbverlauf.

Welcher Himmel zu welchem Design passt

Dieser letzte Punkt zählt bei Himmeln mehr als bei den meisten Verläufen, denn ein Himmel wandert gewollt von dunkel zu hell. Setze die Worte dorthin, wo der Himmel am ruhigsten ist, und wähle die Tinte für diese Stelle, nicht für den ganzen Verlauf. Text auf Verläufen geht tiefer. In Gradiently wird das für dich erledigt: Ein Mark hält seine ruhigste Zone hinter den Worten, und Automatische Farbe wählt Zeile für Zeile helle oder dunkle Schrift aus der eigenen Palette des Marks.

Himmel Farbverläufe für jedes Format

Hohe Formate passen perfekt zu Himmeln: Eine Story oder ein Pin kann den ganzen Aufstieg vom Horizont zum Zenit zeigen. Breite Formate stauchen ihn, halte also die Horizontfarben im unteren Drittel und lass den oberen Himmel den Rest füllen. Das ist für jede Größe eine andere Anordnung, weshalb ein auf alle Formate zugeschnittenes Bild meist den Horizont verliert.

Ein Himmel Farbverlauf in CSS für jede Tageszeit

Auf einer Website reichen drei Custom Properties, um jeden Himmel zu beschreiben. Tausche eine Klasse, und der ganze Abschnitt wechselt die Stunde, praktisch für einen Hero, der der Ortszeit des Besuchers folgt, oder eine Seite, die dunkler wird, wenn eine Geschichte voranschreitet.

.sky {
  min-height: 100vh;
  background: linear-gradient(180deg, var(--zenith) 0%, var(--middle) 50%, var(--horizon) 100%);
}

.sky--dawn   { --zenith: #2b3a67; --middle: #c98fb0; --horizon: #fbd7b5; }
.sky--noon   { --zenith: #1f6fd1; --middle: #6fb0ee; --horizon: #dceefb; }
.sky--dusk   { --zenith: #1b1f4b; --middle: #b5507a; --horizon: #f08a5d; }
.sky--night  { --zenith: #03050f; --middle: #0b1530; --horizon: #1a2a55; }

Zu Winkeln, Stopp-Positionen und Fallbacks sieh dir CSS lineare Verläufe an.