OKLCH forklart: fargeformatet som endelig stemmer med øyet

Hva OKLCH er

OKLCH er den polare formen av Oklab, et perseptuelt fargerom som Björn Ottosson publiserte i 2020. Det har tre tall. L er opplevd lyshet fra 0 (svart) til 1 eller 100 % (hvitt). C er kroma, altså hvor mye farge det er, fra 0 (grått) til rundt 0,37 for de mest fargesterke fargene en skjerm kan vise. H er fargetonen som vinkel fra 0 til 360 grader.

Slik ser den samme fargen ut i ulike formater. Alle verdiene nedenfor regnes ut fortløpende av PickShade, så du kan kopiere dem som de er.

Hvorfor OKLCH er bedre enn HSL

Lysheten i HSL er en formel, ikke en opplevelse. hsl(60 100% 50%) er en klar gul og hsl(240 100% 50%) en mørk blå, men begge påstår at de har 50 % lyshet. Bygger du en palett på HSL, må hver fargetone justeres for hånd.

I OKLCH ser farger med samme L like lyse ut. Du kan beholde L og C og rotere H for å få et sett fargetoner som virker balansert, eller beholde H og C og endre L trinnvis for å få en ren nyanseskala. Derfor definerer Tailwind CSS v4 hele standardpaletten sin i OKLCH.

Lysheten forutsier også kontrasten. Tekst som skiller seg fra bakgrunnen med rundt 0,4 eller mer i L, er som regel lesbar, og det gjør det mye enklere å velge farger som oppfyller kravene til universell utforming.

Syntaks i CSS

Lyshet kan skrives som prosent eller som et tall fra 0 til 1. Kroma er et tall. Fargetone er en vinkel i grader. Gjennomsiktighet skrives etter en skråstrek.

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

Nettleserstøtte

oklch() virker i alle nåværende nettlesere: Safari fra 15.4, Chrome og Edge fra 111, Firefox fra 113. Det dekker godt over 90 % av brukerne. For svært gamle nettlesere setter du en HEX-reserve på linjen før OKLCH-verdien.

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

Grenser for kroma og fargeomfang

OKLCH kan beskrive farger som ingen skjerm kan vise. Høyeste mulige kroma avhenger av lyshet og fargetone: en fargesterk gul finnes bare ved høy lyshet, en fargesterk blå bare ved lav lyshet. Når en verdi ligger utenfor fargeomfanget til sRGB eller Display P3, tilpasser nettleseren den, og det kan forskyve fargen.

PickShade markerer farger utenfor sRGB og gir deg den nærmeste fargen som passer, funnet ved å senke kroma og beholde lyshet og fargetone, den samme metoden som CSS Color 4 anbefaler.

Slik konverterer du HEX til OKLCH

Konverteringen går fra HEX til sRGB, fra sRGB til lineært lys, fra lineær sRGB til LMS-rommet for tappene, via en kubikkrot og en matrise til Oklab og til slutt fra Oklab til polare koordinater. For hånd er det lett å gjøre feil, så lim inn en farge i fargekonvertereren og kopier resultatet.

Spørsmål og svar