Waarom kleurverlopen grijs worden in het midden, en wat je eraan doet

Een modderig kleurverloop is een verloop dat in het midden grijs, bruin of dof wordt, ook al zijn beide kleuren helder. Dat gebeurt omdat de meeste tools kleuren mengen in de sRGB-kleurruimte, waarbij de waarden voor rood, groen en blauw in rechte lijnen worden gemengd. Liggen de twee kleuren tegenover elkaar op het kleurenwiel, dan komen die rechte lijnen bij grijs samen. De oplossing is de route kiezen die het verloop neemt: voeg een kleur in het midden toe, meng in OKLCH, of gebruik tinten die dichter bij elkaar liggen.

Waarom tegenovergestelde kleuren grijs worden

Kijk naar de cijfers. Puur blauw is rood 0, groen 0, blauw 255. Puur geel is rood 255, groen 255, blauw 0. Halverwege komt elk kanaal uit op ongeveer 128, en dat is #808080: een middengrijs. Hetzelfde gebeurt met rood en cyaan, oranje en azuur, of elk ander complementair paar. Wiskundig gezien loopt de rechte lijn ertussen dwars door de grijsas.

Een tweede, subtieler probleem is de donkere dip. Blauw naar rood in sRGB loopt door #800080, een paars dat donkerder is dan beide uiteinden, waardoor het midden van het verloop op een blauwe plek lijkt. De kleuren zijn niet tegenovergesteld, maar het verloop verliest toch helderheid waar ze elkaar raken.

Oplossing 1: voeg een tussenstop toe

De simpelste oplossing werkt in elke tool en elk formaat: kies de kleur die je in het midden wilt en zet die er zelf neer. Kies een heldere, verzadigde kleur die op het kleurenwiel tussen de twee uiteinden ligt. Tussen blauw en geel is dat teal of groen. Tussen oranje en blauw neemt roze de warme route, de route die de meeste zonsondergangverlopen gebruiken.

Oplossing 2: meng in OKLCH

OKLCH beschrijft kleur als lichtheid, chroma (intensiteit) en tint, en is zo ontworpen dat gelijke stappen er voor mensen als gelijke veranderingen uitzien. Mengen in OKLCH houdt de chroma hoog en draait rond het kleurenwiel in plaats van er dwars doorheen te snijden, zodat het verloop nooit in grijs wegzakt. In CSS vraag je erom met één zinsdeel. Je kunt ook kiezen welke kant je het wiel rond gaat.

/* Default for hex colours: sRGB, grey in the middle */
.muddy   { background: linear-gradient(90deg, #0000ff, #ffff00); }

/* OKLCH, shorter way round the wheel: through teal and green */
.clean   { background: linear-gradient(90deg in oklch, #0000ff, #ffff00); }

/* OKLCH, longer way round: through magenta, red and orange */
.sunset  { background: linear-gradient(90deg in oklch longer hue, #0000ff, #ffff00); }

/* OKLab: straight line, but with even lightness */
.even    { background: linear-gradient(90deg in oklab, #0000ff, #ffff00); }

OKLab is ook de moeite van het kennen waard. Het is de standaard voor moderne CSS-kleursyntaxis en geeft vloeiende, gelijkmatige verlopen, maar omdat het nog steeds in een rechte lijn reist, verliezen echte tegenpolen intensiteit in het midden. Gebruik OKLab voor kleuren die al dicht bij elkaar liggen; gebruik OKLCH of een tussenstop voor kleuren die ver uit elkaar liggen. Zie voor de volledige syntaxis OKLCH-kleurverlopen in CSS, of verken de ruimte op oklch.com.

Oplossing 3: kies tinten die dichter bij elkaar liggen

De betrouwbaarste manier om modder te vermijden is er niet om vragen. Kleuren die op het wiel naast elkaar liggen, zoals blauw en violet of oranje en roze, mengen schoon in elke kleurruimte, omdat hun rechte lijn nooit in de buurt van grijs komt. Daarom geven analoge kleuren de veiligste kleurverlopen, en vragen complementaire paren zorg; zie complementaire kleuren.

Oplossing 4: let op de lichtheid

Modder is niet alleen grijs. Een verloop kan ook dof ogen wanneer de lichtheid in het midden inzakt, of wanneer het ene uiteinde veel donkerder is dan het andere en de overgang in een smalle band plaatsvindt. Houd de lichtheid van je stops ongeveer gelijk, of laat haar gestaag in één richting veranderen, en geef de overgang ruimte. Een stoppositie van 40% of 60% oogt vaak natuurlijker dan een mechanische 50%.

Modderigheid wordt erger in mesh-kleurverlopen, waar meerdere kleuren tegelijk samenkomen. Voor elke overlap gelden dezelfde regels: houd buren dicht bij elkaar en leg een brug tussen tegenpolen.

Begin je liever met een verloop dat al in balans is, zoek dan in de Markt op kleurwoorden als ‘blauw en geel’ of ‘diep teal’ en ontwerp met elke Mark die je vindt.