Himmelsgradienter: koder för gryning, middag, skymning och natt

En himmelsgradient går från en djupare färg i zenit till en blekare vid horisonten, eftersom det är så dagsljus beter sig: ljus nära horisonten passerar genom mer luft, sprids mer och drar mot vitt. Får du den enda riktningen rätt läses nästan vilket blått som helst som himmel. Nedan finns kopierbara koder för sex tider på dygnet, från första ljuset till en månlös natt, med anteckningar om var var och en fungerar och vilken färg på text som passar på den.

Hur den verkliga himlen är ordnad

Titta upp en klar dag och blåtonen rakt ovanför dig är rikare än blåtonen nära hustaken. Vid soluppgång och solnedgång korsar solens ljus så mycket atmosfär att det mesta av det blå sprids bort innan det når dig, vilket lämnar rött, orange och rosa lågt på himlen medan zeniten förblir sval. Det ger dig två regler för varje himmelsgradient: djup upptill, blek nedtill, och varma färger bara nära horisonten.

Koder för gryning och soluppgång

Gryningen är dagens mjukaste himmel. Toppen är fortfarande nattindigo, mitten går över i lila och ett band av rosa och persika ligger vid horisonten. Den känns stilla och hoppfull, vilket är varför den passar välmåendevarumärken, morgonrutiner, tillkännagivanden av något nytt och allt som vill kännas milt snarare än högljutt.

Gradienter för klar middag och dagshimmel

En klar middagshimmel är den klassiska himmelsblå gradienten: mättat blått upptill som tonar ut till ett blekt, nästan vitt blått vid horisonten. Håll nyansen stadig och låt ljusheten göra jobbet. Om det nedersta stoppet blir grått i stället för blekblått börjar himlen se smutsig ut. En disig eftermiddag är samma idé med lägre mättnad, och en mulen dag byter ut blått mot ett svalt grått.

För fler blå toner bortom himlen, från marin till is, se koderna för blå gradient. Om du också vill ha vattnet under himlen fungerar artikeln om havsgradient åt andra hållet: blek överst, djup nederst.

Koder för gyllene timmen, skymning och blå timmen

Kvällshimlen är där himmelsgradienter blir dramatiska. Gyllene timmen behåller ett dagsblått högst upp och en stark bärnsten vid horisonten, och det mjuka gråaktiga bandet mellan dem är verkligt, så kämpa inte emot det. Skymningen sänker blått till marin och lägger till magenta och korall. Blå timmen, den korta stunden efter att solen gått, är nästan helt blå och är en av de mest smickrande mörka bakgrunderna som finns.

Om din design lutar helt åt orange och rosa utan något blått alls har du gått från himmel till solnedgång, och koderna för solnedgångsgradient tjänar dig bättre.

Koder för nattens himmel

En natthimmel är sällan helt svart. Städer, månen och atmosfärens svaga sken håller horisonten en aning ljusare än zeniten. Bygg en nattgradient med en nästan svart topp och en djup marin horisont så läses den som himmel; vänd på den och den läses som ett hål. För stjärnor, månsken och många fler mörkblå toner, läs guiden om gradient för nattens himmel.

Vilken himmel som passar vilken design

Den sista punkten spelar större roll på himlar än på de flesta gradienter, eftersom en himmel går från mörk till ljus av design. Placera orden där himlen är lugnast och välj färg för det området, inte för gradienten som helhet. Text på gradient går djupare. I Gradiently sköts detta åt dig: en Mark håller sin lugnaste del bakom orden, och Auto-färg väljer ljus eller mörk text rad för rad ur Markens egen palett.

Himmelsgradienter för varje format

Höga format passar himlar perfekt: en story eller en pin kan visa hela klättringen från horisont till zenit. Breda format trycker ihop den, så håll horisontfärgerna i nedre tredjedelen och låt den övre himlen fylla resten. Det är ett olika upplägg för varje storlek, vilket är varför beskärning av en bild över flera format oftast tappar horisonten.

En himmelsgradient i CSS för varje tid på dygnet

På en webbplats räcker tre anpassade egenskaper för att beskriva vilken himmel som helst. Byt en klass och hela sektionen byter timme, vilket är praktiskt för en hero som följer besökarens lokala tid eller en sida som mörknar medan en berättelse fortskrider.

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

För vinklar, stopppositioner och reservlösningar, se CSS linjär gradient.