OKLCH uitgelegd: waarneembare kleur voor ontwerpers

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

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 op 50% helderheid en het contrast tegen wit schommelt van ongeveer 1,07:1 voor geel tot 8,6:1 voor blauw.

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.

Zo schrijf je OKLCH in 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);
}

De browserondersteuning is breed en je kunt het detail bevestigen op caniuse. Om waarden visueel te verkennen is 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.

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, maar je zult zelden verrast worden. Zo’n schaal omzetten in benoemde tokens staat in designtokens.

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.

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.

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 en de theorie erachter in interpolatie van verlopen.

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.