Solnedgangsgradienter: oransje, korall og skumring

En solnedgangsgradient blander varme farger, gull, oransje og korall, over i rosa, fiolett og en dyp kveldsblå. Det er en av de mest elskede gradientene i design, fordi alle kjenner den igjen og nesten alle liker den. Det er også en av de letteste å bomme på. Hemmeligheten er å følge rekkefølgen himmelen faktisk bruker: varmt og lyst ved horisonten, kjøligere gjennom rosa og fiolett etter hvert som du ser oppover. Hopper du over mellomfargene, blir gradienten grå.

Den naturlige rekkefølgen av solnedgangsfarger

Når solen står lavt, går lyset gjennom mye mer atmosfære for å nå deg. Underveis sprer luften blått lys ut av den direkte strålen, så lyset nær solen kommer frem som gult, oransje og rødt. Høyere på himmelen, bort fra solen, er det mer blått igjen. Resultatet er et bånd av farger stablet fra horisonten og oppover.

Paletter for solnedgangsgradienter, med koder

Alle disse ti palettene følger himmelens rekkefølge, fra topp til bunn. Noen bruker hele spennet, andre tar bare den varme enden eller bare skumringen.

Synthwave er den stiliserte neonfetteren til den ekte varen, og vaporwave-farger og retrogradienter tar den retningen videre.

Hvorfor solnedgangsgradienter blir grumsete, og hvordan du fikser dem

Det finnes to klassiske feil. Den første er å koble blått og oransje direkte. De er nesten motsetninger på fargehjulet, og en rett overgang mellom dem blir i snitt grå i midten. Himmelen gjør aldri dette, fordi den går gjennom fiolett og rosa. Den andre er å tone oransje inn i svart for en mørkere stemning. Mørk oransje er brunt, så gradienten leses som rust eller gjørme i stedet for kveld.

Hvis du vil ha færre stopp, hjelper det å blande i OKLCH: det holder fargene mettede gjennom midten av overgangen. Se OKLCH-gradienter i CSS og, for teorien, grumsete gradienter.

Hvor solnedgangsgradienter fungerer

Solnedganger bærer en tydelig følelse: slutten på dagen, varme, litt nostalgi. Det gjør dem naturlige til noen jobber og underlige til andre. En lys solnedgang i fullt spenn passer til sommerarrangementer, reise, musikk og servering. En skumringsaktig, for det meste fiolett versjon passer til kveldslanseringer, podkaster og alt som er ettertenksomt. En versjon med bare varme farger, gull over i korall, passer til mat, drikke og salg.

• Arrangementsplakater og invitasjoner: fargene sier kveld før datoen gjør det.
• Reise og servering: den gylne timen er det mest fotograferte lyset som finnes, og folk kjenner det igjen.
• Musikkcover og spillelister: skumringspaletter føles filmatiske og litt vemodige.
• Sesongkampanjer: en solnedgang som blir kjøligere utover høsten, markerer årstiden uten nytt materiell.

Der de passer dårligere: seriøs finans, helse og alt som skal føles nøytralt. Varmen leses som fritid. Solnedgangsfarger ligger også trygt på den varme siden av hjulet, og varme og kalde farger forklarer hvordan temperatur endrer stemningen i et design.

Slik bygger du din egen solnedgangsgradient

1. 1

   Velg hvor mye av himmelen du vil ha

   Hele spennet for dramatikk, bare den varme enden for energi, eller bare skumringen for ro.

2. 2

   Legg det varme nederst

   Gull og oransje hører hjemme nær horisonten. Solnedganger opp ned kan fungere, men de leses som stiliserte.

3. 3

   Hopp aldri over en nabo

   Mellom blått og oransje tar du med fiolett og rosa. Mellom oransje og mørkt tar du med plomme eller indigo.

4. 4

   Gi det varme båndet mindre plass

   I ekte himler klamrer de lyseste fargene seg til horisonten. Å holde dem til den nedre fjerdedelen får gradienten til å føles naturlig.

5. 5

   Legg til korn

   Lange, jevne himler får lett striper. Et fint støylag holder overgangen jevn etter komprimering.

Tekst på en solnedgangsgradient

Toppen av en solnedgangsgradient er mørk og kjølig, perfekt for hvit tekst. Bunnen er lys og varm, perfekt for mørk tekst eller for ingenting i det hele tatt. Midten, der rosa møter oransje, er det vanskeligste stedet for begge. Plasser overskrifter høyt og detaljer lavt, eller hold ordene i ett rolig bånd.

.hero {
  background-color: #1b1b3a;
  background-image: radial-gradient(circle at 50% 100%, #fff3b0 0%, #ffb347 18%, #ff6f61 40%, #6d2e6b 75%, #1b1b3a 100%);
  color: #ffffff;
}
.hero h1 {
  /* keep the headline in the dark upper half */
  margin-top: 12vh;
}

For flere paletter fra himmel og landskap, se fargepaletter fra naturen, og for versjoner ledet av rosa, rosa gradienter.