Levendige kleurverlopen: verzadigde codes die niet trillen

Een levendig kleurverloop is fel en verzadigd zonder te zoemen als twee regels gelden: elke kleur ligt dicht bij haar buur op het kleurenwiel en elke stap verandert duidelijk in helderheid. Breek je de eerste, dan wordt het midden modderig; breek je de tweede, door tegenovergestelde tinten van gelijke helderheid naast elkaar te zetten, dan lijkt de rand te schemeren. De twaalf codes hieronder volgen beide regels, dus ze zijn luid zoals een poster luid is, niet zoals een migraine.

Twaalf codes voor levendige kleurverlopen

Waarom sommige felle kleurverlopen trillen

Zet een verzadigd rood direct tegen een verzadigd blauw van gelijke helderheid en de grens lijkt te flikkeren, alsof de twee kleuren niet kunnen beslissen welke vooraan staat. Ontwerpers noemen het chromatische trilling. Het is het sterkst bij harde randen, fijne lijnen en gekleurde tekst, en het is waarom rode letters op een blauwe achtergrond zo vermoeiend zijn om te lezen. De kleuren zelf zijn prima; het is de combinatie van tegengestelde tint en gelijke helderheid, elkaar rakend, die het veroorzaakt.

Er zijn twee oplossingen. Houd de kleuren uit elkaar met een donkerdere of lichtere stap ertussen, zoals rechts, of kies buren in plaats van tegenpolen. Complementaire kleuren legt uit wanneer tegenpolen de moeite waard zijn.

Regels om je eigen levendige kleurverloop te maken

Modder is de andere manier waarop felle kleurverlopen mislukken. Meng twee verzadigde tegenpolen in gewoon sRGB en de kleur halverwege zakt richting grijs, wat staat in modderige kleurverlopen en, technischer, interpolatie van kleurverlopen. Verzadiging zelf is een draaiknop, geen schakelaar; verzadiging in ontwerp laat zien hoe je haar instelt.

Levendige kleurverlopen in CSS

Moderne browsers kunnen mengen in een perceptuele kleurruimte door in oklch aan het kleurverloop toe te voegen. Dat houdt het midden van een breed verloop even levendig als de uiteinden. Geef oudere browsers eerst een hex-versie.

.hero {
  /* fallback: neighbouring hues, stepped lightness */
  background: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 50%, #db2777 100%);
}

@supports (background: linear-gradient(in oklch, red, blue)) {
  .hero {
    background: linear-gradient(135deg in oklch, #1d4ed8 0%, #db2777 100%);
  }
}

.hero h1 {
  color: #ffffff; /* white or near black, never another saturated colour */
}

Waar levendige kleurverlopen het best werken

Levendige kleur verdient aandacht, dus zet haar in waar aandacht de hele taak is: een scrollende feed, een thumbnail tussen twintig andere, een poster aan de overkant van de straat. Ze werkt minder goed waar mensen lang moeten lezen, zoals documenten, dashboards en lange artikelen, waar een verzadigd vlak het oog binnen een paar alinea’s vermoeit. Beperk het levendige kleurverloop daar tot een kop of één knop en laat een rustig oppervlak de rest dragen.

Druk is de enige plek waar je een schok mag verwachten. De felste schermkleuren, vooral elektrisch blauw, knalroze en zuurgroen, liggen buiten wat CMYK-inkten kunnen weergeven en komen merkbaar doffer terug op papier. RGB versus CMYK legt uit waarom; kies zelf iets diepere versies en bestel een proef voor een drukrun.

Woorden op een levendig kleurverloop

Verzadigde achtergronden schommelen in helderheid van het ene uiteinde naar het andere, dus een enkele tekstkleur die leesbaar is aan het donkere uiteinde kan aan het lichte uiteinde verdwijnen. Gebruik alleen wit of bijna zwart, zet de kop waar het verloop het diepst of lichtst is en controleer het contrast op het slechtste punt, niet op het gemiddelde. Kleurcontrast en toegankelijkheid heeft de cijfers om naar te streven.

Hier helpt een Gradiently Mark bij felle kleur: hij weet waar de woorden staan, verdiept of verlicht de kleur nabij de letters, en Auto-inkt kiest per regel lichte of donkere tekst uit zijn eigen palet. Een verzadigde look blijft leesbaar op elk formaat zonder vak of schaduw achter de kop. Voor neonlooks specifiek, zie neonkleurverlopen; voor het andere uiteinde van de draaiknop, subtiele kleurverlopen.