# CSS gradient OKLCH: interpolasjon for jevnere blandinger

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

De fleste kjedelige gradienter med grått midtparti er ikke et fargeproblem, men et regneproblem. To ord, in oklch, endrer hvor nettleseren gjør regnestykket.

## The short version

- CSS-gradienter blander i sRGB som standard når alle fargene er skrevet som hex, rgb() eller hsl(), og det gjør ofte midten av en blanding sløv eller grå.
- Å legge til in oklch eller in oklab i en gradient forteller nettleseren at den skal blande i et perseptuelt fargerom, som holder lysheten jevn og fargene rene.
- in oklab tar den rakeste veien mellom to farger, mens in oklch går rundt fargetonesirkelen og holder metningen høy.
- Fargetonenøkkelord som shorter hue, longer hue, increasing hue og decreasing hue velger hvilken vei en oklch-gradient går rundt fargehjulet.
- Nettlesere ignorerer deklarasjoner de ikke kan tolke, så å skrive en sRGB-gradient først og oklch-versjonen etterpå er en trygg reserve.

**OKLCH-interpolasjon i CSS-gradienter** betyr å be nettleseren regne ut fargene mellom stoppene i OKLCH-fargerommet i stedet for i sRGB. Du legger til to ord etter retningen: `linear-gradient(90deg in oklch, #2563eb, #facc15)`. Resultatet er en blanding der lysheten endrer seg jevnt og midten forblir livlig, i stedet for å synke ned i det grå, sølete båndet vanlige sRGB-blandinger er kjent for.

- sRGB (standard for hex): `linear-gradient(90deg, #2563eb, #facc15)`
- in oklab: `linear-gradient(90deg in oklab, #2563eb, #facc15)`
- in oklch: `linear-gradient(90deg in oklch, #2563eb, #facc15)`

Blått til gult på tre måter. sRGB går gjennom grått, oklab holder seg ren og nøytral, og oklch beholder full farge ved å gå gjennom turkis og grønt.

## Hvorfor sRGB-gradienter blir grå

sRGB ble utviklet for å kode skjermfarger effektivt, ikke for å samsvare med hvordan folk ser. Å blande to sRGB-farger betyr å ta gjennomsnittet av røde, grønne og blå tall, og halvveis mellom et blått og et gult er et sett med middels tall som ser grått ut. Lysheten endrer seg også ujevnt, så noen blandinger buler lysere eller mørkere i midten. Designsiden av dette problemet står i [sølete gradienter](https://gradiently.design/nb/guide/muddy-gradients).

Oklab og dens sylindriske form, OKLCH, ble utviklet slik at like steg i tallene ser ut som omtrent like steg for øyet. Å blande i dem holder oppfattet lyshet i jevn bevegelse, og derfor ser gradienter laget slik jevnere og lysere ut med de samme endepunktene.

## Syntaksen: in oklch og in oklab

Interpolasjonsmetoden står i første argument, før eller etter retningen. Den virker i `linear-gradient()`, `radial-gradient()`, `conic-gradient()` og de repeterende formene deres, og også i `color-mix()`. Fargestoppene kan forbli i hex, for det er bare regnestykket som endres.

```css
/* direction first or interpolation first: both are valid */
background: linear-gradient(135deg in oklch, #7c3aed, #f97316);
background: linear-gradient(in oklch 135deg, #7c3aed, #f97316);

/* works in the other gradient functions too */
background: radial-gradient(in oklab circle at 30% 30%, #22d3ee, #1e1b4b);
background: conic-gradient(in oklch from 90deg, #ef4444, #3b82f6, #ef4444);
```

Bare blandingen endres, og fargestoppene forblir som skrevet.

| Fargerom | Slik blander det | Bruk det til |
| --- | --- | --- |
| `srgb` | Tar gjennomsnittet av rødt, grønt og blått | Å matche gamle design nøyaktig |
| `srgb-linear` | Tar gjennomsnittet av fysisk lys | Lysblandingseffekter, midtpunktene ser lyse ut |
| `oklab` | Rett linje gjennom et perseptuelt rom | De fleste blandinger, og alle overganger til hvitt, svart eller grått |
| `oklch` | Rundt fargetonesirkelen med jevn kroma | Livlige blandinger med flere fargetoner, regnbuer, solnedganger |
| `hsl` | Rundt fargetonesirkelen, ikke perseptuelt | Fargehjul, med ujevn lyshet |

Fargerommene du mest sannsynlig vil bruke. [MDNs side om color-interpolation-method](https://developer.mozilla.org/en-US/docs/Web/CSS/color-interpolation-method) lister dem alle.

## oklab eller oklch: hvilken du bør velge

Begge er perseptuelle, og de skiller seg i veien de tar. **Oklab** trekker en rett linje mellom de to fargene, så midten kan miste litt metning når endene ligger langt fra hverandre på fargehjulet, men den går aldri gjennom en fargetone du ikke ba om. **OKLCH** beholder kromaen, altså fargens intensitet, og går rundt fargetonesirkelen, så midten forblir mettet, men passerer fargetonene imellom. Blått til gult i oklch går gjennom grønt. Noen ganger er det poenget, andre ganger en overraskelse.

- Rosa til turkis, i oklab: `linear-gradient(90deg in oklab, #db2777, #0891b2)`
- Rosa til turkis, i oklch: `linear-gradient(90deg in oklch, #db2777, #0891b2)`
- Indigo til hvitt, i oklab: `linear-gradient(90deg in oklab, #1e1b4b, #ffffff)`
- Fiolett til oransje, i oklch: `linear-gradient(90deg in oklch, #7c3aed, #f97316)`

Oklab holder seg på den direkte veien, mens oklch sveiper gjennom fargetonene mellom endene: rosa til turkis går gjennom fiolett og blått, fiolett til oransje gjennom magenta og rødt.

> **Overgang til hvitt, svart eller grått** Nøytrale farger har ingen ekte fargetone, så en oklch-blanding mot hvitt eller svart kan ta en merkelig vei. Bruk `in oklab` til overganger til en nøytral, eller skriv den nøytrale enden som en nesten nøytral farge med samme fargetone som den andre enden, for eksempel `oklch(97% 0.02 290)`.

## Å velge fargetoneretning

Mellom to hvilke som helst fargetoner finnes det to veier rundt fargehjulet. Som standard tar oklch `shorter hue`. Du kan be om `longer hue`, eller tvinge en retning med `increasing hue` eller `decreasing hue`. Nøkkelordet står rett etter fargerommet.

- Rødt til blått, shorter hue: `linear-gradient(90deg in oklch shorter hue, #ef4444, #3b82f6)`
- Rødt til blått, longer hue: `linear-gradient(90deg in oklch longer hue, #ef4444, #3b82f6)`

Den korte veien fra rødt til blått går gjennom magenta og fiolett. Den lange veien går gjennom oransje, gult, grønt og cyan.

`longer hue` er den ryddigste måten å tegne et spektrum på: to stopp i stedet for sju. Det er også slik du lager en full [regnbuegradient](https://gradiently.design/nb/guide/rainbow-gradient) der alle fargene føles like lyse, noe en sRGB-regnbue aldri helt får til.

## Å skrive farger i oklch()

Du kan også skrive selve stoppene i OKLCH: `oklch(L C H)`, der L er lyshet fra 0 % til 100 %, C er kroma fra 0 opp til omtrent 0,37, og H er fargetonevinkelen. Å holde L lik på tvers av stoppene gir en gradient med lik lyshet, noe som er vanskelig å få til på øyemål i hex. [oklch.com](https://oklch.com) er en god velger for å finne verdier.

```css
.band {
  /* same lightness and chroma, only the hue changes */
  background: linear-gradient(
    90deg in oklch,
    oklch(68% 0.17 300),
    oklch(68% 0.17 20),
    oklch(68% 0.17 70)
  );
}
```

Fiolett via korall til rav med én lyshet: ingen stopp stikker seg ut som lysere enn de andre.

Lik lyshet: fiolett, korall, rav: `linear-gradient(90deg in oklch, oklch(68% 0.17 300), oklch(68% 0.17 20), oklch(68% 0.17 70))`

Koden over, gjengitt. Farger utenfor en skjerms område avbildes til den nærmeste fargen den kan vise.

## Nettleserstøtte og reserver

Interpolasjonsmetoder og `oklch()`-farger støttes i gjeldende Chrome, Edge, Safari og Firefox. Nettlesere hopper over enhver deklarasjon de ikke kan tolke, så reserven er ganske enkelt å skrive den vanlige versjonen først. Der den forbedrede linjen ignoreres, blir sRGB-gradienten stående.

```css
.hero {
  background-color: #7c3aed;
  background-image: linear-gradient(135deg, #7c3aed, #f97316);
  background-image: linear-gradient(135deg in oklch, #7c3aed, #f97316);
}
```

Flat farge, deretter sRGB, deretter oklch. Hver nettleser beholder den siste linjen den forstår.

Vil du gå videre, passer perseptuelle blandinger godt sammen med korn for å hindre [gradientbanding](https://gradiently.design/nb/guide/gradient-banding), og med stopp- og hint-teknikkene i guiden om [CSS lineær gradient](https://gradiently.design/nb/guide/css-linear-gradient).

## FAQ

### Hva gjør in oklch i en CSS-gradient?

Den får nettleseren til å regne ut fargene mellom stoppene i OKLCH-fargerommet, noe som holder lysheten jevn og fargene mettede i stedet for å blande gjennom grått.

### Bør jeg bruke oklab eller oklch til gradienter?

Bruk oklch til livlige blandinger mellom ulike fargetoner, og oklab til overganger mot hvitt, svart eller grått, eller når du ikke vil at blandingen skal gå gjennom ekstra fargetoner.

### Hvorfor går oklch-gradienten min gjennom grønt?

OKLCH går rundt fargetonesirkelen, og mellom blått og gult går den korteste veien gjennom grønt. Bruk `in oklab` for en direkte vei, eller legg til et midtstopp.

### Må jeg skrive farger i oklch() for å bruke oklch-interpolasjon?

Nei. Hex-farger fungerer fint med `in oklch`, og det er bare blandingen som endres. Å skrive stopp i `oklch()` er nyttig når du vil styre lysheten presist.

### Hva skjer i nettlesere som ikke støtter in oklch?

De ignorerer hele deklarasjonen. Sett en vanlig sRGB-gradient på linjen før, så beholder de nettleserne den.