# Himmel Farbverlauf: Codes für Morgen bis Nacht

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

Der Himmel ist der eine Verlauf, den alle seit Jahren studieren, ohne es zu versuchen. Hier sind Codes für jede Stunde, in der Reihenfolge des echten Himmels, und wie du Worte darauf setzt.

## The short version

- Ein überzeugender Himmel Farbverlauf ist oben am tiefsten und am Horizont am hellsten, weil Licht nahe am Horizont durch mehr Luft reist.
- Bei Morgen- und Abenddämmerung liegen die warmen Farben tief, nah am Horizont, und das kühle Blau bleibt oben.
- Lass einen Himmel Farbverlauf in CSS mit `180deg` senkrecht laufen, damit das Oben des Designs als Himmelsoberseite gelesen wird.
- Nachthimmel wirken natürlicher mit einem etwas helleren Band am Horizont als mit flachem Schwarz.
- Dunkle Schrift liest sich gut auf Mittagshimmeln und tief auf einem Morgenhimmel, helle Schrift passt zum oberen Teil von Morgenhimmel, Dämmerung, blauer Stunde und 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.

- Morgenindigo: #2b3a67
- Rosé des ersten Lichts: #e3a6b4
- Mittagszenit: #1f6fd1
- Mittagshorizont: #a9d3f5
- Goldene Stunde: #f59e42
- Dämmerungsmagenta: #b5507a
- Blaue Stunde: #23407a
- Mitternacht: #03050f

Ein Himmelstag in acht Farben. Jede Tageszeit leiht sich zwei oder drei davon, immer mit der dunkleren oben.

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

- Morgenrot: Indigo zu Pfirsich: `linear-gradient(180deg, #2b3a67 0%, #6c6fa8 35%, #e3a6b4 70%, #fbd7b5 100%)`
- Helles erstes Licht: `linear-gradient(180deg, #8fa9d6 0%, #d7c6e0 55%, #fde2cf 100%)`
- Sonnenaufgang: Flieder zu Aprikose: `linear-gradient(180deg, #3d4f8a 0%, #c98fb0 60%, #ffc48a 100%)`

Drei Morgenröten. Die warmen Stopps steigen nie über das untere Drittel, und das lässt sie als Sonnenaufgang statt Sonnenuntergang erscheinen.

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

- Klarer Mittag: `linear-gradient(180deg, #1f6fd1 0%, #4f9be8 45%, #a9d3f5 85%, #dceefb 100%)`
- Dunstiger Nachmittag: `linear-gradient(180deg, #5b9bd5 0%, #9cc5ea 50%, #e6f1f8 100%)`
- Bedeckt: `linear-gradient(180deg, #8e98a3 0%, #b9c1c9 55%, #dde2e6 100%)`

Himmel am Tag. Klarer Mittag ist der, den man mit Himmelblau meint; bedeckt ist nützlich, wenn du Ruhe ohne Farbe willst.

Mehr Blautöne jenseits des Himmels, von Marine bis Eis, findest du bei den Codes für [blaue Farbverläufe](https://gradiently.design/de/guide/blue-gradient). Willst du auch das Wasser unter dem Himmel, funktioniert der Artikel zum [Meer Farbverlauf](https://gradiently.design/de/guide/ocean-gradient) 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.

- Goldene Stunde: `linear-gradient(180deg, #4a7fc1 0%, #a9b8c9 45%, #f3c98b 80%, #f59e42 100%)`
- Dämmerung: Marine zu Korall: `linear-gradient(180deg, #1b1f4b 0%, #4b3a7a 35%, #b5507a 70%, #f08a5d 100%)`
- Blaue Stunde: `linear-gradient(180deg, #0f1c3f 0%, #23407a 50%, #5b7fb8 100%)`

Abendhimmel. Die Dämmerung ist der lebhafteste aller Codes hier, gib ihr also weniger Worte und mehr Raum.

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](https://gradiently.design/de/guide/sunset-gradient) 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](https://gradiently.design/de/guide/night-sky-gradient).

Mondlose Nacht: `linear-gradient(180deg, #03050f 0%, #0b1530 55%, #1a2a55 100%)`

Oben fast schwarz, am Horizont tiefes Marineblau. Lege eine feine Körnung darüber, denn ein so dunkler Verlauf zeigt auf Bildschirmen leicht Streifen.

> **Dunkle Himmel zeigen Streifen** Codes für blaue Stunde und Nacht laufen durch nur sehr wenige unterschiedliche Farbwerte, deshalb zeigen Bildschirme und komprimierte Exporte sichtbare Stufen. Eine leichte Rauschschicht behebt das, wie unter [Verlaufs-Banding](https://gradiently.design/de/guide/gradient-banding) erklärt.

## Welcher Himmel zu welchem Design passt

| Himmel | Wirkung | Gut für | Schriftfarbe |
| --- | --- | --- | --- |
| Morgenrot | Sanft, hoffnungsvoll | Wellness, Launches, Morgenveranstaltungen | Weiß weit oben, dunkles Indigo nahe am Horizont |
| Klarer Mittag | Offen, optimistisch | Reisen, Apps, Sommerangebote | Dunkles Marineblau |
| Bedeckt | Ruhig, ernst | Berichte, leise Ankündigungen | Anthrazit |
| Goldene Stunde | Warm, nostalgisch | Gastronomie, Fotografie, Hochzeiten | Dunkelbraun oder Weiß nahe der Oberkante |
| Dämmerung | Dramatisch, gesellig | Events, Musik, Nachtleben | Weiß |
| Blaue Stunde und Nacht | Hochwertig, fokussiert | Tech, Film, späte Öffnungen | Weiß oder helles Blau |

Ein Ausgangspunkt. Teste deine echten Worte auf deinem echten Hintergrund, denn ein einzelner Verlauf kann an einem Ende dunkle und am anderen helle Schrift brauchen.

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

Eine hohe Story mit morgenrotem Hintergrund und der Überschrift Auf vor der Sonne in der oberen Hälfte

Eine Story für einen frühen Kurs. Die Überschrift steht in heller Schrift im ruhigen oberen Himmel, die Details darunter, wo das Licht am weichsten ist.

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

- Story 1080×1920: 1080 × 1920
- Pinterest-Pin 1000×1500: 1000 × 1500
- Website-Hero 1920×1080: 1920 × 1080
- X-Header 1500×500: 1500 × 500

Auf der Story hat der Himmel Raum zum Atmen. Auf dem Header muss das warme Horizontband dünner sein, sonst verschluckt es den Rahmen.

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

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

Ein Verlauf, vier Stunden. Wähle die Klasse mit einer Zeile JavaScript, die die Uhr des Besuchers liest, oder setze sie pro Seite von Hand.

Zu Winkeln, Stopp-Positionen und Fallbacks sieh dir [CSS lineare Verläufe](https://gradiently.design/de/guide/css-linear-gradient) an.

## FAQ

### Welche Farben ergeben einen Himmel Farbverlauf?

Ein Tageshimmel läuft von einem gesättigten Blau wie #1f6fd1 oben zu einem hellen Blau wie #dceefb am Horizont. Morgen und Abend fügen nur unten Rosé, Pfirsich, Magenta oder Korall hinzu.

### In welche Richtung sollte ein Himmel Farbverlauf gehen?

Von oben nach unten, mit der dunkelsten Farbe oben. In CSS ist das `linear-gradient(180deg, oben, unten)`.

### Wie unterscheidet sich ein Sonnenaufgang Farbverlauf von einem Sonnenuntergang?

Im Design wirkt ein Sonnenaufgang meist weicher und kühler, mit Flieder und Pfirsich und einem tiefen, dünnen warmen Band. Sonnenuntergänge werden eher gesättigter gezeichnet, mit kräftigerem Orange und Magenta, die höher steigen.

### Welche Textfarbe funktioniert auf einem Himmelblau Farbverlauf?

Dunkles Marineblau oder Anthrazit liest sich gut auf Mittagshimmeln und nahe einem Morgenhorizont. Nimm Weiß auf Dämmerung, blauer Stunde und Nachthimmeln und weit oben auf einem Morgenhimmel, und prüfe den Kontrast dort, wo die Worte wirklich sitzen.

### Warum sieht mein Nachthimmel Farbverlauf gestreift aus?

Sehr dunkle Verläufe haben wenige Farbstufen, deshalb zeigen Bildschirme Streifen. Füge eine leichte Körnungsschicht hinzu und exportiere als PNG statt als stark komprimiertes JPEG.