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

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.

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.

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å.

/* 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); }

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, eller utforsk fargerommet på 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 de tryggeste gradientene, og derfor krever komplementære par omtanke. Se komplementærfarger.

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%.

Grumset blir verre i mesh-gradienter, 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.