Himmelgradienter: koder fra daggry til natt

En himmelgradient går fra en dypere farge øverst til en lysere ved horisonten, fordi dagslys oppfører seg slik: lys nær horisonten passerer gjennom mer luft, spres mer og nærmer seg hvitt. Får du den retningen riktig, leses nesten enhver blåtone som himmel. Nedenfor finner du koder du kan kopiere til seks tider på døgnet, fra det første lyset til en måneløs natt, med råd om hvor hver passer og hvilken tekstfarge du bør bruke.

Slik er den ekte himmelen bygget opp

Se opp på en klar dag, og blåfargen rett over deg er rikere enn den nær hustakene. Ved soloppgang og solnedgang krysser sollyset så mye atmosfære at det meste av blått spres bort før det når deg. Da blir rødt, oransje og rosa igjen lavt på himmelen, mens senit holder seg kjølig. Det gir to regler for enhver himmelgradient: dypt øverst, lyst nederst, og varme farger bare nær horisonten.

Gradientkoder til daggry og soloppgang

Daggry har døgnets mykeste himmel. Toppen er fortsatt nattindigo, midten blir syrinfarget, og et bånd av rosa og fersken ligger ved horisonten. Den virker stille og håpefull, og passer derfor til velværemerker, morgenrutiner, kunngjøringer av noe nytt og alt som skal føles mildt fremfor høylytt.

Gradienter til klar middagshimmel og daghimmel

En klar middagshimmel er den klassiske himmelblå gradienten: mettet blått øverst som toner over i en lys, nesten hvit blåtone ved horisonten. Hold fargetonen fast, og la lysheten gjøre jobben. Hvis det nederste fargestoppet blir grått fremfor lyseblått, begynner himmelen å virke forurenset. En disig ettermiddag følger samme idé med mindre metning, mens en overskyet dag bytter blått mot kjølig grått.

For flere blåtoner utover himmelen, fra marine til is, se kodene til blå gradienter. Vil du også ha vannet under himmelen, går artikkelen om havgradienter motsatt vei: lyst øverst og dypt nederst.

Koder til den gylne timen, skumring og blåtimen

På kveldshimmelen blir himmelgradienter dramatiske. Den gylne timen beholder dagblått øverst og sterk ravfarge ved horisonten. Det myke, grålige båndet mellom dem finnes i virkeligheten, så ikke kjemp mot det. Skumring senker blått til marineblått og legger til magenta og korall. Blåtimen, den korte stunden etter at solen har gått ned, er nesten helt blå og er en av de mest flatterende mørke bakgrunnene som finnes.

Hvis designet ditt går helt over i oransje og rosa uten blått, har du gått fra himmel til solnedgang. Da passer kodene til solnedgangsgradienter bedre.

Gradientkoder til nattehimmel

En nattehimmel er sjelden helt svart. Byer, månen og atmosfærens svake glød holder horisonten litt lysere enn senit. Bygg en nattgradient med nesten svart øverst og dyp marineblå horisont, så leses den som himmel. Snu den, så leses den som et hull. For stjerner, måneskinn og mange flere mørke blåtoner, les guiden om nattehimmelgradienter.

Hvilken himmel som passer til hvilket design

Det siste poenget betyr mer for himler enn for de fleste gradienter, siden en himmel bevisst går fra mørkt til lyst. Plasser teksten der himmelen er roligst, og velg tekstfarge for det området fremfor hele gradienten. Tekst på gradient går grundigere inn i det. Gradiently håndterer dette for deg: en Mark holder det roligste området bak ordene, og Auto-tekstfarge velger lys eller mørk tekst linje for linje fra Markens egen palett.

Himmelgradienter til alle formater

Høye formater passer perfekt til himler: en story eller pin kan vise hele stigningen fra horisont til senit. Brede formater presser den sammen, så hold horisontfargene i nederste tredjedel og la den øvre himmelen fylle resten. Det krever ulikt oppsett for hver størrelse, og derfor mister du som regel horisonten når du beskjærer ett bilde til flere formater.

En himmelgradient i CSS for alle tider på døgnet

På en nettside er tre egendefinerte egenskaper nok til å beskrive enhver himmel. Bytt én klasse, så skifter hele seksjonen tidspunkt. Det er praktisk for et toppbilde som følger besøkendes lokale tid, eller en side som mørkner etter hvert som en fortelling går fremover.

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

For vinkler, plassering av fargestopp og reserveløsninger, se lineær gradient i CSS.