# Kleurverloop-interpolatie: sRGB versus OKLab uitgelegd [Canonical HTML page](https://gradiently.design/nl/guide/gradient-interpolation) Kies blauw en geel, meng ze en het midden wordt grijs. Dat is niet het falen van je kleuren, het is de wiskunde van de kleurruimte die de menging doet, en sinds CSS Color 4 kun je die veranderen. ## The short version - Interpolatie van kleurverlopen is de methode waarmee elke kleur tussen twee stops wordt berekend, en de kleurruimte waarin dat gebeurt verandert het resultaat. - Mengen in sRGB beweegt in een rechte lijn door rode, groene en blauwe waarden, dus tegengestelde kleuren zoals blauw en geel gaan door grijs. - OKLab is zo ontworpen dat gelijke stappen voor het oog als gelijke veranderingen aanvoelen, wat een vloeiendere, gelijkmatigere helderheid over een kleurverloop geeft. - OKLCH mengt helderheid, chroma en tint apart, dus kleuren blijven verzadigd en reizen om het kleurenwiel in plaats van door het grijze midden. - In CSS kies je de ruimte in het kleurverloop zelf, bijvoorbeeld `linear-gradient(in oklch, #2563eb, #f97316)`. **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. - Begin: blauw: #0000ff - Midden in sRGB: #808080 - Midden, lineair sRGB: #bcbcbc - Midden in OKLab: #6cabc7 - Midden in OKLCH: #00cfbd - Eind: geel: #ffff00 De kleur halverwege tussen puur blauw en puur geel in vier ruimten. sRGB landt op dood grijs, OKLCH op een levendig turquoise. ## sRGB, OKLab en OKLCH naast elkaar - Blauw naar oranje, sRGB: `linear-gradient(90deg in srgb, #2563eb, #f97316)` - Blauw naar oranje, OKLab: `linear-gradient(90deg in oklab, #2563eb, #f97316)` - Blauw naar oranje, OKLCH: `linear-gradient(90deg in oklch, #2563eb, #f97316)` - Rood naar blauw, sRGB: `linear-gradient(90deg in srgb, #ff0000, #0000ff)` - Rood naar blauw, OKLab: `linear-gradient(90deg in oklab, #ff0000, #0000ff)` - Rood naar blauw, OKLCH: `linear-gradient(90deg in oklch, #ff0000, #0000ff)` Twee kleurparen, elk in drie ruimten. De sRGB-rijen zakken dof en donker weg in het midden, OKLab maakt de helderheid gelijkmatig, OKLCH behoudt de kleur. | Ruimte | Hoe hij mengt | Het best voor | Let op | | --- | --- | --- | --- | | sRGB | Rechte lijn door rode, groene en blauwe waarden | Oude ontwerpen exact nabootsen | Grijs, donkere middens tussen verre tinten | | Lineair sRGB | Hetzelfde, zonder gammacodering | Lichtmenging, gloeden | Middens zien er te helder uit | | OKLab | Perceptueel gelijkmatige helderheid en kleur | Vloeiende, natuurlijke overgangen, de standaard voor moderne CSS-kleuren | Tegenpolen verliezen nog wat kleur | | OKLCH | Helderheid, chroma en tint apart | Levendige overgangen, regenbogen, verre merkkleuren | Kan door onverwachte tinten gaan | De vier ruimten die je het meest tegenkomt. CSS biedt er ook andere, zoals `lab`, `lch`, `hsl` en `display-p3`. ## 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](https://gradiently.design/nl/guide/muddy-gradients), 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](https://gradiently.design/nl/guide/rainbow-gradient). 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](https://gradiently.design/nl/guide/oklch-explained) legt de ruimte dieper uit. - Rood naar blauw, kortere tint: `linear-gradient(90deg in oklch shorter hue, #ef4444, #3b82f6)` - Rood naar blauw, langere tint: `linear-gradient(90deg in oklch longer hue, #ef4444, #3b82f6)` Dezelfde twee kleuren. Het kortere pad gaat door magenta, het langere pad door oranje, geel en groen. ## Zo stel je interpolatie van kleurverlopen in CSS in Voeg `in ` 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](https://developer.mozilla.org/en-US/docs/Web/CSS/color-interpolation-method) en [CSS-kleurverlopen in OKLCH](https://gradiently.design/nl/guide/css-gradient-oklch) heeft meer recepten. ```css .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); } ``` Het interpolatiesleutelwoord werkt in lineaire, radiale en conische kleurverlopen. Een conisch kleurverloop van rood terug naar rood met `longer hue` tekent een volledige, gelijkmatige regenboog. ## Welke kleurruimte je kiest 1. **Kies standaard OKLab** Voor de meeste menging van twee of drie kleuren geeft het het vloeiendste resultaat zonder verrassingen. 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. **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. **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. ### Oude gewoonte - Mengen in sRGB en stops toevoegen om grijs te verbergen - Een donkere duik in het midden accepteren - Kleuren dicht bij elkaar kiezen om veilig te blijven ### Beter - Mengen in OKLab of OKLCH met minder stops - Gelijkmatige helderheid van begin tot eind - Gedurfdere paren gebruiken en de ruimte ze laten schoonhouden Interpolatie is maar één onderdeel van een goede overgang, waar de stops staan telt net zo zwaar, en dat staat in [kleurstops van kleurverlopen](https://gradiently.design/nl/guide/gradient-stops). 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](https://gradiently.design/nl/developers) laten zien hoe ChatGPT of Claude Marks kan zoeken en ontwerpen kan maken die in de Studio openen. ## FAQ ### Wat is interpolatie van kleurverlopen? De berekening van elke kleur tussen twee stops van een kleurverloop. De kleurruimte waarin het gebeurt, zoals sRGB of OKLab, verandert welke kleuren er in het midden verschijnen. ### Waarom zijn mijn kleurverlopen in het midden grijs? Ze mengen in sRGB tussen kleuren aan tegenovergestelde kanten van het wiel, dus het pad kruist vlak bij grijs. Meng in OKLCH of voeg een overbruggende kleur toe. ### Is OKLab of OKLCH beter voor kleurverlopen? OKLab geeft de gelijkmatigste, natuurlijkste overgangen. OKLCH houdt kleuren verzadigder en is beter voor levendige paren en regenbogen. ### Hoe gebruik ik OKLCH in een CSS-kleurverloop? Voeg `in oklch` toe voor de kleuren, bijvoorbeeld `linear-gradient(90deg in oklch, #2563eb, #f97316)`. Schrijf eerst een sRGB-versie als terugval. ### Welke kleurruimte gebruiken CSS-kleurverlopen standaard? sRGB als elke kleur oudere syntaxis gebruikt, zoals hex of `rgb()`, en OKLab als een kleur een nieuwere syntaxis gebruikt, zoals `oklch()`.