# CSS-kleurverloop met OKLCH-interpolatie voor vloeiender overgangen

[Canonical HTML page](https://gradiently.design/nl/guide/css-gradient-oklch)

De meeste doffe kleurverlopen met een grijs midden zijn geen kleurprobleem maar een rekenprobleem. Twee woorden, in oklch, veranderen waar de browser rekent.

## The short version

- CSS-kleurverlopen mengen standaard in sRGB als al hun kleuren als hex, rgb() of hsl() zijn geschreven, waardoor het midden van een overgang vaak dof of grijs wordt.
- in oklch of in oklab aan een kleurverloop toevoegen laat de browser mengen in een perceptuele kleurruimte, die de lichtheid gelijkmatig en de kleuren schoon houdt.
- in oklab neemt het rechtste pad tussen twee kleuren, terwijl in oklch rond de tintencirkel reist en de verzadiging hoog houdt.
- Tintsleutelwoorden als shorter hue, longer hue, increasing hue en decreasing hue kiezen welke kant een oklch-kleurverloop rond het kleurenwiel opgaat.
- Browsers negeren declaraties die ze niet kunnen lezen, dus eerst een sRGB-kleurverloop schrijven en daarna de oklch-versie is een veilige terugval.

**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.

- sRGB (standaard voor hex): `linear-gradient(90deg, #2563eb, #facc15)`
- in oklab: `linear-gradient(90deg in oklab, #2563eb, #facc15)`
- in oklch: `linear-gradient(90deg in oklch, #2563eb, #facc15)`

Blauw naar geel op drie manieren. sRGB gaat via grijs; oklab blijft schoon en neutraal; oklch houdt volle kleur door via turquoise en groen te reizen.

## 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](https://gradiently.design/nl/guide/muddy-gradients).

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.

```css
/* 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);
```

Alleen het mengen verandert; de kleurstops blijven zoals geschreven.

| Kleurruimte | Hoe het mengt | Gebruik het voor |
| --- | --- | --- |
| `srgb` | Middelt rood, groen en blauw | Oude ontwerpen exact nabootsen |
| `srgb-linear` | Middelt fysiek licht | Effecten van lichtmenging; middens lijken helder |
| `oklab` | Rechte lijn door een perceptuele ruimte | De meeste overgangen, en elke fade naar wit, zwart of grijs |
| `oklch` | Rond de tintencirkel met gelijkmatig chroma | Levendige overgangen met meerdere tinten, regenbogen, zonsondergangen |
| `hsl` | Rond de tintencirkel, niet perceptueel | Kleurenwielen; lichtheid is ongelijk |

De ruimten die je het vaakst gebruikt. De [MDN-pagina over color-interpolation-method](https://developer.mozilla.org/en-US/docs/Web/CSS/color-interpolation-method) somt ze allemaal op.

## 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.

- Roze naar turquoise, in oklab: `linear-gradient(90deg in oklab, #db2777, #0891b2)`
- Roze naar turquoise, in oklch: `linear-gradient(90deg in oklch, #db2777, #0891b2)`
- Indigo naar wit, in oklab: `linear-gradient(90deg in oklab, #1e1b4b, #ffffff)`
- Violet naar oranje, in oklch: `linear-gradient(90deg in oklch, #7c3aed, #f97316)`

Oklab blijft op het directe pad; oklch veegt door de tinten tussen zijn uiteinden: roze naar turquoise passeert violet en blauw, violet naar oranje magenta en rood.

> **Fade naar wit, zwart of grijs** Neutrale kleuren hebben geen echte tint, dus een oklch-overgang naar wit of zwart kan een vreemde route nemen. Gebruik voor fades naar een neutrale tint `in oklab`, of schrijf het neutrale eind als bijna-neutraal met dezelfde tint als het andere eind, zoals `oklch(97% 0.02 290)`.

## 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.

- Rood naar blauw, shorter hue: `linear-gradient(90deg in oklch shorter hue, #ef4444, #3b82f6)`
- Rood naar blauw, longer hue: `linear-gradient(90deg in oklch longer hue, #ef4444, #3b82f6)`

De korte weg van rood naar blauw gaat via magenta en violet. De lange weg gaat via oranje, geel, groen en cyaan.

`longer hue` is de nettste manier om een spectrum te tekenen: twee stops in plaats van zeven. Zo maak je ook een volledig [regenboogkleurverloop](https://gradiently.design/nl/guide/rainbow-gradient) 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](https://oklch.com) is een goede kiezer om waarden te vinden.

```css
.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)
  );
}
```

Violet via koraal naar amber op één lichtheid: geen stop springt er helderder uit dan de andere.

Gelijke lichtheid: violet, koraal, amber: `linear-gradient(90deg in oklch, oklch(68% 0.17 300), oklch(68% 0.17 20), oklch(68% 0.17 70))`

De code hierboven, gerenderd. Kleuren buiten het bereik van een scherm worden afgebeeld op de dichtstbijzijnde kleur die het kan tonen.

## 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.

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

Effen kleur, dan sRGB, dan oklch. Elke browser houdt de laatste regel die hij begrijpt.

Wil je verder gaan, dan combineren perceptuele overgangen goed met korrel om [kleurverloopbanding](https://gradiently.design/nl/guide/gradient-banding) te voorkomen, en met de stop- en hinttechnieken in de gids over [CSS lineaire kleurverlopen](https://gradiently.design/nl/guide/css-linear-gradient).

## FAQ

### Wat doet in oklch in een CSS-kleurverloop?

Het laat de browser de tussenkleuren berekenen in de OKLCH-kleurruimte, waardoor de lichtheid gelijkmatig blijft en kleuren verzadigd blijven in plaats van via grijs te mengen.

### Moet ik oklab of oklch gebruiken voor kleurverlopen?

Gebruik oklch voor levendige overgangen tussen verschillende tinten en oklab voor fades naar wit, zwart of grijs, of als je niet wilt dat de overgang extra tinten passeert.

### Waarom gaat mijn oklch-kleurverloop door groen?

OKLCH reist rond de tintencirkel, en tussen blauw en geel gaat de kortste weg door groen. Gebruik `in oklab` voor een direct pad, of voeg een middenstop toe.

### Moet ik kleuren in oklch() schrijven om oklch-interpolatie te gebruiken?

Nee. Hexkleuren werken prima met `in oklch`; alleen het mengen verandert. Stops in `oklch()` schrijven is handig als je de lichtheid precies wilt sturen.

### Wat gebeurt er in browsers die in oklch niet ondersteunen?

Ze negeren de hele declaratie. Zet een gewoon sRGB-kleurverloop op de regel ervoor en die browsers houden dat.