# Interpolation i gradienter: sRGB, OKLab og hvorfor det betyder noget

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

Vælg blå og gul, bland dem, og midten bliver grå. Det er ikke dine farver, der svigter. Det er matematikken i det farverum, der blander, og siden CSS Color 4 kan du ændre det.

## The short version

- Interpolation i gradienter er den metode, der beregner hver farve mellem to stop, og det farverum, det sker i, ændrer resultatet.
- Blanding i sRGB bevæger sig i en lige linje gennem røde, grønne og blå værdier, så modsatte farver som blå og gul passerer gennem grå.
- OKLab er designet, så lige store trin ser ud som lige store ændringer for øjet, hvilket giver en glattere, mere jævn lyshed hen over en gradient.
- OKLCH blander lyshed, kroma og farvetone hver for sig, så farverne forbliver mættede og rejser rundt om farvecirklen i stedet for gennem dens grå centrum.
- I CSS vælger du rummet inde i gradienten, for eksempel `linear-gradient(in oklch, #2563eb, #f97316)`.

**Interpolation i gradienter** er den måde, farverne mellem dine stop beregnes på. Du vælger blå i den ene ende og gul i den anden; softwaren skal opfinde hver farve imellem, og det gør den ved at trække en linje mellem de to farver i et bestemt farverum. Hvilket rum den bruger, ændrer det, du ser. Bland i sRGB, og blå til gul passerer gennem flad grå. Bland i OKLCH, og den passerer gennem en klar petrol. Samme stop, vidt forskellig gradient.

## Hvad interpolation i gradienter betyder

Enhver farve kan beskrives som et punkt i et rum. I sRGB er de tre akser rød, grøn og blå. I OKLab er de lyshed og to modsatte akser, grøn til rød og blå til gul. I OKLCH er de lyshed, kroma (hvor farverig) og farvetone (vinklen rundt om cirklen). At interpolere betyder at gå fra det ene punkt til det andet. En lige vej gennem ét rum kan være en kurve, eller en omvej gennem grå, i et andet.

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

Farven halvvejs mellem ren blå og ren gul i fire rum. sRGB lander på død grå; OKLCH lander på en livlig petrol.

## sRGB, OKLab og OKLCH side om side

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

To farvepar, tre rum hver. sRGB-rækkerne dykker mat og mørkt i midten; OKLab udjævner lysheden; OKLCH bevarer farven.

| Rum | Sådan blander det | Bedst til | Pas på med |
| --- | --- | --- | --- |
| sRGB | Lige linje gennem røde, grønne og blå værdier | At matche gamle designs præcist | Grå, mørke midter mellem fjerne farvetoner |
| Lineær sRGB | Det samme, uden gammakodning | Lysblanding, glød | Midtpunkter ser for lyse ud |
| OKLab | Perceptuelt jævn lyshed og farve | Glatte, naturlige blandinger; standarden for moderne CSS-farver | Modsætninger mister stadig lidt farve |
| OKLCH | Lyshed, kroma og farvetone hver for sig | Livlige blandinger, regnbuer, brandfarver langt fra hinanden | Kan passere gennem uventede farvetoner |

De fire rum, du oftest møder. CSS tilbyder også andre, som `lab`, `lch`, `hsl` og `display-p3`.

## Hvorfor sRGB-gradienter bliver grå eller mudrede

sRGB blev designet til skærme, ikke til øjet. Dets tal er gammakodede, og dets akser stemmer ikke overens med, hvordan vi ser farvetone eller lyshed. Når to farver ligger på hver sin side af cirklen, krydser den lige linje mellem dem tæt på det neutrale centrum, så midten mister sin farve. Gennemsnittet af blå og gul bliver `#808080`. Det er hovedårsagen til [mudrede gradienter](https://gradiently.design/da/guide/muddy-gradients), og det er derfor, en designers instinkt om at tilføje en brofarve virker: det ekstra stop bøjer vejen uden om det grå.

## OKLab: jævne trin for øjet

OKLab, udgivet af Björn Ottosson i 2020, blev bygget, så lige store afstande ligner lige store forskelle. Det praktiske resultat er en gradient, hvis lyshed ændrer sig jævnt fra ende til ende, uden mørkt dyk eller lys bule i midten. Den tager stadig en lige vej, så to ægte modsætninger mister lidt farve i midten, men langt mindre end i sRGB. Moderne CSS bruger OKLab som standard, når en farve i en gradient er skrevet i en nyere syntaks som `oklch()`.

## OKLCH: hold farven i live

OKLCH er det samme rum som OKLab, beskrevet i polær form: lyshed, kroma og en farvetonevinkel. Interpolation i det går rundt om cirklen, så farverne imellem bevarer deres mætning. Det er ideelt til livlige gradienter, hvor brandet står forrest, og til [regnbuegradienter](https://gradiently.design/da/guide/rainbow-gradient). Du kan også vælge, hvilken vej rundt om cirklen den skal gå, med `shorter hue` (standarden), `longer hue`, `increasing hue` eller `decreasing hue`. [Guiden til OKLCH](https://gradiently.design/da/guide/oklch-explained) forklarer rummet mere i dybden.

- Rød til blå, kortere vej: `linear-gradient(90deg in oklch shorter hue, #ef4444, #3b82f6)`
- Rød til blå, længere vej: `linear-gradient(90deg in oklch longer hue, #ef4444, #3b82f6)`

De samme to farver. Den korte vej går gennem magenta; den lange vej rejser gennem orange, gul og grøn.

## Sådan indstiller du interpolation i CSS

Tilføj `in <space>` før stoppene, efter en eventuel vinkel eller form. Browsere, der ikke forstår det, ignorerer hele deklarationen, så skriv en sRGB-udgave først som reserve. Hvert rum og hvert nøgleord for farvetone står i [MDNs reference om farveinterpolation](https://developer.mozilla.org/en-US/docs/Web/CSS/color-interpolation-method), og [CSS-gradienter i OKLCH](https://gradiently.design/da/guide/css-gradient-oklch) har flere opskrifter.

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

Interpolationsnøgleordet virker i lineære, radiale og koniske gradienter. En konisk gradient fra rød tilbage til rød med `longer hue` tegner en fuld, jævn regnbue.

## Hvilket farverum du skal vælge

1. **Brug OKLab som standard** Til de fleste blandinger af to eller tre farver giver det det glatteste resultat uden overraskelser.
2. **Brug OKLCH til fjerne eller livlige farver** Når farverne ligger langt fra hinanden på cirklen, og du vil have midten til at forblive klar.
3. **Behold sRGB for at matche gammelt arbejde** Skal en gradient se identisk ud med en eksisterende fil eller et billede, så bland i det samme rum, den blev lavet i.
4. **Tjek midtpunktet** Uanset rum, så se på farven halvvejs. Er den grå eller en farvetone, du ikke forventede, så skift rum, eller tilføj et stop.

### Gammel vane

- Bland i sRGB, og tilføj stop for at skjule det grå
- Accepter et mørkt dyk i midten
- Vælg farver tæt på hinanden for at være på den sikre side

### Bedre

- Bland i OKLab eller OKLCH, og nøjes med færre stop
- Jævn lyshed fra ende til ende
- Brug modigere par, og lad rummet holde dem rene

Interpolation er kun én del af en god blanding; hvor stoppene sidder, betyder lige så meget, og det gennemgås i [farvestop i gradienter](https://gradiently.design/da/guide/gradient-stops). Vil du hellere springe matematikken over, er Marks fra Gradiently færdige gradientbaggrunde, der gengives i alle størrelser, du designer i, og [udviklerdokumentationen](https://gradiently.design/da/developers) viser, hvordan ChatGPT eller Claude kan søge i Marks og lave designs, der åbner i Studio.

## FAQ

### Hvad er interpolation i gradienter?

Beregningen af hver farve mellem to stop i en gradient. Det farverum, den sker i, som sRGB eller OKLab, ændrer, hvilke farver der dukker op i midten.

### Hvorfor ser mine gradienter grå ud i midten?

De blander i sRGB mellem farver på hver sin side af cirklen, så vejen krydser tæt på grå. Bland i OKLCH, eller tilføj en brofarve.

### Er OKLab eller OKLCH bedst til gradienter?

OKLab giver de mest jævne, naturlige blandinger. OKLCH holder farverne mere mættede og er bedre til livlige par og regnbuer.

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

Tilføj `in oklch` før farverne, for eksempel `linear-gradient(90deg in oklch, #2563eb, #f97316)`. Skriv en sRGB-udgave først som reserve.

### Hvilket farverum bruger CSS-gradienter som standard?

sRGB, når alle farver bruger ældre syntaks som hex eller `rgb()`, og OKLab, når en farve bruger en nyere syntaks som `oklch()`.