# OKLCH forklaret: perceptuel farve for designere

[Canonical HTML page](https://gradiently.design/da/guide/oklch-explained)

HSL lovede læsbar farve og leverede næsten. OKLCH beholder den læsbare del og retter løgnen om lyshed, og derfor går designsystemer over til det.

## The short version

- OKLCH beskriver en farve med tre værdier: perceptuel lyshed (L), chroma eller farverigdom (C) og nuancevinkel (H).
- I modsætning til HSL svarer lysheden i OKLCH til, hvor lyse farverne ser ud for mennesker, så to farver med samme L har lignende kontrast mod hvid.
- I CSS skrives den `oklch(60% 0.2 293)`, med valgfri alfa efter en skråstreg, og alle aktuelle store browsere understøtter den.
- Chroma har intet fast maksimum: hvor meget farve der er mulig, afhænger af lyshed, nuance og skærm, og farver uden for skærmens område bliver mappet tilbage ind i det.
- Når gradienter interpoleres i OKLCH eller OKLab, undgår du den grå, mudrede midte, som sRGB-blandinger giver mellem fjerne nuancer.

**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

| Bogstav | Navn | Område | Hvad det styrer |
| --- | --- | --- | --- |
| L | Lyshed | 0 % til 100 % (eller 0 til 1) | Hvor lys farven ser ud, som øjet bedømmer det |
| C | Chroma | 0 og opefter, sjældent over 0,37 | Hvor meget farve: 0 er grå, højere er mere klar |
| H | Nuance | 0 til 360 grader | Hvilken farve: cirka 30 rød, 110 gul, 140 grøn, 265 blå |
| / A | Alfa | 0 til 1, eller 0 % til 100 % | Opacitet, valgfri |

Nuancevinkler i OKLCH flugter ikke med HSL’s. Ren blå ligger her nær 264, ikke 240.

**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](https://gradiently.design/da/guide/hsl-colors) ved 50 % lyshed, og kontrasten mod hvid svinger fra omkring 1,07:1 for gul til 8,6:1 for blå.

- H 30 #c97466: #c97466
- H 90 #a98c35: #a98c35
- H 150 #5aa26b: #5aa26b
- H 210 #11a1b4: #11a1b4
- H 270 #758bd3: #758bd3
- H 330 #b576af: #b576af

`oklch(65% 0.11 H)` ved seks nuancer. Ens lyshed, ens chroma, og de ser virkelig sådan ud.

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](https://gradiently.design/da/guide/color-blindness-design).

## Sådan skriver du OKLCH i CSS

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

`oklch(60% 0.2 293)` ligger tæt på #8860ea i sRGB. Aktuelle versioner af Chrome, Edge, Firefox og Safari understøtter alle oklch().

Browserunderstøttelsen er bred, og du kan bekræfte detaljerne på [caniuse](https://caniuse.com/mdn-css_types_color_oklch). Vil du udforske værdier visuelt, er [oklch.com](https://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.

- L 97 C .015: #f5f3ff
- L 90 C .05: #dfd9fd
- L 80 C .10: #c0b2f9
- L 70 C .17: #a486fd
- L 60 C .22: #8a5af4
- L 50 C .22: #6e37d2
- L 40 C .18: #50249d
- L 30 C .12: #331b63
- L 20 C .07: #180d32

Nuance 293 hele vejen igennem. Hvert trin er et lignende visuelt spring, hvilket HSL-skalaer sjældent klarer.

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](https://gradiently.design/da/guide/color-contrast-accessibility), men du bliver sjældent overrasket. Hvordan du gør en skala som denne til navngivne tokens, gennemgås i [designtokens](https://gradiently.design/da/guide/design-tokens).

## 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.

### Undgå

- Høj chroma ved meget lys eller meget mørk L
- At kopiere P3-værdier ind i en brandmanual beregnet til tryk
- At gå ud fra, at en klar OKLCH-farve ser ens ud på alle skærme
- Chroma over omkring 0,2 på store baggrundsflader

### Gør

- Tjek værdier i en vælger, der markerer sRGB-grænsen
- Behold en hex-reserve til brandfarver
- Sænk chroma mod enderne af en skala
- Gem de klareste farver til små accenter

## 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.

- Blandet i sRGB: grå midte: `linear-gradient(90deg in srgb, #2563eb, #facc15)`
- Blandet i OKLab: ren: `linear-gradient(90deg in oklab, #2563eb, #facc15)`
- Blandet i OKLCH: gennem grøn: `linear-gradient(90deg in oklch, #2563eb, #facc15)`

De samme to farver på tre måder. OKLCH bevæger sig rundt om farvehjulet, så den kan passere nuancer, ingen af enderne indeholder.

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](https://gradiently.design/da/guide/css-gradient-oklch), og teorien bag i [interpolation i gradienter](https://gradiently.design/da/guide/gradient-interpolation).

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.

## FAQ

### Hvad er OKLCH?

OKLCH er et farveformat baseret på farverummet OKLab. Det beskriver farver ved perceptuel lyshed, chroma og nuance, så ens værdier ser lige lyse og klare ud.

### Er OKLCH bedre end HSL?

Til at bygge paletter, skalaer og gradienter, ja, fordi lysheden svarer til, hvad øjet ser. HSL er stadig fint til hurtige rettelser i hånden.

### Kan jeg bruge oklch() i CSS i dag?

Ja. Aktuelle versioner af Chrome, Edge, Firefox og Safari understøtter den. Sæt en hex-reserve først, hvis du skal understøtte meget gamle browsere.

### Hvad er den maksimale chroma i OKLCH?

Der er intet fast maksimum. Den mulige chroma afhænger af lyshed, nuance og skærm; i sRGB topper de fleste nuancer et godt stykke under 0,37.

### Hvordan konverterer jeg hex til OKLCH?

Indsæt hex-værdien i en OKLCH-vælger som oklch.com, eller i farvepanelet i din browsers devtools, som kan vise den samme farve i OKLCH.