OKLCH uitgelegd: het kleurformaat dat eindelijk klopt met je ogen

Wat OKLCH is

OKLCH is de polaire vorm van Oklab, een perceptuele kleurruimte die Björn Ottosson in 2020 publiceerde. Er zijn drie getallen. L is de waargenomen lichtheid, van 0 (zwart) tot 1 of 100% (wit). C is chroma, de hoeveelheid kleur, van 0 (grijs) tot ongeveer 0,37 voor de felste kleuren die schermen kunnen tonen. H is de kleurtoonhoek, van 0 tot 360 graden.

Zo ziet dezelfde kleur eruit in verschillende formaten. Alle waarden hieronder berekent PickShade live, dus je kunt ze direct kopiëren.

Waarom OKLCH beter is dan HSL

Lichtheid in HSL is een formule, geen waarneming. hsl(60 100% 50%) is een fel geel en hsl(240 100% 50%) een donkerblauw, toch hebben ze allebei 50% lichtheid. Bouw je een palet op HSL, dan moet je elke kleurtoon met de hand corrigeren.

In OKLCH zien kleuren met dezelfde L er even licht uit. Houd L en C vast en draai aan H voor een reeks kleurtonen die in balans aanvoelt, of houd H en C vast en verander L in stappen voor een strakke tintenschaal. Daarom definieert Tailwind CSS v4 zijn hele standaardpalet in OKLCH.

Lichtheid voorspelt ook contrast. Tekst met een L-verschil van ongeveer 0,4 of meer ten opzichte van de achtergrond is meestal goed leesbaar. Zo kun je veel makkelijker beredeneren welke kleuren toegankelijk zijn.

Syntax in CSS

Lichtheid schrijf je als percentage of als getal van 0 tot 1. Chroma is een getal. Kleurtoon is een hoek in graden. Transparantie komt na een schuine streep.

color: oklch(62.8% 0.258 29.23);
background: oklch(0.7 0.15 250 / 50%);
border-color: oklch(from var(--brand) calc(l - 0.1) c h);

Browsersupport

oklch() werkt in elke actuele browser: Safari vanaf 15.4, Chrome en Edge vanaf 111, Firefox vanaf 113. Dat dekt ruim 90% van de gebruikers. Voor heel oude browsers zet je een HEX-fallback op de regel vóór de OKLCH-waarde.

color: #ff5733;
color: oklch(68% 0.21 33.7);

Chromagrenzen en gamut

OKLCH kan kleuren beschrijven die geen enkel scherm kan tonen. De maximale chroma hangt af van lichtheid en kleurtoon: een fel geel kan alleen bij hoge lichtheid, een fel blauw alleen bij lage lichtheid. Valt een waarde buiten de gamut van sRGB of Display P3, dan brengt de browser die terug binnen bereik, waardoor de kleur kan verschuiven.

PickShade markeert kleuren buiten sRGB en geeft je de dichtstbijzijnde kleur die wel past. Die vinden we door de chroma te verlagen en lichtheid en kleurtoon te behouden, precies de methode die CSS Color 4 aanbeveelt.

HEX omzetten naar OKLCH

De omrekening gaat van HEX naar sRGB, van sRGB naar lineair licht, van lineair sRGB naar de LMS-kegelruimte, dan een derdemachtswortel, een matrix naar Oklab en ten slotte van Oklab naar poolcoördinaten. Met de hand gaat dat snel mis, dus plak een kleur in de converter en kopieer het resultaat.

Vragen en antwoorden