# CSS-gradient med OKLCH-interpolation for blødere blandinger

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

De fleste matte gradienter med grå midte er ikke et farveproblem, men et matematikproblem. To ord, in oklch, ændrer, hvor browseren regner.

## The short version

- CSS-gradienter blander som standard i sRGB, når alle deres farver er skrevet som hex, rgb() eller hsl(), hvilket ofte gør midten af en blanding mat eller grå.
- Tilføjer du in oklch eller in oklab til en gradient, blander browseren i et perceptuelt farverum, hvilket holder lysstyrken jævn og farverne rene.
- in oklab tager den mest lige vej mellem to farver, mens in oklch rejser rundt om farvetonecirklen og holder mætningen høj.
- Nøgleord for farvetone som shorter hue, longer hue, increasing hue og decreasing hue vælger, hvilken vej en oklch-gradient rejser rundt om farvehjulet.
- Browsere ignorerer erklæringer, de ikke kan tolke, så at skrive en sRGB-gradient først og oklch-versionen bagefter er en sikker reserve.

**CSS-gradient med OKLCH**-interpolation betyder, at du beder browseren beregne gradientens mellemfarver i OKLCH-farverummet i stedet for i sRGB. Du tilføjer to ord efter retningen: `linear-gradient(90deg in oklch, #2563eb, #facc15)`. Resultatet er en blanding, hvis lysstyrke skifter jævnt, og hvis midte forbliver levende, i stedet for at synke ned i det grå, mudrede bånd, som almindelige sRGB-blandinger er kendt 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å til gul på tre måder. sRGB går gennem gråt, oklab forbliver ren og neutral, og oklch bevarer fuld farve ved at rejse gennem turkis og grøn.

## Hvorfor sRGB-gradienter bliver grå

sRGB blev designet til at kode skærmfarver effektivt og ikke til at svare til, hvordan folk ser. At blande to sRGB-farver betyder at tage gennemsnittet af deres rød-, grøn- og blåtal, og midtvejs mellem en blå og en gul er et sæt middelmådige tal, der ser gråt ud. Lysstyrken skifter også ujævnt, så nogle blandinger buler lysere eller mørkere i midten. Designsiden af problemet findes i [mudrede gradienter](https://gradiently.design/da/guide/muddy-gradients).

Oklab og dets cylindriske form, OKLCH, blev designet, så lige store trin i deres tal ser ud som nogenlunde lige store trin for øjet. At blande i dem holder den opfattede lysstyrke bevægende sig jævnt, og derfor ser gradienter lavet på den måde blødere og lysere ud ved de samme endepunkter.

## Syntaksen: in oklch og in oklab

Interpolationsmetoden står i det første argument, før eller efter retningen. Den virker i `linear-gradient()`, `radial-gradient()`, `conic-gradient()` og deres gentagende former og også i `color-mix()`. Dine farvestop kan blive i hex. Kun matematikken ændrer sig.

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

Kun blandingen ændrer sig. Farvestoppene forbliver, som de er skrevet.

| Farverum | Sådan blander det | Brug det til |
| --- | --- | --- |
| `srgb` | Tager gennemsnittet af rød, grøn og blå | At matche gamle designs præcist |
| `srgb-linear` | Tager gennemsnittet af fysisk lys | Effekter med lysblanding, midtpunkterne ser lyse ud |
| `oklab` | Ret linje gennem et perceptuelt rum | De fleste blandinger og enhver tone til hvid, sort eller grå |
| `oklch` | Rundt om farvetonecirklen med jævn kromatik | Levende blandinger med flere farvetoner, regnbuer, solnedgange |
| `hsl` | Rundt om farvetonecirklen, ikke perceptuel | Farvehjul, lysstyrken er ujævn |

De farverum, du oftest vil bruge. [MDN’s side om color-interpolation-method](https://developer.mozilla.org/en-US/docs/Web/CSS/color-interpolation-method) viser dem alle.

## oklab eller oklch: hvilken skal du vælge

Begge er perceptuelle. De adskiller sig i den vej, de tager. **Oklab** tegner en ret linje mellem de to farver, så midten kan miste noget mætning, når enderne ligger langt fra hinanden på farvehjulet, men den vandrer aldrig gennem en farvetone, du ikke har bedt om. **OKLCH** bevarer kromatikken, farvens intensitet, og går rundt om farvetonecirklen, så midten forbliver mættet, men passerer farvetonerne imellem. Blå til gul i oklch går gennem grøn. Nogle gange er det pointen. Andre gange er det en overraskelse.

- Pink til turkis, i oklab: `linear-gradient(90deg in oklab, #db2777, #0891b2)`
- Pink til turkis, i oklch: `linear-gradient(90deg in oklch, #db2777, #0891b2)`
- Indigo til hvid, i oklab: `linear-gradient(90deg in oklab, #1e1b4b, #ffffff)`
- Violet til orange, i oklch: `linear-gradient(90deg in oklch, #7c3aed, #f97316)`

Oklab bliver på den direkte vej. Oklch fejer gennem farvetonerne mellem enderne: pink til turkis passerer violet og blå, violet til orange passerer magenta og rød.

> **Fade til hvid, sort eller grå** Neutrale farver har ingen rigtig farvetone, så en oklch-blanding mod hvid eller sort kan tage en mærkelig rute. Til fades til en neutral farve bruger du `in oklab` eller skriver den neutrale ende som en næsten neutral farve med samme farvetone som den anden ende, som `oklch(97% 0.02 290)`.

## Vælg farvetoneretning

Mellem to farvetoner er der to veje rundt om farvehjulet. Som standard tager oklch `shorter hue`. Du kan bede om `longer hue` eller tvinge en retning med `increasing hue` eller `decreasing hue`. Nøgleordet står lige efter farverummet.

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

Den korte vej fra rød til blå går gennem magenta og violet. Den lange vej går gennem orange, gul, grøn og cyan.

`longer hue` er den ryddeligste måde at tegne et spektrum: to stop i stedet for syv. Det er også sådan, du laver en hel [regnbuegradient](https://gradiently.design/da/guide/rainbow-gradient), hvis farver alle føles lige lyse, hvilket en sRGB-regnbue aldrig helt klarer.

## Skriv farver i oklch()

Du kan også skrive selve stoppene i OKLCH: `oklch(L C H)`, hvor L er lysstyrke fra 0 % til 100 %, C er kromatik fra 0 op til omkring 0,37, og H er farvetonens vinkel. Holder du L ens på tværs af stop, får du en gradient med ens lysstyrke, hvilket er svært at ramme på øjemål i hex. [oklch.com](https://oklch.com) er en god vælger til at finde værdier.

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

Violet gennem koral til rav ved én lysstyrke: intet stop skiller sig ud som lysere end de andre.

Ens lysstyrke: violet, koral, rav: `linear-gradient(90deg in oklch, oklch(68% 0.17 300), oklch(68% 0.17 20), oklch(68% 0.17 70))`

Koden ovenfor, gengivet. Farver uden for en skærms område afbildes på den nærmeste farve, den kan vise.

## Browserunderstøttelse og reserver

Interpolationsmetoder og `oklch()`-farver understøttes i nuværende Chrome, Edge, Safari og Firefox. Browsere springer enhver erklæring over, de ikke kan tolke, så reserven er blot at skrive den almindelige version først. Hvor den forbedrede linje ignoreres, bliver 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);
}
```

Flad farve, så sRGB, så oklch. Hver browser beholder den sidste linje, den forstår.

Vil du gå videre, passer perceptuelle blandinger godt sammen med korn, der forhindrer [gradientbanding](https://gradiently.design/da/guide/gradient-banding), og med teknikkerne med stop og hints i guiden til [CSS lineær gradient](https://gradiently.design/da/guide/css-linear-gradient).

## FAQ

### Hvad gør in oklch i en CSS-gradient?

Det får browseren til at beregne mellemfarverne i OKLCH-farverummet, hvilket holder lysstyrken jævn og farverne mættede i stedet for at blande gennem gråt.

### Skal jeg bruge oklab eller oklch til gradienter?

Brug oklch til levende blandinger mellem forskellige farvetoner og oklab til fades mod hvid, sort eller grå, eller når du ikke vil have blandingen til at passere ekstra farvetoner.

### Hvorfor går min oklch-gradient gennem grøn?

OKLCH rejser rundt om farvetonecirklen, og mellem blå og gul går den korteste vej gennem grøn. Brug `in oklab` til en direkte vej, eller tilføj et midterstop.

### Skal jeg skrive farver i oklch() for at bruge oklch-interpolation?

Nej. Hexfarver virker fint med `in oklch`. Kun blandingen ændrer sig. At skrive stop i `oklch()` er nyttigt, når du vil styre lysstyrken præcist.

### Hvad sker der i browsere, der ikke understøtter in oklch?

De ignorerer hele erklæringen. Sæt en normal sRGB-gradient på linjen før den, så beholder de browsere den.