# Hvorfor noen gradienter blir grå i midten, og hvordan du stopper det

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

Blått og gult burde gi en nydelig gradient. Blander du dem på standardmåten, får du en grå flekk i midten. Her er nøyaktig hvorfor, og fire måter å holde hver overgang ren på.

## The short version

- En grumsete gradient er en som blir grå, brun eller matt der fargene møtes, i stedet for å holde seg klar hele veien over.
- Årsaken er blanding i fargerommet sRGB, der punktet midt mellom to motsatte farger, som blått og gult, er en flat grå.
- Blanding i OKLCH bevarer fargeintensiteten ved å gå rundt fargehjulet i stedet for rett gjennom grått.
- Et håndplukket midtstopp, som blågrønt mellom blått og gult, retter grumset i ethvert verktøy og ethvert format.
- Nabofarger på fargehjulet blir nesten aldri grumsete, og derfor er analoge gradienter de tryggeste å designe.

En **grumsete gradient** er en overgang som blir grå, brun eller matt i midten, selv om begge fargene er klare. Det skjer fordi de fleste verktøy blander farger i fargerommet sRGB og mikser verdiene for rødt, grønt og blått i rette linjer. Når de to fargene ligger på hver sin side av fargehjulet, møtes de rette linjene nær grått. Løsningen er å velge ruten overgangen tar: legg til en farge i midten, bland i OKLCH, eller bruk fargetoner som ligger nærmere hverandre.

## Hvorfor motsatte farger blir grå

Se på tallene. Ren blå er rød 0, grønn 0, blå 255. Ren gul er rød 255, grønn 255, blå 0. Midt mellom dem lander hver kanal på omtrent 128, som er `#808080`: en mellomgrå. Det samme skjer med rødt og cyan, oransje og asurblå, eller ethvert annet komplementært par. Matematisk går den rette linjen mellom dem rett gjennom gråaksen.

- Blå til gul i sRGB: `linear-gradient(90deg, #0000ff, #ffff00)`
- Rød til cyan i sRGB: `linear-gradient(90deg, #ff0000, #00ffff)`
- Oransje til asurblå i sRGB: `linear-gradient(90deg, #ff8000, #0080ff)`

Tre komplementære par blandet på standardmåten. Hvert går gjennom den samme flate gråfargen i midten.

Et annet og mer subtilt problem er den mørke dumpen. Blå til rød i sRGB går gjennom `#800080`, en lilla som er mørkere enn begge endene, så midten av overgangen ser ut som et blåmerke. Fargene er ikke motsatte, men overgangen mister likevel lysstyrke der de møtes.

## Løsning 1: legg til et midtstopp

Den enkleste løsningen fungerer i alle verktøy og alle formater: velg fargen du vil ha i midten, og sett den der selv. Velg en klar, mettet farge som ligger mellom de to endene på fargehjulet. Mellom blått og gult er det blågrønt eller grønt. Mellom oransje og blått tar en rosa den varme ruten, den de fleste solnedgangsgradienter bruker.

- Blå, blågrønn, gul: `linear-gradient(90deg, #0000ff, #14b8a6 50%, #ffff00)`
- Oransje, rosa, asurblå: `linear-gradient(90deg, #ff8000, #ec4899 50%, #0080ff)`
- Rød, fiolett, cyan: `linear-gradient(90deg, #ff0000, #8b5cf6 50%, #00ffff)`

De samme tre parene med et håndplukket midtstopp. Ikke noe grått noe sted.

## Løsning 2: bland i OKLCH

OKLCH beskriver farge som lyshet, kroma (intensitet) og fargetone, og det ble laget slik at like trinn ser ut som like store endringer for mennesker. Blanding i OKLCH holder kromaen oppe og svinger rundt fargehjulet i stedet for å skjære rett over det, så overgangen aldri faller sammen til grått. I CSS ber du om det med ett uttrykk. Du kan også velge hvilken vei rundt hjulet den skal gå.

```css
/* Default for hex colours: sRGB, grey in the middle */
.muddy   { background: linear-gradient(90deg, #0000ff, #ffff00); }

/* OKLCH, shorter way round the wheel: through teal and green */
.clean   { background: linear-gradient(90deg in oklch, #0000ff, #ffff00); }

/* OKLCH, longer way round: through magenta, red and orange */
.sunset  { background: linear-gradient(90deg in oklch longer hue, #0000ff, #ffff00); }

/* OKLab: straight line, but with even lightness */
.even    { background: linear-gradient(90deg in oklab, #0000ff, #ffff00); }
```

Nøkkelordene for interpolering er en del av CSS Color Level 4 og fungerer i dagens versjoner av de store nettleserne.

- OKLCH: gjennom blågrønt: `linear-gradient(90deg in oklch, #0000ff, #ffff00)`
- OKLCH longer hue: via magenta: `linear-gradient(90deg in oklch longer hue, #0000ff, #ffff00)`
- OKLab: jevn, fortsatt myk: `linear-gradient(90deg in oklab, #0000ff, #ffff00)`

Blå til gul på tre måter til. OKLab jevner ut lysheten, men demper fortsatt motsetninger mot grått. OKLCH beholder fargen.

OKLab er også verdt å kjenne til. Det er standarden for moderne fargesyntaks i CSS og gir myke, jevne overganger, men fordi det fortsatt går i en rett linje, mister ekte motsetninger intensitet i midten. Bruk OKLab til farger som allerede ligger nær hverandre, og bruk OKLCH eller et midtstopp til farger som ligger langt fra hverandre. For hele syntaksen, se [OKLCH-gradienter i CSS](https://gradiently.design/nb/guide/css-gradient-oklch), eller utforsk fargerommet på [oklch.com](https://oklch.com).

## Løsning 3: velg nærmere fargetoner

Den sikreste måten å unngå grums på er å ikke be om det. Farger som ligger ved siden av hverandre på hjulet, som blått og fiolett eller oransje og rosa, blandes rent i ethvert fargerom fordi den rette linjen mellom dem aldri kommer nær grått. Derfor gir [analoge farger](https://gradiently.design/nb/guide/analogous-colors) de tryggeste gradientene, og derfor krever komplementære par omtanke. Se [komplementærfarger](https://gradiently.design/nb/guide/complementary-colors).

| Par | Standardresultat | Ren bro |
| --- | --- | --- |
| Blå og gul | Flat grå | Blågrønn `#14b8a6` eller grønn `#22c55e` |
| Oransje og blå | Gråbrun | Rosa `#ec4899` eller fiolett `#8b5cf6` |
| Lilla og grønn | Matt gråblå | Blå `#0ea5e9` |
| Rød og cyan | Flat grå | Fiolett `#8b5cf6` |
| Rosa og grønn | Grumsete beige | Blekgul `#fde68a` eller lavendel `#c4b5fd` |
| Blå og rød | Mørk lilla dump | Klar magenta `#d946ef` |

Vanlige par som blir grumsete som standard, og en midtfarge som holder dem rene.

## Løsning 4: følg med på lysheten

Grums er ikke bare grått. En overgang kan også virke matt når lysheten synker i midten, eller når den ene enden er mye mørkere enn den andre og overgangen skjer i et smalt bånd. Hold lysheten i stoppene omtrent jevn, eller endre den jevnt i én retning, og gi overgangen plass. En stopposisjon på 40% eller 60% ser ofte mer naturlig ut enn en mekanisk 50%.

### Blir grumsete

- Motsatte farger uten noe imellom
- En lys og en mørk ende som møtes i et smalt bånd
- Mange ubeslektede farger i én overgang
- Å stole på standardblandingen for komplementære par

### Holder seg ren

- En valgt, klar farge i midtpunktet
- Blanding i OKLCH for fargetoner langt fra hverandre
- Nabofargetoner pluss én aksent
- Å sjekke midtpunktet for seg selv før publisering

Grumset blir verre i [mesh-gradienter](https://gradiently.design/nb/guide/mesh-gradients), der flere farger møtes samtidig. De samme reglene gjelder for hvert overlapp: hold naboer nær hverandre, og legg en bro mellom motsetninger.

Vil du heller starte fra en overgang som allerede er balansert, søker du i Markedet med fargeord som «blå og gul» eller «dyp blågrønn» og designer med en hvilken som helst Mark du finner.

## FAQ

### Hvorfor ser gradienten min grå ut i midten?

Fargene dine ligger nær motsatt av hverandre på fargehjulet og blandes i sRGB, der punktet midt mellom motsetninger er grått.

### Hvordan retter jeg en grumsete gradient?

Legg til et klart midtstopp mellom de to fargene, bland i OKLCH i stedet for sRGB, eller velg farger som ligger nærmere hverandre på fargehjulet.

### Hva betyr in oklch i en CSS-gradient?

Det ber nettleseren blande fargene i fargerommet OKLCH, som bevarer fargeintensiteten og svinger rundt fargehjulet i stedet for å gå gjennom grått.

### Er OKLab eller OKLCH best til gradienter?

OKLab gir jevne, myke overganger for farger som ligger nær hverandre. OKLCH er bedre for fargetoner langt fra hverandre, fordi det bevarer intensiteten.

### Hvilke fargekombinasjoner blir aldri grumsete?

Nabofargetoner, som blått og fiolett eller oransje og rosa, blandes rent i nesten ethvert fargerom.