OKLCH forklart: farge slik designere og øyne ser den

OKLCH er en måte å skrive farge som lyshet, kroma og fargetone, der lysheten måles slik menneskeøyet oppfatter den. I CSS er oklch(60% 0.2 293) en fiolett som virker 60% av veien fra svart til hvitt, med sterk farge og en fargetonevinkel på 293 grader. Den praktiske gevinsten for designere er enkel: Endre fargetonen og behold L, så ser den nye fargen like lys ut. HSL kan ikke love dette. Derfor har OKLCH blitt standard i nyere designsystemer, blant annet fargepaletten i Tailwind.

Lyshet, kroma og fargetone

Lyshet er hovedpoenget. Den kommer fra OKLab, et fargerom publisert i 2020 som ble laget for å forutsi oppfattet lyshet, fargestyrke og fargetone jevnere enn eldre modeller. Kroma erstatter metning: Fremfor en prosentandel av et maksimum er det en absolutt fargemengde. En kroma på 0,1 betyr derfor samme visuelle intensitet uansett fargetone. Fargetone er fortsatt en vinkel, men vinklene er fordelt slik at et trinn på 30 grader ser ut som en tilsvarende endring hele veien rundt.

OKLCH og HSL: samme lyshet side om side

Ta seks fargetoner og hold lyshet og kroma fast på oklch(65% 0.11 H). Prøvene nedenfor ser ut som én familie, og kontrasten mot hvitt holder seg mellom 3,1:1 og 3,4:1. Gjør det samme i HSL ved 50% lyshet, og kontrasten mot hvitt varierer fra omtrent 1,07:1 for gult til 8,6:1 for blått.

Denne jevnheten gjør OKLCH nyttig i faktisk arbeid. Statusfarger, diagramserier eller kategorietiketter kan dele L og C og bare variere i fargetone, uten at noen roper høyere enn andre. Trenger du et sett som også fungerer ved fargeblindhet, varierer du L. Det dekkes i fargeblindevennlige paletter.

Slik skriver du OKLCH i 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);
}

Nettleserstøtten er bred, og du kan sjekke detaljene på caniuse. For å utforske verdier visuelt er oklch.com en fargevelger som viser hvilke kombinasjoner en vanlig skjerm kan vise. Vil du konvertere en eksisterende heksadesimal merkevarefarge, lim den inn der eller i fargepanelet i nettleserens utviklerverktøy, som kan vise alle farger i OKLCH.

Bygge en skala med OKLCH

For å lage en skala fra lyst til mørkt, øk lysheten i jevne trinn og la kroma stige mot midten og falle mot endene. Svært lyse og mørke farger kan fysisk ikke romme mye farge. Holder du kroma høy i ytterpunktene, må nettleseren begrense dem. Her er en fiolett skala bygget slik.

Fordi L følger oppfattet lyshet, kan du ta omtrentlige kontrastvalg ut fra tallene alene. I denne skalaen oppfyller hvit tekst 4,5:1 fra L 50 og nedover, og svart tekst fra L 60 og oppover. Bekreft alltid med en kontrastkontroll, men du vil sjelden bli overrasket. Hvordan du gjør en slik skala til navngitte tokens, dekkes i designtokens.

Fargerom: når fargen ikke finnes på skjermen

OKLCH kan beskrive farger ingen skjerm kan vise. De fleste skjermer viser sRGB; mange nyere telefoner og bærbare datamaskiner viser det større Display P3. Øker du kroma nok, går du utenfor begge. Da tilpasser nettleseren fargen til den nærmeste skjermen kan vise, så ingenting bryter sammen, men du får kanskje ikke fargen du skrev inn.

OKLCH-gradienter

I gradienter gir perseptuell farge den tydeligste gevinsten. En vanlig CSS-gradient blander i sRGB, som trekker mot grått mellom fjerne fargetoner. Moderne CSS lar deg velge fargerom for blandingen, og OKLab eller OKLCH holder midten lys og ren.

OKLab blander langs en rett linje og passer de fleste gradienter med to farger. OKLCH roterer fargetonen, noe som er fint til solnedganger og regnbuer, men kan overraske. Hele teknikken, med nøkkelordene shorter hue og longer hue, finnes i CSS-gradienter i OKLCH, og teorien bak i gradientinterpolering.

Marks i Gradiently rendres direkte fremfor å skrives som CSS, og hver har sin egen palett. Auto-tekstfarge velger lys eller mørk tekst fra paletten for hver linje, slik at ordene er leselige uten at du sjekker tall. Vil du heller starte med en ferdig, levende bakgrunn enn en verdi i en fargevelger, søk i Markedet med fargeord.