# Gradientinterpolering: sRGB, OKLab och varför det spelar roll

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

Välj blått och gult, blanda dem, och mitten blir grå. Det är inte dina färger som sviker. Det är färgrymdens matematik som sköter blandningen, och sedan CSS Color 4 kan du ändra den.

## The short version

- Gradientinterpolering är metoden som räknar ut varje färg mellan två stopp, och den färgrymd det sker i förändrar resultatet.
- Blandning i sRGB rör sig i en rät linje genom värdena för rött, grönt och blått, så motsatta färger som blått och gult passerar genom grått.
- OKLab är utformat så att lika steg ser ut som lika förändringar för ögat, vilket ger mjukare och jämnare ljushet genom en gradient.
- OKLCH blandar ljushet, kroma och nyans var för sig, så färgerna förblir mättade och färdas runt färghjulet i stället för genom dess gråa mitt.
- I CSS väljer du rymden inne i gradienten, till exempel `linear-gradient(in oklch, #2563eb, #f97316)`.

**Gradientinterpolering** är hur färgerna mellan dina stopp beräknas. Du väljer blått i ena änden och gult i den andra, och programvaran måste hitta på varje färg däremellan, vilket den gör genom att dra en linje mellan de två färgerna i någon färgrymd. Vilken rymd den använder ändrar vad du ser. Blanda i sRGB och blått till gult passerar genom platt grått. Blanda i OKLCH och det passerar genom en klar blågrön. Samma stopp, mycket olika gradient.

## Vad gradientinterpolering innebär

Varje färg kan beskrivas som en punkt i en rymd. I sRGB är de tre axlarna rött, grönt och blått. I OKLab är de ljushet och två motpolsaxlar, grönt till rött och blått till gult. I OKLCH är de ljushet, kroma (hur färgstark) och nyans (vinkeln runt hjulet). Att interpolera betyder att gå från en punkt till den andra. En rak promenad genom en rymd kan vara en kurva, eller en omväg genom grått, i en annan.

- Start: blått: #0000ff
- Mittpunkt i sRGB: #808080
- Mittpunkt, linjär sRGB: #bcbcbc
- Mittpunkt i OKLab: #6cabc7
- Mittpunkt i OKLCH: #00cfbd
- Slut: gult: #ffff00

Färgen halvvägs mellan rent blått och rent gult i fyra rymder. sRGB landar på dött grått, OKLCH landar på en livfull blågrön.

## sRGB, OKLab och OKLCH sida vid sida

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

Två färgpar, tre rymder vardera. sRGB-raderna sjunker matta och mörka i mitten, OKLab jämnar ut ljusheten och OKLCH behåller färgen.

| Rymd | Hur den blandar | Bäst för | Se upp med |
| --- | --- | --- | --- |
| sRGB | Rät linje genom värdena för rött, grönt, blått | Att matcha gamla designer exakt | Grått, mörka mitter mellan avlägsna nyanser |
| Linjär sRGB | Samma, utan gammakodning | Ljusblandning, sken | Mittpunkterna ser för ljusa ut |
| OKLab | Perceptuellt jämn ljushet och färg | Mjuka, naturliga blandningar, standard för moderna CSS-färger | Motsatser tappar fortfarande lite färg |
| OKLCH | Ljushet, kroma och nyans var för sig | Livfulla blandningar, regnbågar, varumärkesfärger långt ifrån varandra | Kan passera genom oväntade nyanser |

De fyra rymder du troligast möter. CSS erbjuder också andra, som `lab`, `lch`, `hsl` och `display-p3`.

## Varför sRGB-gradienter blir grå eller leriga

sRGB utformades för skärmar, inte för ögat. Dess tal är gammakodade, och dess axlar stämmer inte med hur vi ser nyans eller ljushet. När två färger ligger på motsatta sidor av hjulet korsar den raka linjen mellan dem nära det neutrala centrumet, så mitten tappar sin färg. Blått och gult får medelvärdet `#808080`. Det här är huvudorsaken till [leriga gradienter](https://gradiently.design/sv/guide/muddy-gradients), och det är därför en formgivares instinkt att lägga till en överbryggande färg fungerar: det extra stoppet böjer vägen runt det grå.

## OKLab: jämna steg för ögat

OKLab, publicerat av Björn Ottosson 2020, byggdes så att lika avstånd ser ut som lika skillnader. Det praktiska resultatet är en gradient vars ljushet ändras jämnt från ände till ände, utan någon mörk dipp eller ljus buckla i mitten. Den tar fortfarande en rät väg, så två verkliga motsatser tappar en del färg i mitten, men mycket mindre än i sRGB. Modern CSS använder OKLab som standard så snart någon färg i en gradient skrivs med en nyare syntax som `oklch()`.

## OKLCH: håll färgen vid liv

OKLCH är samma rymd som OKLab, beskriven i polär form: ljushet, kroma och en nyansvinkel. Att interpolera i den går runt hjulet, så färgerna däremellan behåller sin mättnad. Det är idealiskt för livfulla, varumärkesdrivna gradienter och [regnbågsgradienter](https://gradiently.design/sv/guide/rainbow-gradient). Du kan också välja åt vilket håll runt hjulet du går med `shorter hue` (standard), `longer hue`, `increasing hue` eller `decreasing hue`. [OKLCH-guiden](https://gradiently.design/sv/guide/oklch-explained) förklarar rymden mer ingående.

- Rött till blått, kortare nyans: `linear-gradient(90deg in oklch shorter hue, #ef4444, #3b82f6)`
- Rött till blått, längre nyans: `linear-gradient(90deg in oklch longer hue, #ef4444, #3b82f6)`

Samma två färger. Den kortare vägen går genom magenta, den längre vägen färdas genom orange, gult och grönt.

## Så ställer du in gradientinterpolering i CSS

Lägg till `in <rymd>` före stoppen, efter eventuell vinkel eller form. Webbläsare som inte förstår det ignorerar hela deklarationen, så skriv en sRGB-version först som reserv. Alla rymder och nyansnyckelord listas i [MDN:s referens för färginterpolering](https://developer.mozilla.org/en-US/docs/Web/CSS/color-interpolation-method), och [CSS-gradienter i OKLCH](https://gradiently.design/sv/guide/css-gradient-oklch) har fler recept.

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

Interpoleringsnyckelordet fungerar i linjära, radiella och koniska gradienter. En konisk gradient från rött tillbaka till rött med `longer hue` ritar en hel, jämn regnbåge.

## Vilken färgrymd du ska välja

1. **Utgå från OKLab** För de flesta blandningar av två eller tre färger ger den det mjukaste resultatet utan överraskningar.
2. **Använd OKLCH för avlägsna eller livfulla färger** När färgerna ligger långt ifrån varandra på hjulet och du vill att mitten ska förbli klar.
3. **Behåll sRGB för att matcha gammalt arbete** Om en gradient måste se identisk ut med en befintlig tillgång eller bild, blanda i samma rymd som den gjordes i.
4. **Kontrollera mittpunkten** Oavsett rymd, titta på färgen halvvägs. Om den är grå eller en nyans du inte väntade dig, byt rymd eller lägg till ett stopp.

### Gammal vana

- Blanda i sRGB och lägg till stopp för att dölja grått
- Acceptera en mörk dipp i mitten
- Välj färger som ligger nära varandra för att vara på den säkra sidan

### Bättre

- Blanda i OKLab eller OKLCH och behåll färre stopp
- Jämn ljushet från ände till ände
- Använd djärvare par och låt rymden hålla dem rena

Interpolering är bara en del av en bra blandning, och var stoppen sitter betyder minst lika mycket, vilket tas upp i [gradientens färgstopp](https://gradiently.design/sv/guide/gradient-stops). Om du hellre hoppar över matematiken är Gradiently-Marks färdiga gradientbakgrunder som renderas i varje storlek du designar i, och [utvecklardokumentationen](https://gradiently.design/sv/developers) visar hur ChatGPT eller Claude kan söka efter Marks och skapa designer som öppnas i Studio.

## FAQ

### Vad är gradientinterpolering?

Beräkningen av varje färg mellan två gradientstopp. Den färgrymd det sker i, som sRGB eller OKLab, ändrar vilka färger som dyker upp i mitten.

### Varför ser mina gradienter grå ut i mitten?

De blandas i sRGB mellan färger på motsatta sidor av hjulet, så vägen korsar nära grått. Blanda i OKLCH eller lägg till en överbryggande färg.

### Är OKLab eller OKLCH bättre för gradienter?

OKLab ger de jämnaste, mest naturliga blandningarna. OKLCH håller färgerna mer mättade och passar bättre för livfulla par och regnbågar.

### Hur använder jag OKLCH i en CSS-gradient?

Lägg till `in oklch` före färgerna, till exempel `linear-gradient(90deg in oklch, #2563eb, #f97316)`. Skriv en sRGB-version först som reserv.

### Vilken färgrymd använder CSS-gradienter som standard?

sRGB när alla färger använder äldre syntax som hex eller `rgb()`, och OKLab när någon färg använder en nyare syntax som `oklch()`.