OKLCH forklaret: farveformatet, der endelig passer til dine øjne

Hvad OKLCH er

OKLCH er den polære form af Oklab, et perceptuelt farverum, som Björn Ottosson udgav i 2020. Det består af tre tal. L er den oplevede lyshed fra 0 (sort) til 1 eller 100 % (hvid). C er kroma, altså mængden af farve, fra 0 (grå) til omkring 0,37 for de mest intense farver, en skærm kan vise. H er farvetonens vinkel fra 0 til 360 grader.

Sådan ser den samme farve ud i forskellige formater. Alle værdier nedenfor beregnes direkte af PickShade, så du kan kopiere dem, som de er.

Hvorfor OKLCH er bedre end HSL

Lysheden i HSL er en formel, ikke en oplevelse. hsl(60 100% 50%) er en klar gul, og hsl(240 100% 50%) er en mørk blå, men begge påstår at have 50 % lyshed. Bygger du en palet på HSL, skal hver farvetone rettes til i hånden.

I OKLCH ser farver med samme L lige lyse ud. Du kan holde L og C fast og dreje H for at få et sæt farvetoner, der virker afbalancerede, eller holde H og C fast og ændre L trinvis for at få en ren nuanceskala. Derfor definerer Tailwind CSS v4 hele sin standardpalet i OKLCH.

Lysheden forudsiger også kontrasten. Tekst, hvis L afviger med omkring 0,4 eller mere fra baggrunden, er som regel læsbar, og det gør tilgængelige farvevalg meget lettere at gennemskue.

Syntaks i CSS

Lysheden kan skrives som procent eller som et tal fra 0 til 1. Kroma er et tal. Farvetonen er en vinkel i grader. Gennemsigtighed skrives efter en skråstreg.

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);

Browserunderstøttelse

oklch() virker i alle aktuelle browsere: Safari fra 15.4, Chrome og Edge fra 111 og Firefox fra 113. Det dækker et godt stykke over 90 % af brugerne. Til meget gamle browsere sætter du en HEX-fallback på linjen før OKLCH-værdien.

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

Grænser for kroma og farveomfang

OKLCH kan beskrive farver, som ingen skærm kan vise. Den maksimale kroma afhænger af lyshed og farvetone: en intens gul findes kun ved høj lyshed, en intens blå kun ved lav lyshed. Når en værdi ligger uden for farveomfanget i sRGB eller Display P3, tilpasser browseren den, og det kan forskyde farven.

PickShade markerer farver uden for sRGB og giver dig den nærmeste farve, der passer. Den findes ved at sænke kroma og bevare lyshed og farvetone, den metode som CSS Color 4 anbefaler.

Sådan konverterer du HEX til OKLCH

Konverteringen går fra HEX til sRGB, fra sRGB til lineært lys, fra lineær sRGB til tapcellernes LMS-rum, gennem en kubikrod og en matrix til Oklab og til sidst fra Oklab til polære koordinater. I hånden er det let at regne forkert, så indsæt bare en farve i konverteren, og kopiér resultatet.

Spørgsmål og svar