Luchtverloop: codes voor dageraad, middag, schemer 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.

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.

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.

Voor meer blauwtinten voorbij de lucht, van marine tot ijs, zie de codes voor blauwe verlopen. Wil je ook het water onder de lucht, dan werkt het oceaanverloop 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.

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

Welke lucht bij welk ontwerp past

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

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.

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.

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

Voor hoeken, stoppposities en terugvalopties, zie CSS lineair verloop.