# Zonsondergang-kleurverlopen: oranje, koraal en schemering

[Canonical HTML page](https://gradiently.design/nl/guide/sunset-gradient)

De meeste zonsondergang-kleurverlopen gaan op dezelfde plek mis: het midden, waar blauw oranje ontmoet en grijs wordt. Een echte lucht doet dat nooit. Dit is de volgorde van de natuur, met tien paletten die erop zijn gebouwd.

## The short version

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

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.

De volledige volgorde van een zonsondergang: `linear-gradient(180deg, #1e3a8a 0%, #6d28d9 25%, #db2777 50%, #f97316 75%, #fcd34d 100%)`

Van diepblauw boven je hoofd, via violet, roze en oranje, naar goud aan de horizon. Elke stap is een buur van de volgende, dus niets wordt grijs.

| 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` |

De banden van een heldere zonsondergang. Echte luchten verschillen per bewolking, nevel en seizoen, maar de volgorde blijft.

## 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.

- Koraalschemering: `linear-gradient(180deg, #2e2a5a 0%, #8e4a7e 40%, #f07167 75%, #fed9b7 100%)`
- Woestijnavond: `linear-gradient(180deg, #5b3a6e 0%, #c0587e 35%, #f28c5b 70%, #f9d29d 100%)`
- Blauwe uur: `linear-gradient(180deg, #0b1437 0%, #1e3a8a 45%, #6b5b95 75%, #f4a28c 100%)`
- Nagloed: `linear-gradient(180deg, #111827 0%, #3b1f4a 40%, #b1455f 75%, #f29e6d 100%)`
- Tropisch, alleen warm: `linear-gradient(180deg, #ff6f61 0%, #ff9966 55%, #ffd194 100%)`
- Perziknevel: `linear-gradient(180deg, #fbc2c2 0%, #fcd5b5 55%, #fef3c7 100%)`
- Mediterraan: `linear-gradient(180deg, #4a6fa5 0%, #c38fb8 45%, #f6a57f 75%, #ffe0a3 100%)`
- Synthwave: `linear-gradient(180deg, #2b1055 0%, #d53a9d 55%, #ffb86c 100%)`
- Zon aan de horizon: `radial-gradient(circle at 50% 100%, #fff3b0 0%, #ffb347 18%, #ff6f61 40%, #6d2e6b 75%, #1b1b3a 100%)`
- Sintel: `linear-gradient(180deg, #7c2d12 0%, #c2410c 40%, #f59e0b 80%, #fde68a 100%)`

Tien zonsondergang-kleurverlopen. Het radiale verloop zet de zon zelf aan de onderrand van het beeld.

Synthwave is het gestileerde, neonkleurige neefje van het echte werk; [vaporwave-kleuren](https://gradiently.design/nl/guide/vaporwave-colors) en [retro-kleurverlopen](https://gradiently.design/nl/guide/retro-gradients) 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.

- Blauw direct naar oranje: grijs midden: `linear-gradient(180deg, #1d4ed8 0%, #f97316 100%)`
- Via violet en roze: zuiver: `linear-gradient(180deg, #1d4ed8 0%, #7c3aed 30%, #db2777 60%, #f97316 100%)`
- Zwart naar oranje: bruin: `linear-gradient(180deg, #0a0a0a 0%, #f97316 100%)`
- Indigo via pruim: schemering: `linear-gradient(180deg, #1b1b3a 0%, #6d2e6b 45%, #f97316 100%)`

Twee modderige zonsondergangen en hun oplossingen. Beide oplossingen voegen de kleuren toe waar de lucht zelf doorheen gaat.

Wil je minder stops, dan helpt mengen in OKLCH: dat houdt kleuren verzadigd door het midden van de overgang. Zie [OKLCH-kleurverlopen in CSS](https://gradiently.design/nl/guide/css-gradient-oklch) en, voor de theorie, [modderige kleurverlopen](https://gradiently.design/nl/guide/muddy-gradients).

## 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](https://gradiently.design/nl/guide/warm-and-cool-colors) 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.

Een staande evenementposter met een kop bovenaan in een warm avondverloop

Kop hoog in de donkerdere lucht, details lager.

Een verticale uitverkoop-story met een kop boven een warme gloed onderaan

Een story waarin de warme gloed onder de woorden ligt.

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

Het palet Zon aan de horizon als hero van een pagina, met de kop in de donkere lucht boven de gloed.

Voor meer paletten van lucht en landschap, zie [kleurenpaletten uit de natuur](https://gradiently.design/nl/guide/nature-color-palettes), en voor versies met roze in de hoofdrol, [roze kleurverlopen](https://gradiently.design/nl/guide/pink-gradient).

## FAQ

### 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.