# CSS-gradient med OKLCH-interpolering för mjukare övergångar

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

De flesta trista gradienter med grå mitt är inte ett färgproblem utan ett matematikproblem. Två ord, in oklch, ändrar var webbläsaren gör beräkningen.

## The short version

- CSS-gradienter blandas i sRGB som standard när alla färger skrivs som hex, rgb() eller hsl(), vilket ofta gör mitten av en övergång trist eller grå.
- Om du lägger till in oklch eller in oklab i en gradient blandar webbläsaren i ett perceptuellt färgrum, vilket håller ljusheten jämn och färgerna rena.
- in oklab tar den rakaste vägen mellan två färger, medan in oklch färdas runt nyanscirkeln och håller mättnaden hög.
- Nyansnyckelord som shorter hue, longer hue, increasing hue och decreasing hue väljer åt vilket håll en oklch-gradient färdas runt färgcirkeln.
- Webbläsare ignorerar deklarationer de inte kan tolka, så att skriva en sRGB-gradient först och oklch-versionen efter den är en säker reservlösning.

**OKLCH i CSS-gradienter** innebär att du ber webbläsaren räkna ut gradientens mellanfärger i färgrummet OKLCH i stället för i sRGB. Du lägger till två ord efter riktningen: `linear-gradient(90deg in oklch, #2563eb, #facc15)`. Resultatet är en övergång vars ljushet ändras jämnt och vars mitt förblir levande, i stället för att sjunka ned i det grå, sladdriga band som vanliga sRGB-övergångar är kända för.

- sRGB (standard för 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 till gult på tre sätt. sRGB passerar grått, oklab förblir ren och neutral, oklch behåller full färg genom att färdas via turkos och grönt.

## Därför blir sRGB-gradienter grå

sRGB utformades för att koda skärmfärger effektivt, inte för att matcha hur människor ser. Att blanda två sRGB-färger innebär att räkna ut medelvärdet av deras röda, gröna och blå tal, och halvvägs mellan ett blått och ett gult finns en uppsättning medelmåttiga tal som ser grå ut. Ljusheten ändras också ojämnt, så vissa övergångar buktar ljusare eller mörkare i mitten. Designsidan av problemet finns i [sladdriga gradienter](https://gradiently.design/sv/guide/muddy-gradients).

Oklab och dess cylindriska form, OKLCH, utformades så att lika steg i deras tal ser ut som ungefär lika steg för ögat. Att blanda i dem håller den upplevda ljusheten i jämn rörelse, vilket är varför gradienter gjorda så ser mjukare och ljusare ut med samma ändpunkter.

## Syntaxen: in oklch och in oklab

Interpoleringsmetoden står i det första argumentet, före eller efter riktningen. Den fungerar i `linear-gradient()`, `radial-gradient()`, `conic-gradient()` och deras upprepande former, och även i `color-mix()`. Dina färgstopp kan förbli i hex, bara matematiken ändras.

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

Bara blandningen ändras, färgstoppen förblir som de skrivits.

| Färgrum | Hur det blandar | Använd det för |
| --- | --- | --- |
| `srgb` | Medelvärde av rött, grönt och blått | Att matcha äldre designer exakt |
| `srgb-linear` | Medelvärde av fysiskt ljus | Ljusblandande effekter, mittpunkterna ser ljusa ut |
| `oklab` | Rak linje genom ett perceptuellt rum | De flesta övergångar och alla toningar mot vitt, svart eller grått |
| `oklch` | Runt nyanscirkeln med jämn färgmättnad | Levande övergångar mellan flera nyanser, regnbågar, solnedgångar |
| `hsl` | Runt nyanscirkeln, inte perceptuellt | Färgcirklar, ljusheten är ojämn |

De färgrum du oftast använder. [MDN:s sida om color-interpolation-method](https://developer.mozilla.org/en-US/docs/Web/CSS/color-interpolation-method) listar alla.

## oklab eller oklch: vilket ska du välja

Båda är perceptuella, de skiljer sig i vägen de tar. **Oklab** drar en rak linje mellan de två färgerna, så mitten kan tappa lite mättnad när ändarna ligger långt ifrån varandra på färgcirkeln, men den vandrar aldrig genom en nyans du inte bad om. **OKLCH** behåller chroma, färgens intensitet, och går runt nyanscirkeln, så mitten förblir mättad men passerar de nyanser som ligger emellan. Blått till gult i oklch går via grönt. Ibland är det poängen, ibland är det en överraskning.

- Rosa till turkos, i oklab: `linear-gradient(90deg in oklab, #db2777, #0891b2)`
- Rosa till turkos, i oklch: `linear-gradient(90deg in oklch, #db2777, #0891b2)`
- Indigo till vitt, i oklab: `linear-gradient(90deg in oklab, #1e1b4b, #ffffff)`
- Violett till orange, i oklch: `linear-gradient(90deg in oklch, #7c3aed, #f97316)`

Oklab håller sig på den direkta vägen, oklch sveper genom nyanserna mellan sina ändar: rosa till turkos passerar violett och blått, violett till orange passerar magenta och rött.

> **Toning mot vitt, svart eller grått** Neutrala färger har ingen egentlig nyans, så en oklch-övergång mot vitt eller svart kan ta en märklig väg. För toningar mot en neutral färg använder du `in oklab`, eller skriver den neutrala änden som en nästan neutral färg med samma nyans som den andra änden, till exempel `oklch(97% 0.02 290)`.

## Att välja nyansriktning

Mellan två nyanser finns det två vägar runt färgcirkeln. Som standard tar oklch den `shorter hue`. Du kan be om `longer hue`, eller tvinga en riktning med `increasing hue` eller `decreasing hue`. Nyckelordet placeras direkt efter färgrummet.

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

Den korta vägen från rött till blått passerar magenta och violett. Den långa vägen passerar orange, gult, grönt och cyan.

`longer hue` är det prydligaste sättet att rita ett spektrum: två stopp i stället för sju. Det är också så du gör en hel [regnbågsgradient](https://gradiently.design/sv/guide/rainbow-gradient) vars färger alla känns lika ljusa, vilket en sRGB-regnbåge aldrig riktigt klarar.

## Att skriva färger i oklch()

Du kan också skriva själva stoppen i OKLCH: `oklch(L C H)`, där L är ljushet från 0 % till 100 %, C är chroma från 0 upp till ungefär 0,37 och H är nyansvinkeln. Om du håller L lika över stoppen får du en gradient med lika ljushet, vilket är svårt att göra med ögonmått i hex. [oklch.com](https://oklch.com) är en bra väljare för att hitta värden.

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

Violett via korall till bärnsten i samma ljushet: inget stopp sticker ut som ljusare än de andra.

Lika ljushet: violett, korall, bärnsten: `linear-gradient(90deg in oklch, oklch(68% 0.17 300), oklch(68% 0.17 20), oklch(68% 0.17 70))`

Koden ovan, renderad. Färger utanför en skärms omfång mappas till den närmaste färg den kan visa.

## Webbläsarstöd och reservlösningar

Interpoleringsmetoder och `oklch()`-färger stöds i nuvarande Chrome, Edge, Safari och Firefox. Webbläsare hoppar över varje deklaration de inte kan tolka, så reservlösningen är helt enkelt att skriva den vanliga versionen först. Där den förbättrade raden ignoreras blir sRGB-gradienten kvar.

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

Enfärgad yta, sedan sRGB, sedan oklch. Varje webbläsare behåller den sista raden den förstår.

Om du vill gå längre passar perceptuella övergångar bra ihop med korn för att förhindra [gradientbanding](https://gradiently.design/sv/guide/gradient-banding), och med stopp- och hint-teknikerna i guiden om [CSS linear-gradient](https://gradiently.design/sv/guide/css-linear-gradient).

## FAQ

### Vad gör in oklch i en CSS-gradient?

Det får webbläsaren att räkna ut mellanfärgerna i färgrummet OKLCH, vilket håller ljusheten jämn och färgerna mättade i stället för att blanda via grått.

### Ska jag använda oklab eller oklch för gradienter?

Använd oklch för levande övergångar mellan olika nyanser och oklab för toningar mot vitt, svart eller grått, eller när du inte vill att övergången ska passera extra nyanser.

### Varför går min oklch-gradient via grönt?

OKLCH färdas runt nyanscirkeln, och mellan blått och gult passerar den kortare vägen grönt. Använd `in oklab` för en direkt väg, eller lägg till ett mittstopp.

### Måste jag skriva färger i oklch() för att använda oklch-interpolering?

Nej. Hexfärger fungerar bra med `in oklch`, bara blandningen ändras. Att skriva stopp i `oklch()` är användbart när du vill styra ljusheten exakt.

### Vad händer i webbläsare som inte stöder in oklch?

De ignorerar hela deklarationen. Lägg en vanlig sRGB-gradient på raden före, så behåller de webbläsarna den.