# Geel verloop: heldere codes die niet groen worden

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

Geel is de kleur die een verloop het vaakst verraadt: één verkeerde stop en zonlicht wordt limoen, of goud wordt kaki. Dit is waarom het gebeurt, met een set codes die tot het einde warm blijven.

## The short version

- Een geel verloop wordt groen als het richting cyaan, turkoois of blauw loopt, omdat de kleuren tussen geel en blauw door groen gaan.
- Donkere gelen drijven af naar olijf en kaki, dus verdiep geel met amber, oranje of bruin in plaats van grijs of zwart.
- Geel blijft het zonnigst als de andere stops warm zijn: crème, perzik, oranje, roze of goud.
- Witte tekst werkt bijna nooit op geel; bijna zwart of diepbruin leest veel beter.
- Om geel en blauw in één verloop te verbinden zet je wit, roze of violet ertussen, zodat het midden nooit op groen uitkomt.

Een **geel verloop** ziet er helder en vrolijk uit als elke stop warm is: crème, boter, citroen, goud, oranje. Het gaat op twee voorspelbare manieren mis. Laat je het richting blauw of turkoois lopen, dan wordt het midden groen; verdonker je het met grijs, dan wordt het olijf. Houd de tint aan de warme kant van geel, verdiep met amber in plaats van zwart, en het blijft zonlicht van begin tot eind. De codes hieronder zijn op die regel gebouwd.

## Waarom gele verlopen groen of modderig worden

Geel zit op het kleurenwiel vlak naast groen, veel dichterbij dan de meeste mensen verwachten. Dat maakt het kwetsbaar in drie situaties.

- **Mengen richting koele kleuren.** Tussen geel en cyaan, turkoois of blauw moet de browser door groen. Een zonnig geel naar hemelsblauw krijgt een limoen- of saliekleurige streep in het midden.
- **Verdonkeren met zwart of grijs.** Ons oog leest een donker, weinig verzadigd geel als olijf of kaki en niet als ‘donkergeel’. Er bestaat geen diep geel dat nog geel lijkt.
- **Beginnen met een citroen die al naar groen neigt.** Zure citroengelen zoals `#e4f04a` zien er alleen fris uit, maar trekken elke naburige stop richting limoen.

### Wordt groen of olijf

- Geel direct naar hemelsblauw of turkoois
- Geel verdonkerd met grijs of zwart
- Een koele citroen als helderste stop
- Geel naar groen zonder warme stop

### Blijft zonnig

- Geel naar crème, perzik, oranje of roze
- Geel verdiept met amber en bruin
- Een warm geel zoals `#facc15` als helderste stop
- Wit of roze tussen geel en blauw

Hetzelfde grijze-midden-probleem treft alle tegenovergestelde kleuren, en [modderige verlopen](https://gradiently.design/nl/guide/muddy-gradients) behandelt het in het algemeen. Geel laat het gewoon het eerst zien, omdat groen zo dichtbij is.

## Codes voor heldere gele verlopen

Dit zijn de luide: zomer, actiebanners, kindermerken, festivals, waarschuwingsborden mooi gedaan. Elk koppelt geel aan een warmere partner, zodat er beweging is zonder naar groen af te drijven.

- Citroensorbet: `linear-gradient(135deg, #fef08a 0%, #facc15 100%)`
- Zonnebloem: `linear-gradient(135deg, #fde047 0%, #f59e0b 100%)`
- Geel naar mandarijn: `linear-gradient(120deg, #facc15 0%, #fb923c 100%)`
- Roze limonade: `linear-gradient(135deg, #fde047 0%, #f472b6 100%)`
- Middagzon: `radial-gradient(circle at 30% 30%, #fffbeb 0%, #fde047 35%, #f59e0b 100%)`
- Hittegolf: `linear-gradient(180deg, #fef9c3 0%, #fde047 45%, #f97316 100%)`

Zes heldere gele verlopen. Elke partnerkleur is warmer dan het geel, en dat houdt ze zuiver.

Fel geel is vermoeiend in grote hoeveelheden, dus gebruik deze op posts en banners in plaats van op een hele website. Op een story van 1080×1920 geeft een geel verloop dat onderaan naar oranje vervaagt het oog een plek om te landen en blijft het helderste deel boven bij de kop.

## Lichtgele verlopen: boter en crème

Bleke gelen gedragen zich als warm papier. Ze zijn uitstekende achtergronden voor menu's, uitnodigingen, nieuwsbrieven en alles met veel leeswerk, omdat donkere tekst er prettig op staat. Houd minstens één stop dicht bij wit, zodat het geel als licht leest en niet als een tint over alles.

- Crèmepapier: `linear-gradient(180deg, #fffdf5 0%, #fef3c7 100%)`
- Boter: `linear-gradient(135deg, #fefce8 0%, #fde68a 100%)`
- Vla en perzik: `linear-gradient(135deg, #fef9c3 0%, #fed7aa 100%)`
- Raamlicht: `radial-gradient(circle at 70% 20%, #fef08a 0%, #fefce8 55%, #fffdf7 100%)`

Zachte gelen voor lange teksten en milde merken. Ze passen goed bij antraciet, bruin en diepgroene tekst.

## Gouden en donkergele verlopen zonder olijf

Om geel rijk te laten voelen verdonker je het niet. Je verschuift het. Beweeg de diepere stops richting amber, oker en bruin, en geel wordt goud, honing en mosterd in plaats van kaki. Voor metaalachtige afwerkingen laat [gouden verlopen](https://gradiently.design/nl/guide/gold-gradient-design) zien hoe je de glans nabootst.

- Honing: `linear-gradient(135deg, #fde68a 0%, #d97706 55%, #78350f 100%)`
- Mosterd: `linear-gradient(160deg, #facc15 0%, #ca8a04 50%, #713f12 100%)`
- Geborsteld goud: `linear-gradient(135deg, #fef3c7 0%, #e9b949 40%, #a16207 75%, #fde68a 100%)`
- Goud op donker: `radial-gradient(circle at 75% 25%, #fde047 0%, #b45309 30%, #1c1208 75%)`

Elke diepe stop beweegt richting amber of bruin. Het resultaat leest als goud en niet als olijf.

> **Let op de schaduwkleur** Als je een geel object in een ontwerp schaduwt met een grijze of zwarte overlay, ziet het er olijf uit. Schaduw geel liever met doorschijnend amber of bruin.

## Geel-blauwe verlopen zonder groen midden

Geel en blauw zijn een klassiek paar, maar een rechte overgang ertussen geeft een groene band. Je hebt drie goede opties: zet een lichte stop ertussen, laat de overgang via roze en violet lopen, of houd de twee kleuren als vlakken uit elkaar in plaats van ze te mengen.

- Vermijd: limoenmidden: `linear-gradient(135deg, #facc15 0%, #60a5fa 100%)`
- Via crème: `linear-gradient(135deg, #fde047 0%, #fffbeb 45%, #93c5fd 100%)`
- Via roze: `linear-gradient(135deg, #fde047 0%, #f9a8d4 45%, #818cf8 100%)`
- Geel licht op marineblauw: `radial-gradient(circle at 80% 20%, #facc15 0%, #1e3a8a 40%, #0b1437 100%)`

De eerste overgang toont het probleem. De andere drie verbinden geel en blauw zonder ooit door groen te gaan.

In moderne CSS kun je de browser ook de lange weg om het kleurenwiel laten nemen. Interpoleren in OKLCH met `longer hue` stuurt geel naar blauw via oranje, roze en violet in plaats van groen. Ondersteuning en syntaxis staan in [CSS-verlopen in OKLCH](https://gradiently.design/nl/guide/css-gradient-oklch).

```css
.banner {
  /* fallback for older browsers: route through pink by hand */
  background: linear-gradient(90deg, #fde047, #f9a8d4, #818cf8);
}

@supports (background: linear-gradient(in oklch, red, blue)) {
  .banner {
    background: linear-gradient(in oklch longer hue 90deg, #fde047, #818cf8);
  }
}
```

De lange route om het tintenwiel vermijdt groen. Houd de handgemaakte fallback voor browsers zonder interpolatie in kleurruimtes.

## Tekst op een geel verloop

Geel is de lichtste verzadigde kleur die er is, dus witte tekst verdwijnt erop. Wit op `#facc15` meet ongeveer 1,5 op 1, terwijl een diepbruin als `#422006` op hetzelfde geel boven de 9 op 1 haalt. Gebruik bijna overal donkere tekst en bewaar wit voor de diepste gouden tinten. [Kleurcontrast en toegankelijkheid](https://gradiently.design/nl/guide/color-contrast-accessibility) heeft de drempels.

| Achtergrond | Witte tekst | Bruine tekst #422006 |
| --- | --- | --- |
| Citroen `#fde047` | Faalt zwaar | Circa 11:1 |
| Zonnebloem `#facc15` | Circa 1,5:1, faalt | Circa 9,5:1 |
| Donkergoud `#ca8a04` | Circa 2,9:1, faalt | Slaagt |
| Oker `#a16207` | Circa 4,9:1, slaagt | Zwak |
| Brons `#854d0e` | Circa 6,9:1, slaagt | Faalt |

Metingen van effen kleur. Controleer op een verloop het lichtste deel achter elke tekstregel.

Een boerderijwinkelpost met donkerbruine kop op een warme geel-oranje verloopachtergrond

Donkere, warme tekst op zonnig geel. Het leest direct en houdt de vrolijke sfeer.

In Gradiently maakt Auto-inkt die keuze voor je: voor elke regel kiest het lichte of donkere tekst uit het eigen palet van de Mark, zodat een geel ontwerp niet bij elk formaat een handmatige contrastcontrole nodig heeft. Hoort geel bij je identiteit, dan behandelt de [betekenis van de kleur geel](https://gradiently.design/nl/guide/yellow-color-meaning) wat het uitstraalt, en zijn [oranje verlopen](https://gradiently.design/nl/guide/orange-gradient) de natuurlijke buur.

## FAQ

### Waarom ziet mijn gele verloop er groen uit?

Of het loopt richting een koele kleur zoals blauw of turkoois, of het geel zelf neigt naar citroen. Gebruik warmere partnerstops zoals oranje, roze of crème.

### Hoe maak ik een donkergeel verloop dat niet olijf is?

Verdiep geel met amber, oker en bruin in plaats van grijs of zwart. Dan wordt het goud of honing in plaats van kaki.

### Welke kleur tekst hoort op een gele achtergrond?

Bijna zwart, antraciet of diepbruin. Witte tekst faalt op contrast bij bijna elk helder geel.

### Hoe meng ik geel en blauw in één verloop?

Zet crème, wit of roze ertussen, of interpoleer in OKLCH met `longer hue` zodat de overgang via warme kleuren loopt in plaats van groen.

### Wat is een goede css-code voor een geel verloop?

`linear-gradient(135deg, #fde047 0%, #f59e0b 100%)` is een betrouwbaar warm geel dat nooit naar groen afdrijft.