Geel verloop: heldere codes die niet groen worden

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.

Hetzelfde grijze-midden-probleem treft alle tegenovergestelde kleuren, en modderige verlopen 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.

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.

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 zien hoe je de glans nabootst.

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.

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.

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

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 heeft de drempels.

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 wat het uitstraalt, en zijn oranje verlopen de natuurlijke buur.