# OKLCH uitgelegd: waarneembare kleur voor ontwerpers

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

HSL beloofde leesbare kleur en kwam bijna waar. OKLCH houdt het leesbare deel en herstelt de leugen over helderheid, daarom stappen designsystemen erop over.

## The short version

- OKLCH beschrijft een kleur met drie waarden: waargenomen helderheid (L), chroma of kleurrijkheid (C) en tinthoek (H).
- In tegenstelling tot HSL komt OKLCH-helderheid overeen met hoe licht kleuren voor mensen lijken, dus twee kleuren met dezelfde L hebben een vergelijkbaar contrast tegen wit.
- In CSS schrijf je het als `oklch(60% 0.2 293)`, met optionele alfa na een schuine streep, en alle huidige grote browsers ondersteunen het.
- Chroma heeft geen vast maximum: hoeveel kleur mogelijk is hangt af van de helderheid, de tint en het scherm, en kleuren buiten het bereik van het scherm worden teruggeprojecteerd.
- Verlopen interpoleren in OKLCH of OKLab voorkomt het grijze, modderige midden dat sRGB-mengsels tussen verre tinten geven.

**OKLCH** is een manier om kleur te schrijven als helderheid, chroma en tint, waarbij helderheid wordt gemeten zoals menselijke ogen die waarnemen. In CSS is `oklch(60% 0.2 293)` een violet dat er voor 60% van zwart naar wit uitziet, met sterke kleur, op een tinthoek van 293 graden. Het praktische voordeel voor ontwerpers is eenvoudig: verander de tint en houd L gelijk, en de nieuwe kleur ziet er even licht uit. HSL kan dat niet beloven, en dat is de reden dat OKLCH de standaard is geworden in nieuwere designsystemen, waaronder het kleurenpalet van Tailwind.

## Helderheid, chroma en tint

| Letter | Naam | Bereik | Wat het bepaalt |
| --- | --- | --- | --- |
| L | Helderheid | 0% tot 100% (of 0 tot 1) | Hoe licht de kleur eruitziet, zoals ogen oordelen |
| C | Chroma | Vanaf 0, zelden boven 0,37 | Hoeveel kleur: 0 is grijs, hoger is levendiger |
| H | Tint | 0 tot 360 graden | Welke kleur: grofweg 30 rood, 110 geel, 140 groen, 265 blauw |
| / A | Alfa | 0 tot 1, of 0% tot 100% | Dekking, optioneel |

Tinthoeken in OKLCH komen niet overeen met die van HSL. Zuiver blauw zit hier dicht bij 264, niet 240.

**Helderheid** is de ster. Ze komt uit OKLab, een kleurruimte die in 2020 is gepubliceerd en is gebouwd om waargenomen helderheid, kleurrijkheid en tint gelijkmatiger te voorspellen dan oudere modellen. **Chroma** vervangt verzadiging: in plaats van een percentage van een of ander maximum is het een absolute hoeveelheid kleur, dus een chroma van 0,1 betekent dezelfde visuele intensiteit bij elke tint. **Tint** is nog steeds een hoek, maar de hoeken liggen zo verdeeld dat een stap van 30 graden er overal rond als een vergelijkbare verandering uitziet.

## OKLCH vs HSL: dezelfde helderheid, naast elkaar

Neem zes tinten en houd helderheid en chroma vast op `oklch(65% 0.11 H)`. De stalen hieronder zien eruit als één familie en hun contrast tegen wit blijft tussen 3,1:1 en 3,4:1. Doe hetzelfde in [HSL](https://gradiently.design/nl/guide/hsl-colors) op 50% helderheid en het contrast tegen wit schommelt van ongeveer 1,07:1 voor geel tot 8,6:1 voor blauw.

- H 30 #c97466: #c97466
- H 90 #a98c35: #a98c35
- H 150 #5aa26b: #5aa26b
- H 210 #11a1b4: #11a1b4
- H 270 #758bd3: #758bd3
- H 330 #b576af: #b576af

`oklch(65% 0.11 H)` bij zes tinten. Gelijke helderheid, gelijk chroma, en ze ogen echt zo.

Die gelijkmatigheid maakt OKLCH nuttig voor echt werk. Een set statuskleuren, grafiekseries of categorielabels kan één L en C delen en alleen in tint verschillen, en geen ervan schreeuwt harder dan de andere. Heb je daarna een set nodig die veilig is voor kleurenblinden, dan varieer je ook L, wat behandeld wordt in [kleurenblindvriendelijke paletten](https://gradiently.design/nl/guide/color-blindness-design).

## Zo schrijf je OKLCH in CSS

```css
:root {
  /* lightness as a percentage or a number */
  --violet: oklch(60% 0.2 293);
  --violet-same: oklch(0.6 0.2 293);

  /* with transparency */
  --violet-soft: oklch(60% 0.2 293 / 0.4);

  /* grey: chroma 0, hue ignored */
  --grey: oklch(60% 0 0);
}

/* a fallback for very old browsers comes first */
.button {
  background: #8860ea;
  background: oklch(60% 0.2 293);
}
```

`oklch(60% 0.2 293)` ligt dicht bij #8860ea in sRGB. Huidige versies van Chrome, Edge, Firefox en Safari ondersteunen allemaal oklch().

De browserondersteuning is breed en je kunt het detail bevestigen op [caniuse](https://caniuse.com/mdn-css_types_color_oklch). Om waarden visueel te verkennen is [oklch.com](https://oklch.com) een kiezer die toont welke combinaties een gewoon scherm kan weergeven. Om een bestaande merk-hex om te zetten plak je hem in die kiezer of in het kleurenpaneel van je browser-devtools, dat elke kleur in OKLCH kan tonen.

## Een schaal bouwen met OKLCH

Om een schaal van tinten en schaduwen te maken, stap je gelijkmatig in helderheid en laat je chroma naar het midden toe stijgen en naar de uiteinden dalen. Heel lichte en heel donkere kleuren kunnen fysiek niet veel kleur bevatten, dus als je chroma bij de uitersten hoog houdt, moet de browser ze afknippen. Hier is een violetschaal die zo is gebouwd.

- L 97 C .015: #f5f3ff
- L 90 C .05: #dfd9fd
- L 80 C .10: #c0b2f9
- L 70 C .17: #a486fd
- L 60 C .22: #8a5af4
- L 50 C .22: #6e37d2
- L 40 C .18: #50249d
- L 30 C .12: #331b63
- L 20 C .07: #180d32

Overal tint 293. Elke stap is een vergelijkbare visuele sprong, wat HSL-schalen zelden lukt.

Omdat L de waargenomen helderheid volgt, kun je ruwe contrastbeslissingen alleen op de getallen nemen. In deze schaal haalt witte tekst 4,5:1 vanaf L 50 naar beneden, en zwarte tekst vanaf L 60 naar boven. Bevestig altijd met een [contrastchecker](https://gradiently.design/nl/guide/color-contrast-accessibility), maar je zult zelden verrast worden. Zo’n schaal omzetten in benoemde tokens staat in [designtokens](https://gradiently.design/nl/guide/design-tokens).

## Gamut: wanneer een kleur niet op het scherm bestaat

OKLCH kan kleuren beschrijven die geen enkel scherm kan tonen. De meeste monitoren tonen sRGB; veel recente telefoons en laptops tonen het bredere Display P3. Duw chroma hoog genoeg en je verlaat beide. Wanneer dat gebeurt, projecteert de browser de kleur terug naar de dichtstbijzijnde die het scherm kan tonen, dus er breekt niets, maar je krijgt misschien niet wat je typte.

### Vermijd

- Hoge chroma bij heel lichte of heel donkere L
- P3-waarden kopiëren naar een merkgids bedoeld voor druk
- Aannemen dat een levendige OKLCH-kleur op elk scherm hetzelfde oogt
- Chroma boven ongeveer 0,2 voor grote achtergrondvlakken

### Doe

- Controleer waarden in een kiezer die de sRGB-rand markeert
- Houd een hex-terugval voor merkkleuren
- Verlaag chroma richting de uiteinden van een schaal
- Bewaar de levendigste kleuren voor kleine accenten

## OKLCH-verlopen

Verlopen zijn waar waarneembare kleur het zichtbaarst loont. Een gewoon CSS-verloop mengt in sRGB, dat tussen verre tinten in grijs zakt. Modern CSS laat je de ruimte kiezen waarin je mengt, en OKLab of OKLCH houdt het midden helder en schoon.

- Gemengd in sRGB: grijs midden: `linear-gradient(90deg in srgb, #2563eb, #facc15)`
- Gemengd in OKLab: schoon: `linear-gradient(90deg in oklab, #2563eb, #facc15)`
- Gemengd in OKLCH: via groen: `linear-gradient(90deg in oklch, #2563eb, #facc15)`

Dezelfde twee kleuren op drie manieren. OKLCH draait rond het tintenwiel, dus het kan door tinten gaan die geen van beide uiteinden bevat.

OKLab mengt in een rechte lijn en past bij de meeste verlopen met twee kleuren. OKLCH draait de tint, wat prachtig is voor zonsondergangen en regenbogen maar je kan verrassen. De volledige techniek, inclusief de trefwoorden `shorter hue` en `longer hue`, staat in [CSS-verlopen in OKLCH](https://gradiently.design/nl/guide/css-gradient-oklch) en de theorie erachter in [interpolatie van verlopen](https://gradiently.design/nl/guide/gradient-interpolation).

De Marks van Gradiently worden live gerenderd in plaats van als CSS geschreven, en elk draagt zijn eigen palet: auto ink kiest voor elke regel lichte of donkere letters uit dat palet, zodat de woorden lezen zonder dat jij getallen controleert. Begin je liever bij een kant-en-klare levende achtergrond dan bij een waarde in een kiezer, blader dan door de Markt op kleurwoorden.

## FAQ

### Wat is OKLCH?

OKLCH is een kleurformaat gebaseerd op de kleurruimte OKLab. Het beschrijft kleuren met waargenomen helderheid, chroma en tint, zodat gelijke waarden even licht en levendig ogen.

### Is OKLCH beter dan HSL?

Voor het bouwen van paletten, schalen en verlopen wel, omdat de helderheid overeenkomt met wat ogen zien. HSL is nog prima voor snelle handmatige aanpassingen.

### Kan ik oklch() vandaag in CSS gebruiken?

Ja. Huidige versies van Chrome, Edge, Firefox en Safari ondersteunen het. Zet een hex-terugval eerst als je zeer oude browsers moet ondersteunen.

### Wat is het maximale chroma in OKLCH?

Er is geen vast maximum. Het mogelijke chroma hangt af van helderheid, tint en het scherm; in sRGB komen de meeste tinten ruim onder 0,37 uit.

### Hoe zet ik hex om naar OKLCH?

Plak de hex in een OKLCH-kiezer zoals oklch.com, of in het kleurenpaneel van je browser-devtools, dat dezelfde kleur in OKLCH kan tonen.