Solnedgångsgradienter: orange, korall och skymningspaletter

En solnedgångsgradient blandar varma färger, guld, orange och korall, till rosa, violett och ett djupt kvällsblått. Den är en av de mest älskade gradienterna i design, eftersom alla känner igen den och nästan alla gillar den. Den är också en av de lättaste att göra fel. Hemligheten är att följa den ordning himlen faktiskt använder: varmt och ljust vid horisonten, svalare via rosa och violett när du tittar uppåt. Hoppar du över mellanfärgerna blir gradienten grå.

Solnedgångsfärgernas naturliga ordning

När solen står lågt måste ljuset ta sig genom betydligt mer atmosfär för att nå dig. På vägen sprider luften bort blått ljus ur den direkta strålen, så ljuset nära solen anländer gult, orange och rött. Högre upp på himlen, längre från solen, finns mer blått kvar. Resultatet är ett band av färger som ligger i lager från horisonten och uppåt.

Paletter för solnedgångsgradienter, med koder

De här tio paletterna följer alla himlens ordning, uppifrån och ned. Vissa använder hela skalan, andra bara den varma änden eller bara skymningen.

Synthwave är den stiliserade neonkusinen till det äkta; vaporwave-färger och retrogradienter tar den riktningen längre.

Varför solnedgångsgradienter blir grumliga, och hur du fixar det

Det finns två klassiska misstag. Det första är att förena blått och orange direkt. De är nästan motsatser på färgcirkeln, och en rak blandning dem emellan ger grått i mitten. Himlen gör aldrig så, eftersom den passerar violett och rosa. Det andra är att tona orange till svart för ett mörkare stänk. Mörk orange är brun, så gradienten ser ut som rost eller lera snarare än kväll.

Vill du ha färre stopp hjälper det att blanda i OKLCH: det håller färgerna mättade genom mitten av blandningen. Läs OKLCH-gradienter i CSS och, för teorin, grumliga gradienter.

Där solnedgångsgradienter fungerar

Solnedgångar bär en tydlig känsla: dagens slut, värme, lite nostalgi. Det gör dem naturliga för vissa uppdrag och udda för andra. En ljus solnedgång över hela skalan passar sommarevenemang, resor, musik och restaurangbranschen. En skymningsdämpad, mestadels violett version passar kvällslanseringar, poddar och allt eftertänksamt. En bara varm version, guld till korall, passar mat, dryck och rea.

• Evenemangsaffischer och inbjudningar: färgerna säger kväll innan datumet gör det.
• Resor och restaurangbranschen: gyllene timmen är det mest fotograferade ljuset som finns, och folk känner igen det.
• Musikomslag och spellistor: skymningspaletter känns filmiska och lite vemodiga.
• Säsongskampanjer: en solnedgång som blir svalare genom hösten markerar säsongen utan nytt bildmaterial.

Där de passar sämre: allvarlig finans, vård och allt som ska kännas neutralt. Värmen läses som fritid. Solnedgångsfärger ligger dessutom stadigt på den varma sidan av cirkeln; varma och kalla färger förklarar hur temperatur ändrar en designs stämning.

Så bygger du din egen solnedgångsgradient

1. 1

   Välj hur mycket av himlen du vill ha

   Hela skalan för dramatik, bara den varma änden för energi, eller bara skymningen för lugn.

2. 2

   Lägg det varma längst ned

   Guld och orange hör hemma nära horisonten. Upp och nedvända solnedgångar kan fungera, men de upplevs som stiliserade.

3. 3

   Hoppa aldrig över en granne

   Mellan blått och orange, ta med violett och rosa. Mellan orange och mörkt, ta med plommon eller indigo.

4. 4

   Ge det varma bandet mindre plats

   På verkliga himlar ligger de ljusaste färgerna tätt vid horisonten. Håller du dem i den nedre fjärdedelen känns gradienten naturlig.

5. 5

   Lägg till korn

   Långa, mjuka himlar får lätt band. Ett fint brusskikt håller övergången jämn efter komprimering.

Text på en solnedgångsgradient

Toppen av en solnedgångsgradient är mörk och sval, perfekt för vit text. Botten är ljus och varm, perfekt för mörk text eller ingen alls. Mitten, där rosa möter orange, är det svåraste stället för båda. Placera rubriker högt och detaljer lågt, eller håll texten i ett lugnt band.

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

Fler himmels- och landskapspaletter finns i färgpaletter från naturen, och för versioner som utgår från rosa, se rosa gradienter.