CSS-kleurverloop met OKLCH-interpolatie voor vloeiender overgangen

CSS-kleurverloop met OKLCH betekent dat je de browser de tussenkleuren van een kleurverloop laat berekenen in de OKLCH-kleurruimte in plaats van in sRGB. Je voegt twee woorden toe na de richting: linear-gradient(90deg in oklch, #2563eb, #facc15). Het resultaat is een overgang waarvan de lichtheid gelijkmatig verandert en waarvan het midden levendig blijft, in plaats van weg te zakken in de grijze, modderige band waarvoor gewone sRGB-overgangen bekendstaan.

Waarom sRGB-kleurverlopen grijs worden

sRGB is ontworpen om schermkleuren efficiënt te coderen, niet om overeen te komen met hoe mensen zien. Twee sRGB-kleuren mengen betekent hun rood-, groen- en blauwgetallen middelen, en halverwege een blauw en een geel is een set middelmatige getallen die grijs oogt. Ook de lichtheid verandert ongelijk, dus sommige overgangen bollen in het midden helderder of donkerder. De ontwerpkant van dit probleem staat in modderige kleurverlopen.

Oklab en zijn cilindrische vorm, OKLCH, zijn ontworpen zodat gelijke stappen in hun getallen voor het oog ongeveer gelijke stappen lijken. Mengen erin houdt de waargenomen lichtheid gestaag bewegen, en daarom zien kleurverlopen op deze manier soepeler en helderder uit bij dezelfde eindpunten.

De syntaxis: in oklch en in oklab

De interpolatiemethode staat in het eerste argument, voor of na de richting. Het werkt in linear-gradient(), radial-gradient(), conic-gradient() en hun herhalende vormen, en ook in color-mix(). Je kleurstops mogen hex blijven; alleen de wiskunde verandert.

/* direction first or interpolation first: both are valid */
background: linear-gradient(135deg in oklch, #7c3aed, #f97316);
background: linear-gradient(in oklch 135deg, #7c3aed, #f97316);

/* works in the other gradient functions too */
background: radial-gradient(in oklab circle at 30% 30%, #22d3ee, #1e1b4b);
background: conic-gradient(in oklch from 90deg, #ef4444, #3b82f6, #ef4444);

oklab of oklch: welke kies je

Beide zijn perceptueel; ze verschillen in het pad dat ze nemen. Oklab trekt een rechte lijn tussen de twee kleuren, dus het midden kan wat verzadiging verliezen als de uiteinden ver uit elkaar op het kleurenwiel liggen, maar het dwaalt nooit door een tint waar je niet om vroeg. OKLCH behoudt chroma, de intensiteit van de kleur, en loopt rond de tintencirkel, dus het midden blijft verzadigd maar passeert de tussenliggende tinten. Blauw naar geel in oklch gaat door groen. Soms is dat het punt; soms is het een verrassing.

De tintrichting kiezen

Tussen twee tinten zijn er twee wegen rond het kleurenwiel. Standaard neemt oklch de shorter hue. Je kunt longer hue vragen, of een richting afdwingen met increasing hue of decreasing hue. Het sleutelwoord staat direct na de kleurruimte.

longer hue is de nettste manier om een spectrum te tekenen: twee stops in plaats van zeven. Zo maak je ook een volledig regenboogkleurverloop waarvan alle kleuren even helder aanvoelen, wat een sRGB-regenboog nooit helemaal lukt.

Kleuren schrijven in oklch()

Je kunt ook de stops zelf in OKLCH schrijven: oklch(L C H), waarbij L de lichtheid is van 0% tot 100%, C het chroma van 0 tot ongeveer 0,37 en H de tinthoek. L gelijk houden over stops geeft een kleurverloop van gelijke lichtheid, wat op het oog in hex moeilijk is. oklch.com is een goede kiezer om waarden te vinden.

.band {
  /* same lightness and chroma, only the hue changes */
  background: linear-gradient(
    90deg in oklch,
    oklch(68% 0.17 300),
    oklch(68% 0.17 20),
    oklch(68% 0.17 70)
  );
}

Browserondersteuning en terugvallen

Interpolatiemethoden en oklch()-kleuren worden ondersteund in de huidige Chrome, Edge, Safari en Firefox. Browsers slaan elke declaratie over die ze niet kunnen lezen, dus de terugval is simpelweg de gewone versie eerst schrijven. Waar de verbeterde regel wordt genegeerd, blijft het sRGB-kleurverloop.

.hero {
  background-color: #7c3aed;
  background-image: linear-gradient(135deg, #7c3aed, #f97316);
  background-image: linear-gradient(135deg in oklch, #7c3aed, #f97316);
}

Wil je verder gaan, dan combineren perceptuele overgangen goed met korrel om kleurverloopbanding te voorkomen, en met de stop- en hinttechnieken in de gids over CSS lineaire kleurverlopen.