OKLCH forklaret: perceptuel farve for designere

OKLCH er en måde at skrive farve på som lyshed, chroma og nuance, hvor lysheden måles, som det menneskelige øje opfatter den. I CSS er oklch(60% 0.2 293) en violet, der ser ud til at ligge 60 % af vejen fra sort til hvid, med kraftig farve, ved en nuancevinkel på 293 grader. Den praktiske gevinst for designere er enkel: skift nuancen, og hold L den samme, så ser den nye farve lige så lys ud. Det kan HSL ikke love, og det er grunden til, at OKLCH er blevet standard i nyere designsystemer, også i Tailwinds farvepalet.

Lyshed, chroma og nuance

Lyshed er hovedpersonen. Den kommer fra OKLab, et farverum offentliggjort i 2020, som blev bygget til at forudsige opfattet lyshed, farverigdom og nuance mere jævnt end ældre modeller. Chroma erstatter mætning: i stedet for en procentdel af et eller andet maksimum er det en absolut mængde farve, så en chroma på 0,1 betyder den samme visuelle intensitet uanset nuance. Nuance er stadig en vinkel, men vinklerne er fordelt, så et trin på 30 grader ligner en lignende ændring hele vejen rundt.

OKLCH eller HSL: samme lyshed side om side

Tag seks nuancer, og hold lyshed og chroma fast på oklch(65% 0.11 H). Farveprøverne nedenfor ligner én familie, og deres kontrast mod hvid holder sig mellem 3,1:1 og 3,4:1. Gør det samme i HSL ved 50 % lyshed, og kontrasten mod hvid svinger fra omkring 1,07:1 for gul til 8,6:1 for blå.

Den jævnhed er det, der gør OKLCH nyttig i rigtigt arbejde. Et sæt statusfarver, dataserier i diagrammer eller kategorimærker kan dele ét L og C og kun adskille sig i nuance, og ingen af dem råber højere end de andre. Har du derefter brug for et sæt, der virker for farveblinde, varierer du også L, hvilket gennemgås i farvepaletter til farveblinde.

Sådan 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);
}

Browserunderstøttelsen er bred, og du kan bekræfte detaljerne på caniuse. Vil du udforske værdier visuelt, er oklch.com en farvevælger, der viser, hvilke kombinationer en almindelig skærm kan vise. Vil du konvertere en eksisterende brand-hex, så indsæt den i den vælger eller i farvepanelet i din browsers devtools, som kan vise enhver farve i OKLCH.

Byg en skala med OKLCH

For at lave en skala af tints og skygger skal du gå jævnt i lyshed og lade chroma stige mod midten og falde mod enderne. Meget lyse og meget mørke farver kan fysisk ikke rumme meget farve, så holder du chroma højt i yderpunkterne, må browseren klippe dem. Her er en violet skala bygget på den måde.

Fordi L følger den opfattede lyshed, kan du træffe grove kontrastbeslutninger ud fra tallene alene. I denne skala klarer hvid tekst 4,5:1 fra L 50 og nedad, og sort tekst klarer det fra L 60 og opad. Bekræft altid med et kontrastværktøj, men du bliver sjældent overrasket. Hvordan du gør en skala som denne til navngivne tokens, gennemgås i designtokens.

Gamut: når en farve ikke findes på skærmen

OKLCH kan beskrive farver, som ingen skærm kan vise. De fleste skærme viser sRGB; mange nyere telefoner og bærbare viser det bredere Display P3. Skru chroma højt nok op, så forlader du begge. Når det sker, mapper browseren farven tilbage til den nærmeste, skærmen kan vise, så intet går i stykker, men du får måske ikke det, du skrev.

OKLCH-gradienter

Gradienter er der, hvor perceptuel farve betaler sig mest synligt. En almindelig CSS-gradient blander i sRGB, som dykker ned i grå mellem fjerne nuancer. Moderne CSS lader dig vælge, hvilket farverum der skal blandes i, og OKLab eller OKLCH holder midten lys og ren.

OKLab blander i en lige linje og passer til de fleste gradienter med to farver. OKLCH roterer nuancen, hvilket er smukt til solnedgange og regnbuer, men kan overraske dig. Hele teknikken, også nøgleordene shorter hue og longer hue, står i CSS-gradienter i OKLCH, og teorien bag i interpolation i gradienter.

Marks i Gradiently gengives live frem for at blive skrevet som CSS, og hver har sin egen palet: Automatisk tekstfarve vælger lys eller mørk tekst fra den palet for hver linje, så ordene kan læses, uden at du skal tjekke tal. Vil du hellere starte fra en færdig levende baggrund end en værdi i en vælger, så gennemse Markedet med farveord.