Kleurverloop-interpolatie: sRGB versus OKLab uitgelegd

Interpolatie van kleurverlopen is hoe de kleuren tussen je stops worden berekend. Jij kiest blauw aan de ene kant en geel aan de andere, en de software moet elke kleur ertussen verzinnen door in een kleurruimte een lijn tussen de twee kleuren te trekken. Welke ruimte hij gebruikt verandert wat je ziet. Meng in sRGB en blauw naar geel gaat door vlak grijs. Meng in OKLCH en het gaat door een helder turquoise. Dezelfde stops, een heel ander kleurverloop.

Wat interpolatie van kleurverlopen betekent

Elke kleur is te beschrijven als een punt in een ruimte. In sRGB zijn de drie assen rood, groen en blauw. In OKLab zijn het helderheid en twee tegenstellingsassen, groen naar rood en blauw naar geel. In OKLCH zijn het helderheid, chroma (hoe kleurrijk) en tint (de hoek rond het wiel). Interpoleren betekent van het ene punt naar het andere lopen. Een rechte wandeling door de ene ruimte kan in een andere een bocht zijn, of een omweg door grijs.

sRGB, OKLab en OKLCH naast elkaar

Waarom sRGB-kleurverlopen grijs of modderig worden

sRGB is ontworpen voor schermen, niet voor het oog. De getallen zijn gammagecodeerd en de assen sluiten niet aan op hoe wij tint of helderheid zien. Als twee kleuren aan tegenovergestelde kanten van het wiel liggen, kruist de rechte lijn ertussen vlak bij het neutrale midden, zodat het midden zijn kleur verliest. Blauw en geel middelen tot #808080. Dit is de hoofdoorzaak van modderige kleurverlopen, en daarom werkt het instinct van een ontwerper om een overbruggende kleur toe te voegen: de extra stop buigt het pad om het grijs heen.

OKLab: gelijke stappen voor het oog

OKLab, in 2020 gepubliceerd door Björn Ottosson, is gebouwd zodat gelijke afstanden als gelijke verschillen aanvoelen. Het praktische resultaat is een kleurverloop waarvan de helderheid gelijkmatig verandert van begin tot eind, zonder donkere duik of heldere bult in het midden. Het volgt nog steeds een rechte weg, dus twee echte tegenpolen verliezen wat kleur in het midden, maar veel minder dan in sRGB. Moderne CSS gebruikt OKLab standaard zodra een kleur in een kleurverloop in een nieuwere syntaxis is geschreven, zoals oklch().

OKLCH: de kleur levend houden

OKLCH is dezelfde ruimte als OKLab, beschreven in poolvorm: helderheid, chroma en een tinthoek. Erin interpoleren loopt om het wiel heen, dus de tussenliggende kleuren behouden hun verzadiging. Dat is ideaal voor levendige, merkgerichte kleurverlopen en regenboogkleurverlopen. Je kunt ook kiezen welke kant om het wiel je op gaat met shorter hue (de standaard), longer hue, increasing hue of decreasing hue. De OKLCH-gids legt de ruimte dieper uit.

Zo stel je interpolatie van kleurverlopen in CSS in

Voeg in <ruimte> toe voor de stops, na een hoek of vorm. Browsers die het niet begrijpen negeren de hele declaratie, dus schrijf eerst een sRGB-versie als terugval. Elke ruimte en tintsleutelwoord staat in de naslag van MDN over kleurinterpolatie en CSS-kleurverlopen in OKLCH heeft meer recepten.

.hero {
  /* Fallback for older browsers: a bridge stop avoids the grey middle */
  background: linear-gradient(135deg, #2563eb, #c026d3, #f97316);
  /* Modern browsers: let OKLCH keep the colour */
  background: linear-gradient(135deg in oklch, #2563eb, #f97316);
}

.radial {
  background: radial-gradient(circle at 30% 30% in oklab, #fde68a, #0f766e);
}

.conic-rainbow {
  background: conic-gradient(in oklch longer hue, #ef4444, #ef4444);
}

Welke kleurruimte je kiest

1. 1

   Kies standaard OKLab

   Voor de meeste menging van twee of drie kleuren geeft het het vloeiendste resultaat zonder verrassingen.

2. 2

   Gebruik OKLCH voor verre of levendige kleuren

   Als de kleuren ver uit elkaar op het wiel liggen en je wilt dat het midden helder blijft.

3. 3

   Houd sRGB om oud werk te evenaren

   Moet een kleurverloop er identiek uitzien als een bestaand bestand of beeld, meng dan in dezelfde ruimte als waarin het is gemaakt.

4. 4

   Controleer het middenpunt

   Welke ruimte ook, kijk naar de kleur halverwege. Is die grijs of een tint die je niet verwachtte, verander dan de ruimte of voeg een stop toe.

Interpolatie is maar één onderdeel van een goede overgang, waar de stops staan telt net zo zwaar, en dat staat in kleurstops van kleurverlopen. Sla je liever de wiskunde over, dan zijn de Marks van Gradiently afgewerkte kleurverloopachtergronden die op elk formaat renderen waarin je ontwerpt, en de ontwikkelaarsdocs laten zien hoe ChatGPT of Claude Marks kan zoeken en ontwerpen kan maken die in de Studio openen.