# OKLCH forklart: farge slik designere og øyne ser den

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

HSL lovet forståelig farge og leverte nesten. OKLCH beholder det forståelige og retter feilen i lyshet, og derfor tar designsystemer det i bruk.

## The short version

- OKLCH beskriver en farge med tre verdier: oppfattet lyshet (L), kroma eller fargestyrke (C) og fargetonevinkel (H).
- I motsetning til HSL samsvarer lyshet i OKLCH med hvor lyse farger virker for mennesker, slik at to farger med samme L har lignende kontrast mot hvitt.
- I CSS skrives det `oklch(60% 0.2 293)`, med valgfri alfa etter en skråstrek, og alle dagens store nettlesere støtter det.
- Kroma har ingen fast maksimumsverdi: Hvor mye farge som er mulig, avhenger av lyshet, fargetone og skjerm. Farger utenfor skjermens område tilpasses tilbake til det.
- Interpolering av gradienter i OKLCH eller OKLab unngår den grå, grumsete midten som sRGB gir mellom fjerntliggende fargetoner.

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

| Bokstav | Navn | Område | Hva den styrer |
| --- | --- | --- | --- |
| L | Lyshet | 0% til 100% (eller 0 til 1) | Hvor lys fargen ser ut, vurdert av øyet |
| C | Kroma | Fra 0 og oppover, sjelden over 0,37 | Hvor mye farge: 0 er grått, høyere er mer intenst |
| H | Fargetone | 0 til 360 grader | Hvilken farge: omtrent 30 rødt, 110 gult, 140 grønt, 265 blått |
| / A | Alfa | 0 til 1, eller 0% til 100% | Opasitet, valgfritt |

Fargetonevinklene i OKLCH stemmer ikke med HSL. Rent blått ligger nær 264 her, ikke 240.

**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](https://gradiently.design/nb/guide/hsl-colors) ved 50% lyshet, og kontrasten mot hvitt varierer fra omtrent 1,07:1 for gult til 8,6:1 for blått.

- 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)` i seks fargetoner. Lik lyshet og lik kroma, og det ser faktisk slik ut.

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

## Slik 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 nær #8860ea i sRGB. Dagens versjoner av Chrome, Edge, Firefox og Safari støtter alle oklch().

Nettleserstøtten er bred, og du kan sjekke detaljene på [caniuse](https://caniuse.com/mdn-css_types_color_oklch). For å utforske verdier visuelt er [oklch.com](https://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.

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

Fargetone 293 gjennom hele skalaen. Hvert trinn gir et lignende visuelt sprang, noe HSL-skalaer sjelden klarer.

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](https://gradiently.design/nb/guide/color-contrast-accessibility), men du vil sjelden bli overrasket. Hvordan du gjør en slik skala til navngitte tokens, dekkes i [designtokens](https://gradiently.design/nb/guide/design-tokens).

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

### Unngå

- Høy kroma ved svært lys eller mørk L
- Å kopiere P3-verdier til en profilmanual for trykk
- Å anta at en intens OKLCH-farge ser lik ut på alle skjermer
- Kroma over omtrent 0,2 på store bakgrunnsflater

### Gjør dette

- Sjekk verdier i en fargevelger som markerer sRGB-grensen
- Behold en heksadesimal reserveverdi til merkevarefarger
- Senk kroma mot endene av skalaen
- Spar de sterkeste fargene til små aksenter

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

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

Samme to farger på tre måter. OKLCH går rundt fargehjulet og kan derfor passere fargetoner som ingen av endene inneholder.

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

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.

## FAQ

### Hva er OKLCH?

OKLCH er et fargeformat basert på fargerommet OKLab. Det beskriver farger med oppfattet lyshet, kroma og fargetone, slik at like verdier virker like lyse og sterke.

### Er OKLCH bedre enn HSL?

Til paletter, skalaer og gradienter, ja, fordi lysheten stemmer med det øyet ser. HSL fungerer fortsatt til raske manuelle justeringer.

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

Ja. Dagens versjoner av Chrome, Edge, Firefox og Safari støtter det. Sett en heksadesimal reserveverdi først hvis du må støtte svært gamle nettlesere.

### Hva er maksimal kroma i OKLCH?

Det finnes ikke et fast maksimum. Mulig kroma avhenger av lyshet, fargetone og skjerm. I sRGB når de fleste fargetoner grensen godt under 0,37.

### Hvordan konverterer jeg hex til OKLCH?

Lim heksadesimalkoden inn i en OKLCH-fargevelger som oklch.com, eller i fargepanelet i nettleserens utviklerverktøy, som kan vise samme farge i OKLCH.