Gradientinterpolasjon: sRGB, OKLab og hvorfor det betyr noe

Gradientinterpolasjon er måten fargene mellom stoppene beregnes på. Du velger blått i den ene enden og gult i den andre; programvaren må finne alle fargene imellom. Det gjør den ved å tegne en linje mellom fargene i et fargerom. Valget av rom endrer det du ser. I sRGB går blått til gult gjennom flatt grått. I OKLCH går det gjennom klart petroleumsgrønt. Samme stopp, svært ulike gradienter.

Hva gradientinterpolasjon betyr

Hver farge kan beskrives som et punkt i et rom. I sRGB er de tre aksene rødt, grønt og blått. I OKLab er de lyshet og to motsetningsakser, grønt til rødt og blått til gult. I OKLCH er de lyshet, kroma (hvor fargerik) og fargetone (vinkelen rundt sirkelen). Å interpolere betyr å gå fra ett punkt til det andre. En rett vei gjennom ett rom kan være en kurve, eller en omvei gjennom grått, i et annet.

sRGB, OKLab og OKLCH side om side

Hvorfor sRGB-gradienter blir grå eller grumsete

sRGB ble laget for skjermer, ikke for øyet. Tallene er gammakodet, og aksene samsvarer ikke med hvordan vi ser fargetone eller lyshet. Når to farger ligger på hver sin side av sirkelen, krysser den rette linjen mellom dem nær det nøytrale sentrumet. Da mister midten fargen. Gjennomsnittet av blått og gult blir #808080. Dette er hovedårsaken til grumsete gradienter, og forklarer hvorfor det hjelper å legge til en brofarge: det ekstra stoppet bøyer veien rundt det grå.

OKLab: jevne trinn for øyet

OKLab, publisert av Björn Ottosson i 2020, ble laget så like avstander ser ut som like forskjeller. Det gir en gradient med jevn endring i lyshet fra ende til ende, uten mørk grop eller lys kul i midten. Rommet følger fortsatt en rett vei, så ekte motsetninger mister noe farge i sentrum, men langt mindre enn i sRGB. Moderne CSS bruker OKLab som standard når en farge i gradienten skrives med nyere syntaks som oklch().

OKLCH: bevar levende farger

OKLCH er samme rom som OKLab, beskrevet i polar form: lyshet, kroma og en fargetonevinkel. Interpolasjon her går rundt sirkelen, så mellomfargene beholder metningen. Det passer livlige gradienter som fremhever merkevaren og regnbuegradienter. Du kan også velge vei rundt sirkelen med shorter hue (standarden), longer hue, increasing hue eller decreasing hue. OKLCH-guiden forklarer rommet grundigere.

Slik setter du gradientinterpolasjon i CSS

Legg til in <space> før stoppene, etter eventuell vinkel eller form. Nettlesere som ikke forstår dette, ignorerer hele deklarasjonen, så skriv først en sRGB-versjon som reserve. Alle rom og nøkkelord for fargetone er listet i MDNs referanse for fargeinterpolasjon, og CSS-gradienter i OKLCH har flere oppskrifter.

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

Hvilket fargerom du bør velge

1. 1

   Bruk OKLab som standard

   For de fleste blandinger med to eller tre farger gir det det jevneste resultatet uten overraskelser.

2. 2

   Bruk OKLCH til fjerne eller klare farger

   Når fargene ligger langt fra hverandre i sirkelen og du vil holde midten lys og fargerik.

3. 3

   Behold sRGB for å gjengi eldre arbeid

   Hvis gradienten må være identisk med en eksisterende ressurs eller et bilde, bland i samme rom som originalen ble laget i.

4. 4

   Sjekk midtpunktet

   Se på fargen halvveis uansett rom. Hvis den er grå eller har en uventet tone, bytt rom eller legg til et stopp.

Interpolasjon er bare én del av en god blanding. Stopp-plasseringen betyr like mye og dekkes i fargestopp i gradienter. Vil du hoppe over matematikken, er Marks i Gradiently ferdige gradientbakgrunner som gjengis i alle størrelser du designer i. Utviklerdokumentasjonen viser hvordan ChatGPT eller Claude kan søke etter Marks og lage design som åpnes i Studio.