# Luchtverloop: codes voor dageraad, middag, schemer en nacht

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

De lucht is het ene verloop dat iedereen al jaren bestudeert zonder het te proberen. Hier staan codes voor elk uur ervan, in de volgorde van de echte lucht, en hoe je er tekst op zet.

## The short version

- Een overtuigend luchtverloop is bovenaan het diepst en bij de horizon het bleekst, omdat licht bij de horizon door meer lucht reist.
- Bij dageraad en schemering zitten de warme kleuren laag, bij de horizon, en blijven de koele blauwtinten boven.
- Laat een luchtverloop verticaal lopen met `180deg` in CSS, zodat de bovenkant van het ontwerp als de bovenkant van de lucht leest.
- Nachtluchten ogen natuurlijker met een iets lichtere band bij de horizon dan met egaal zwart.
- Donkere inkt leest goed op middaglucht en laag op een dageraadlucht, terwijl lichte inkt past bij de bovenkant van een dageraadlucht, schemer, blauw uur en nacht.

Een **luchtverloop** loopt van een diepere kleur boven naar een bleekere bij de horizon, omdat daglicht zich zo gedraagt: licht bij de horizon gaat door meer lucht, verstrooit meer en schuift richting wit. Krijg die ene richting goed en bijna elk blauw leest als lucht. Hieronder staan kopieerbare codes voor zes momenten van de dag, van eerste licht tot een maanloze nacht, met notities over waar elk werkt en welke tekstkleur erop past.

## Hoe de echte lucht is opgebouwd

Kijk op een heldere dag omhoog en het blauw recht boven je is rijker dan het blauw bij de daken. Bij zonsopgang en zonsondergang kruist het zonlicht zoveel atmosfeer dat het meeste blauw wegstrooit voordat het jou bereikt, waardoor rood, oranje en roze laag aan de hemel blijven terwijl het zenit koel blijft. Dat geeft je twee regels voor elk luchtverloop: diep boven, bleek onder, en warme kleuren alleen bij de horizon.

- Dageraadindigo: #2b3a67
- Roos van eerste licht: #e3a6b4
- Middagzenit: #1f6fd1
- Middaghorizon: #a9d3f5
- Gouden uur: #f59e42
- Schemermagenta: #b5507a
- Blauw uur: #23407a
- Middernacht: #03050f

Eén dag lucht in acht kleuren. Elk moment van de dag leent er twee of drie, altijd met de donkerste bovenaan.

## Codes voor dageraad en zonsopgang

De dageraad is de zachtste lucht van de dag. Boven is het nog nachtindigo, in het midden wordt het lila en op de horizon ligt een band van roze en perzik. Het voelt rustig en hoopvol, daarom past het bij wellnessmerken, ochtendroutines, aankondigingen van iets nieuws en alles wat zacht in plaats van luid wil aanvoelen.

- Dageraad: indigo naar perzik: `linear-gradient(180deg, #2b3a67 0%, #6c6fa8 35%, #e3a6b4 70%, #fbd7b5 100%)`
- Bleek eerste licht: `linear-gradient(180deg, #8fa9d6 0%, #d7c6e0 55%, #fde2cf 100%)`
- Zonsopgang: lila naar abrikoos: `linear-gradient(180deg, #3d4f8a 0%, #c98fb0 60%, #ffc48a 100%)`

Drie dageraden. De warme stops komen nooit boven het onderste derde uit, en daardoor lezen ze als zonsopgang en niet als zonsondergang.

## Verlopen voor heldere middag en dag

Een heldere middaglucht is het klassieke **hemelsblauwe verloop**: verzadigd blauw bovenaan dat vervaagt naar een bleek, bijna wit blauw bij de horizon. Houd de tint gelijk en laat helderheid het werk doen. Als de onderste stop grijs wordt in plaats van bleekblauw, gaat de lucht er vervuild uitzien. Een heiige middag is hetzelfde idee met minder verzadiging, en een bewolkte dag ruilt blauw voor een koel grijs.

- Heldere middag: `linear-gradient(180deg, #1f6fd1 0%, #4f9be8 45%, #a9d3f5 85%, #dceefb 100%)`
- Heiige middag: `linear-gradient(180deg, #5b9bd5 0%, #9cc5ea 50%, #e6f1f8 100%)`
- Bewolkt: `linear-gradient(180deg, #8e98a3 0%, #b9c1c9 55%, #dde2e6 100%)`

Luchten overdag. Heldere middag is degene die mensen met hemelsblauw bedoelen; bewolkt is handig als je rust zonder kleur wilt.

Voor meer blauwtinten voorbij de lucht, van marine tot ijs, zie de codes voor [blauwe verlopen](https://gradiently.design/nl/guide/blue-gradient). Wil je ook het water onder de lucht, dan werkt het [oceaanverloop](https://gradiently.design/nl/guide/ocean-gradient) andersom: bleek boven, diep onderin.

## Codes voor gouden uur, schemer en blauw uur

In de avondlucht worden luchtverlopen dramatisch. Het gouden uur houdt een blauw van overdag boven en een sterk amber bij de horizon, en de zachte grijzige band daartussen is echt, dus vecht er niet tegen. Schemer laat het blauw zakken naar marine en voegt magenta en koraal toe. Het blauwe uur, de korte periode nadat de zon weg is, is bijna helemaal blauw en is een van de flatterendste donkere achtergronden die er zijn.

- Gouden uur: `linear-gradient(180deg, #4a7fc1 0%, #a9b8c9 45%, #f3c98b 80%, #f59e42 100%)`
- Schemer: marine naar koraal: `linear-gradient(180deg, #1b1f4b 0%, #4b3a7a 35%, #b5507a 70%, #f08a5d 100%)`
- Blauw uur: `linear-gradient(180deg, #0f1c3f 0%, #23407a 50%, #5b7fb8 100%)`

Avondluchten. Schemer is de drukste van alle codes hier, dus geef hem minder woorden en meer ruimte.

Leunt je ontwerp helemaal op oranje en roze zonder blauw, dan ben je van lucht naar zonsondergang verhuisd, en dan zijn de codes voor [zonsondergangverlopen](https://gradiently.design/nl/guide/sunset-gradient) beter voor je.

## Codes voor een nachtlucht

Een nachtlucht is zelden zuiver zwart. Steden, de maan en de zwakke gloed van de atmosfeer houden de horizon een tikje lichter dan het zenit. Bouw een nachtverloop met een bijna zwarte bovenkant en een diepe marineblauwe horizon en het leest als lucht; keer het om en het leest als een gat. Voor sterren, maanlicht en veel meer donkerblauwtinten lees je de gids over [nachtluchtverloop](https://gradiently.design/nl/guide/night-sky-gradient).

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

Bijna zwart boven, diep marineblauw bij de horizon. Leg er fijne korrel overheen, want een verloop zo donker vertoont gemakkelijk banding op schermen.

> **Donkere luchten krijgen banding** Codes voor het blauwe uur en de nacht doorlopen maar weinig verschillende kleurwaarden, dus schermen en gecomprimeerde exports tonen zichtbare stappen. Een lichte ruislaag lost het op, zoals uitgelegd bij [verloopbanding](https://gradiently.design/nl/guide/gradient-banding).

## Welke lucht bij welk ontwerp past

| Lucht | Voelt | Goed voor | Tekstkleur |
| --- | --- | --- | --- |
| Dageraad | Zacht, hoopvol | Wellness, lanceringen, ochtendevenementen | Wit hoog, donkerindigo bij de horizon |
| Heldere middag | Open, optimistisch | Reizen, apps, zomeraanbiedingen | Donkermarine |
| Bewolkt | Kalm, serieus | Rapporten, rustige aankondigingen | Antraciet |
| Gouden uur | Warm, nostalgisch | Horeca, fotografie, bruiloften | Donkerbruin of wit bovenaan |
| Schemer | Dramatisch, sociaal | Evenementen, muziek, uitgaan | Wit |
| Blauw uur en nacht | Premium, gefocust | Tech, film, late openingen | Wit of lichtblauw |

Een beginpunt. Test je eigen woorden op je eigen achtergrond, want één verloop kan donkere letters aan het ene uiteinde en lichte aan het andere nodig hebben.

Dat laatste punt telt zwaarder bij luchten dan bij de meeste verlopen, omdat een lucht per definitie van donker naar licht loopt. Zet de woorden waar de lucht het rustigst is en kies inkt voor dat gebied, niet voor het hele verloop. [Tekst op een verloop](https://gradiently.design/nl/guide/text-on-gradient) gaat dieper in op dit punt. In Gradiently wordt dit voor je geregeld: een Mark houdt zijn rustigste gebied achter de woorden en Auto-inkt kiest lichte of donkere letters regel voor regel uit het eigen palet van de Mark.

Een verticale story met een achtergrond in dageraadkleuren en de kop Op voor de zon in de bovenste helft

Een story voor een vroege les. De kop staat in lichte letters in de rustige bovenlucht en de details lager, waar het licht het zachtst is.

## Luchtverlopen voor elk formaat

Hoge formaten passen perfect bij luchten: een story of pin kan de hele klim van horizon tot zenit tonen. Brede formaten drukken hem samen, dus houd de horizonkleuren in het onderste derde en laat de bovenlucht de rest vullen. Dat is voor elk formaat een andere opstelling, daarom verliest het bijsnijden van één afbeelding over formaten heen meestal de horizon.

- Story 1080×1920: 1080 × 1920
- Pinterest-pin 1000×1500: 1000 × 1500
- Websitehero 1920×1080: 1920 × 1080
- X-header 1500×500: 1500 × 500

Op de story heeft de lucht ruimte om te ademen. Op de header moet de warme horizonband dunner, anders slokt hij het beeld op.

## Een luchtverloop in CSS voor elk moment van de dag

Op een website zijn drie aangepaste eigenschappen genoeg om elke lucht te beschrijven. Wissel één klasse en de hele sectie verandert van uur, wat handig is voor een hero die de lokale tijd van de bezoeker volgt of een pagina die donkerder wordt naarmate een verhaal vordert.

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

Eén verloop, vier uren. Kies de klasse met een regel JavaScript die de klok van de bezoeker leest, of zet hem met de hand per pagina.

Voor hoeken, stoppposities en terugvalopties, zie [CSS lineair verloop](https://gradiently.design/nl/guide/css-linear-gradient).

## FAQ

### Welke kleuren vormen een luchtverloop?

Een lucht overdag loopt van een verzadigd blauw zoals #1f6fd1 bovenaan naar een bleekblauw zoals #dceefb bij de horizon. Dageraad en schemer voegen roze, perzik, magenta of koraal alleen onderaan toe.

### In welke richting moet een luchtverloop lopen?

Van boven naar beneden, met de donkerste kleur bovenaan. In CSS is dat `linear-gradient(180deg, top, bottom)`.

### Hoe laat ik een zonsopgangverloop anders ogen dan een zonsondergang?

In design leest zonsopgang meestal zachter en koeler, met lila en perzik en de warme band laag en dun. Zonsondergangen worden meestal verzadigder getekend, met sterker oranje en magenta dat hoger klimt.

### Welke tekstkleur werkt op een hemelsblauw verloop?

Donkermarine of antraciet leest goed op middaglucht en bij een dageraadhorizon. Gebruik wit op schemer-, blauwuur- en nachtluchten en hoog op een dageraadlucht, en check het contrast waar de woorden echt staan.

### Waarom ziet mijn nachtluchtverloop er gestreept uit?

Heel donkere verlopen hebben weinig kleurstappen, dus schermen tonen banden. Voeg een lichte korrellaag toe en exporteer als PNG in plaats van als sterk gecomprimeerde JPEG.