De korte versie
- Een zonsondergang-kleurverloop mengt warme kleuren zoals goud, oranje en koraal tot roze, violet en een diep avondblauw.
- Bij een echte zonsondergang loopt de lucht van geel en oranje aan de horizon via rood en roze naar violet en blauw boven je hoofd.
- Wie blauw rechtstreeks in oranje laat overlopen, slaat het roze en violet ertussen over en krijgt grijs in het midden.
- Oranje dat rechtstreeks naar zwart vervaagt wordt bruin, dus schemerverlopen zien er beter uit als ze donkerder worden via pruim of indigo.
- Zet tekst op het donkerdere, bovenste deel van een zonsondergang-kleurverloop, waar het contrast met witte letters het hoogst is.
Op deze pagina
Een zonsondergang gradient mengt warme kleuren, goud, oranje en koraal, tot roze, violet en een diep avondblauw. Het is een van de meest geliefde kleurverlopen in design, omdat iedereen het herkent en bijna iedereen het mooi vindt. Het is ook een van de verlopen die het makkelijkst misgaan. Het geheim is de volgorde te volgen die de lucht echt gebruikt: warm en helder aan de horizon, en koeler via roze en violet naarmate je omhoog kijkt. Sla die middenkleuren over en het verloop wordt grijs.
De natuurlijke volgorde van zonsondergangkleuren
Als de zon laag staat, reist haar licht door veel meer atmosfeer voordat het je bereikt. Onderweg verstrooit de lucht het blauwe licht uit de directe straal, zodat het licht dicht bij de zon geel, oranje en rood aankomt. Hoger aan de hemel, verder van de zon, blijft meer blauw over. Het resultaat is een band van kleuren, gestapeld vanaf de horizon omhoog.
linear-gradient(180deg, #1e3a8a 0%, #6d28d9 25%, #db2777 50%, #f97316 75%, #fcd34d 100%)| Hoogte aan de hemel | Kleur | Voorbeeldcode |
|---|---|---|
| Boven je hoofd | Diepblauw tot indigo | #1e3a8a |
| Hoge lucht | Violet tot mauve | #6d28d9 |
| Midden van de lucht | Roze tot magenta | #db2777 |
| Lage lucht | Oranje tot koraal | #f97316 |
| Horizon | Goud tot lichtgeel | #fcd34d |
Paletten voor zonsondergang-kleurverlopen, met codes
Deze tien paletten volgen allemaal de volgorde van de lucht, van boven naar beneden. Sommige gebruiken het hele bereik; andere alleen de warme kant of alleen de schemering.
Synthwave is het gestileerde, neonkleurige neefje van het echte werk; vaporwave-kleuren en retro-kleurverlopen gaan verder in die richting.
Waarom zonsondergang-kleurverlopen modderig worden, en hoe je dat oplost
Er zijn twee klassieke fouten. De eerste is blauw en oranje direct aan elkaar zetten. Ze staan bijna tegenover elkaar op het kleurenwiel, en een rechte overgang ertussen middelt in het midden uit tot grijs. De lucht doet dat nooit, omdat zij via violet en roze loopt. De tweede is oranje naar zwart laten vervagen voor een donkerdere sfeer. Donker oranje is bruin, dus het verloop leest als roest of modder in plaats van avond.
Wil je minder stops, dan helpt mengen in OKLCH: dat houdt kleuren verzadigd door het midden van de overgang. Zie OKLCH-kleurverlopen in CSS en, voor de theorie, modderige kleurverlopen.
Waar zonsondergang-kleurverlopen werken
Zonsondergangen dragen een duidelijk gevoel: het einde van de dag, warmte, een beetje nostalgie. Dat maakt ze vanzelfsprekend voor sommige klussen en vreemd voor andere. Een heldere zonsondergang over het hele bereik past bij zomerevenementen, reizen, muziek en horeca. Een schemerige, overwegend violette versie past bij avondlanceringen, podcasts en alles wat beschouwend is. Een versie met alleen warme kleuren, goud naar koraal, past bij eten, drinken en uitverkoopmomenten.
- Evenementposters en uitnodigingen: de kleuren zeggen avond nog voordat de datum dat doet.
- Reizen en horeca: het gouden uur is het meest gefotografeerde licht dat er is, en mensen herkennen het.
- Muziekhoezen en playlists: schemerpaletten voelen filmisch en een beetje weemoedig.
- Seizoenscampagnes: een zonsondergang die in de herfst koeler wordt, markeert het seizoen zonder nieuw beeldmateriaal.
Waar ze minder goed passen: serieuze financiën, zorg en alles wat neutraal moet aanvoelen. De warmte leest als vrije tijd. Zonsondergangkleuren zitten ook stevig aan de warme kant van het wiel; warme en koele kleuren legt uit hoe temperatuur de sfeer van een ontwerp verandert.
Zo bouw je je eigen zonsondergang-kleurverloop
- 1
Kies hoeveel van de lucht je wilt
Het hele bereik voor drama, alleen de warme kant voor energie, of alleen de schemering voor rust.
- 2
Zet warm onderaan
Goud en oranje horen bij de horizon. Omgekeerde zonsondergangen kunnen werken, maar ze lezen als gestileerd.
- 3
Sla nooit een buur over
Neem tussen blauw en oranje violet en roze op. Neem tussen oranje en donker pruim of indigo op.
- 4
Geef de warme band minder ruimte
In echte luchten blijven de helderste kleuren dicht bij de horizon. Houd ze in het onderste kwart en het verloop voelt natuurlijk.
- 5
Voeg korrel toe
Lange, gladde luchten krijgen makkelijk banding. Een fijne ruislaag houdt de overgang vloeiend na compressie.
Tekst op een zonsondergang-kleurverloop
De bovenkant van een zonsondergang-kleurverloop is donker en koel, perfect voor witte tekst. De onderkant is helder en warm, perfect voor donkere tekst of voor helemaal niets. Het midden, waar roze oranje ontmoet, is voor beide de lastigste plek. Zet koppen hoog en details laag, of houd de woorden in één rustige band.
Kop hoog in de donkerdere lucht, details lager.
Een story waarin de warme gloed onder de woorden ligt.
.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;
}Voor meer paletten van lucht en landschap, zie kleurenpaletten uit de natuur, en voor versies met roze in de hoofdrol, roze kleurverlopen.
Vragen die mensen stellen
Welke kleuren zitten in een zonsondergang-kleurverloop?
Meestal goud en oranje aan de horizon, dan koraal, roze en magenta, dan violet en een diep blauw boven je hoofd.
Waarom ziet mijn zonsondergang-kleurverloop er modderig uit?
Meestal omdat het blauw rechtstreeks in oranje laat overlopen, of oranje rechtstreeks in zwart. Voeg violet en roze toe tussen blauw en oranje, en maak donkerder via pruim of indigo in plaats van zwart.
Wat is de CSS-code voor een zonsondergang gradient?
Probeer voor een volledige zonsondergang linear-gradient(180deg, #1e3a8a 0%, #6d28d9 25%, #db2777 50%, #f97316 75%, #fcd34d 100%). Elk palet op deze pagina kun je als CSS kopiëren.
Waar zet je tekst op een zonsondergang-kleurverloop?
In het donkerdere, koelere bovenste deel voor witte tekst, of in de lichte warme band voor donkere tekst. Vermijd het midden, waar roze oranje ontmoet.
Geschreven door Gradiently
Het team achter Gradiently, een ontwerptool rond Marks: levende kleurverlopen die alles wat je ontwerpt op jou laten lijken.
Bekijk ons profiel
