# Gradientinterpolasjon: sRGB, OKLab og hvorfor det betyr noe

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

Velg blått og gult, bland dem, og midten blir grå. Det er ikke fargene som svikter, men matematikken i fargerommet som blander dem. Siden CSS Color 4 kan du endre det.

## The short version

- Gradientinterpolasjon er metoden som beregner hver farge mellom to stopp. Fargerommet beregningen skjer i, endrer resultatet.
- Blanding i sRGB følger en rett linje gjennom røde, grønne og blå verdier, så motsatte farger som blått og gult går gjennom grått.
- OKLab er laget så like trinn ser ut som like endringer for øyet, noe som gir jevnere lyshet gjennom gradienten.
- OKLCH blander lyshet, kroma og fargetone hver for seg, så fargene beholder metningen og går rundt fargesirkelen fremfor gjennom det grå sentrumet.
- I CSS velger du fargerom inne i gradienten, for eksempel `linear-gradient(in oklch, #2563eb, #f97316)`.

**Gradientinterpolasjon** er måten fargene mellom stoppene beregnes på. Du velger blått i den ene enden og gult i den andre; programvaren må finne alle fargene imellom. Det gjør den ved å tegne en linje mellom fargene i et fargerom. Valget av rom endrer det du ser. I sRGB går blått til gult gjennom flatt grått. I OKLCH går det gjennom klart petroleumsgrønt. Samme stopp, svært ulike gradienter.

## Hva gradientinterpolasjon betyr

Hver farge kan beskrives som et punkt i et rom. I sRGB er de tre aksene rødt, grønt og blått. I OKLab er de lyshet og to motsetningsakser, grønt til rødt og blått til gult. I OKLCH er de lyshet, kroma (hvor fargerik) og fargetone (vinkelen rundt sirkelen). Å interpolere betyr å gå fra ett punkt til det andre. En rett vei gjennom ett rom kan være en kurve, eller en omvei gjennom grått, i et annet.

- Start: blått: #0000ff
- Midtpunkt i sRGB: #808080
- Midtpunkt, lineær sRGB: #bcbcbc
- Midtpunkt i OKLab: #6cabc7
- Midtpunkt i OKLCH: #00cfbd
- Slutt: gult: #ffff00

Fargen halvveis mellom rent blått og rent gult i fire rom. sRGB lander på dødt grått; OKLCH på livlig petroleumsgrønt.

## sRGB, OKLab og OKLCH side om side

- Blått til oransje, sRGB: `linear-gradient(90deg in srgb, #2563eb, #f97316)`
- Blått til oransje, OKLab: `linear-gradient(90deg in oklab, #2563eb, #f97316)`
- Blått til oransje, OKLCH: `linear-gradient(90deg in oklch, #2563eb, #f97316)`
- Rødt til blått, sRGB: `linear-gradient(90deg in srgb, #ff0000, #0000ff)`
- Rødt til blått, OKLab: `linear-gradient(90deg in oklab, #ff0000, #0000ff)`
- Rødt til blått, OKLCH: `linear-gradient(90deg in oklch, #ff0000, #0000ff)`

To fargepar, tre rom hver. sRGB-radene blir matte og mørke i midten; OKLab jevner ut lysheten; OKLCH bevarer fargen.

| Rom | Slik blander det | Best til | Vær oppmerksom på |
| --- | --- | --- | --- |
| sRGB | Rett linje gjennom røde, grønne og blå verdier | Å gjengi gamle design nøyaktig | Grå, mørke midtpartier mellom fjerne toner |
| Lineær sRGB | Det samme, uten gammakoding | Lysblanding, glød | Midtpunkter virker for lyse |
| OKLab | Visuelt jevn lyshet og farge | Jevne, naturlige blandinger; standarden for moderne CSS-farger | Motsatte farger mister fortsatt noe farge |
| OKLCH | Lyshet, kroma og fargetone hver for seg | Livlige blandinger, regnbuer, fjerne merkevarefarger | Kan gå gjennom uventede fargetoner |

De fire rommene du oftest møter. CSS har også andre, som `lab`, `lch`, `hsl` og `display-p3`.

## Hvorfor sRGB-gradienter blir grå eller grumsete

sRGB ble laget for skjermer, ikke for øyet. Tallene er gammakodet, og aksene samsvarer ikke med hvordan vi ser fargetone eller lyshet. Når to farger ligger på hver sin side av sirkelen, krysser den rette linjen mellom dem nær det nøytrale sentrumet. Da mister midten fargen. Gjennomsnittet av blått og gult blir `#808080`. Dette er hovedårsaken til [grumsete gradienter](https://gradiently.design/nb/guide/muddy-gradients), og forklarer hvorfor det hjelper å legge til en brofarge: det ekstra stoppet bøyer veien rundt det grå.

## OKLab: jevne trinn for øyet

OKLab, publisert av Björn Ottosson i 2020, ble laget så like avstander ser ut som like forskjeller. Det gir en gradient med jevn endring i lyshet fra ende til ende, uten mørk grop eller lys kul i midten. Rommet følger fortsatt en rett vei, så ekte motsetninger mister noe farge i sentrum, men langt mindre enn i sRGB. Moderne CSS bruker OKLab som standard når en farge i gradienten skrives med nyere syntaks som `oklch()`.

## OKLCH: bevar levende farger

OKLCH er samme rom som OKLab, beskrevet i polar form: lyshet, kroma og en fargetonevinkel. Interpolasjon her går rundt sirkelen, så mellomfargene beholder metningen. Det passer livlige gradienter som fremhever merkevaren og [regnbuegradienter](https://gradiently.design/nb/guide/rainbow-gradient). Du kan også velge vei rundt sirkelen med `shorter hue` (standarden), `longer hue`, `increasing hue` eller `decreasing hue`. [OKLCH-guiden](https://gradiently.design/nb/guide/oklch-explained) forklarer rommet grundigere.

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

De samme to fargene. Den korte veien går gjennom magenta; den lange går gjennom oransje, gult og grønt.

## Slik setter du gradientinterpolasjon i CSS

Legg til `in <space>` før stoppene, etter eventuell vinkel eller form. Nettlesere som ikke forstår dette, ignorerer hele deklarasjonen, så skriv først en sRGB-versjon som reserve. Alle rom og nøkkelord for fargetone er listet i [MDNs referanse for fargeinterpolasjon](https://developer.mozilla.org/en-US/docs/Web/CSS/color-interpolation-method), og [CSS-gradienter i OKLCH](https://gradiently.design/nb/guide/css-gradient-oklch) har flere oppskrifter.

```css
.hero {
  /* Fallback for older browsers: a bridge stop avoids the grey middle */
  background: linear-gradient(135deg, #2563eb, #c026d3, #f97316);
  /* Modern browsers: let OKLCH keep the colour */
  background: linear-gradient(135deg in oklch, #2563eb, #f97316);
}

.radial {
  background: radial-gradient(circle at 30% 30% in oklab, #fde68a, #0f766e);
}

.conic-rainbow {
  background: conic-gradient(in oklch longer hue, #ef4444, #ef4444);
}
```

Interpolasjonsnøkkelordet fungerer i lineære, radielle og koniske gradienter. En konisk gradient fra rødt tilbake til rødt med `longer hue` tegner en hel, jevn regnbue.

## Hvilket fargerom du bør velge

1. **Bruk OKLab som standard** For de fleste blandinger med to eller tre farger gir det det jevneste resultatet uten overraskelser.
2. **Bruk OKLCH til fjerne eller klare farger** Når fargene ligger langt fra hverandre i sirkelen og du vil holde midten lys og fargerik.
3. **Behold sRGB for å gjengi eldre arbeid** Hvis gradienten må være identisk med en eksisterende ressurs eller et bilde, bland i samme rom som originalen ble laget i.
4. **Sjekk midtpunktet** Se på fargen halvveis uansett rom. Hvis den er grå eller har en uventet tone, bytt rom eller legg til et stopp.

### Gammel vane

- Bland i sRGB og legg til stopp for å skjule grått
- Godta et mørkt søkk i midten
- Velg farger som ligger tett for å være trygg

### Bedre

- Bland i OKLab eller OKLCH og bruk færre stopp
- Jevn lyshet fra ende til ende
- Bruk dristigere par og la rommet holde dem rene

Interpolasjon er bare én del av en god blanding. Stopp-plasseringen betyr like mye og dekkes i [fargestopp i gradienter](https://gradiently.design/nb/guide/gradient-stops). Vil du hoppe over matematikken, er Marks i Gradiently ferdige gradientbakgrunner som gjengis i alle størrelser du designer i. [Utviklerdokumentasjonen](https://gradiently.design/nb/developers) viser hvordan ChatGPT eller Claude kan søke etter Marks og lage design som åpnes i Studio.

## FAQ

### Hva er gradientinterpolasjon?

Beregningen av alle fargene mellom to gradientstopp. Fargerommet beregningen skjer i, som sRGB eller OKLab, endrer fargene som vises i midten.

### Hvorfor er gradientene mine grå i midten?

De blandes i sRGB mellom farger på hver sin side av sirkelen, så veien krysser nær grått. Bland i OKLCH eller legg til en brofarge.

### Er OKLab eller OKLCH best til gradienter?

OKLab gir de jevneste, mest naturlige blandingene. OKLCH holder fargene mer mettede og passer bedre til livlige par og regnbuer.

### Hvordan bruker jeg OKLCH i en CSS-gradient?

Legg til `in oklch` før fargene, for eksempel `linear-gradient(90deg in oklch, #2563eb, #f97316)`. Skriv først en sRGB-versjon som reserve.

### Hvilket fargerom bruker CSS-gradienter som standard?

sRGB når alle fargene bruker eldre syntaks som hex eller `rgb()`, og OKLab når minst én bruker nyere syntaks som `oklch()`.