Interpolation i gradienter: sRGB, OKLab og hvorfor det betyder noget

Interpolation i gradienter er den måde, farverne mellem dine stop beregnes på. Du vælger blå i den ene ende og gul i den anden; softwaren skal opfinde hver farve imellem, og det gør den ved at trække en linje mellem de to farver i et bestemt farverum. Hvilket rum den bruger, ændrer det, du ser. Bland i sRGB, og blå til gul passerer gennem flad grå. Bland i OKLCH, og den passerer gennem en klar petrol. Samme stop, vidt forskellig gradient.

Hvad interpolation i gradienter betyder

Enhver farve kan beskrives som et punkt i et rum. I sRGB er de tre akser rød, grøn og blå. I OKLab er de lyshed og to modsatte akser, grøn til rød og blå til gul. I OKLCH er de lyshed, kroma (hvor farverig) og farvetone (vinklen rundt om cirklen). At interpolere betyder at gå fra det ene punkt til det andet. En lige vej gennem ét rum kan være en kurve, eller en omvej gennem grå, i et andet.

sRGB, OKLab og OKLCH side om side

Hvorfor sRGB-gradienter bliver grå eller mudrede

sRGB blev designet til skærme, ikke til øjet. Dets tal er gammakodede, og dets akser stemmer ikke overens med, hvordan vi ser farvetone eller lyshed. Når to farver ligger på hver sin side af cirklen, krydser den lige linje mellem dem tæt på det neutrale centrum, så midten mister sin farve. Gennemsnittet af blå og gul bliver #808080. Det er hovedårsagen til mudrede gradienter, og det er derfor, en designers instinkt om at tilføje en brofarve virker: det ekstra stop bøjer vejen uden om det grå.

OKLab: jævne trin for øjet

OKLab, udgivet af Björn Ottosson i 2020, blev bygget, så lige store afstande ligner lige store forskelle. Det praktiske resultat er en gradient, hvis lyshed ændrer sig jævnt fra ende til ende, uden mørkt dyk eller lys bule i midten. Den tager stadig en lige vej, så to ægte modsætninger mister lidt farve i midten, men langt mindre end i sRGB. Moderne CSS bruger OKLab som standard, når en farve i en gradient er skrevet i en nyere syntaks som oklch().

OKLCH: hold farven i live

OKLCH er det samme rum som OKLab, beskrevet i polær form: lyshed, kroma og en farvetonevinkel. Interpolation i det går rundt om cirklen, så farverne imellem bevarer deres mætning. Det er ideelt til livlige gradienter, hvor brandet står forrest, og til regnbuegradienter. Du kan også vælge, hvilken vej rundt om cirklen den skal gå, med shorter hue (standarden), longer hue, increasing hue eller decreasing hue. Guiden til OKLCH forklarer rummet mere i dybden.

Sådan indstiller du interpolation i CSS

Tilføj in <space> før stoppene, efter en eventuel vinkel eller form. Browsere, der ikke forstår det, ignorerer hele deklarationen, så skriv en sRGB-udgave først som reserve. Hvert rum og hvert nøgleord for farvetone står i MDNs reference om farveinterpolation, og CSS-gradienter i OKLCH har flere opskrifter.

.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 farverum du skal vælge

1. 1

   Brug OKLab som standard

   Til de fleste blandinger af to eller tre farver giver det det glatteste resultat uden overraskelser.

2. 2

   Brug OKLCH til fjerne eller livlige farver

   Når farverne ligger langt fra hinanden på cirklen, og du vil have midten til at forblive klar.

3. 3

   Behold sRGB for at matche gammelt arbejde

   Skal en gradient se identisk ud med en eksisterende fil eller et billede, så bland i det samme rum, den blev lavet i.

4. 4

   Tjek midtpunktet

   Uanset rum, så se på farven halvvejs. Er den grå eller en farvetone, du ikke forventede, så skift rum, eller tilføj et stop.

Interpolation er kun én del af en god blanding; hvor stoppene sidder, betyder lige så meget, og det gennemgås i farvestop i gradienter. Vil du hellere springe matematikken over, er Marks fra Gradiently færdige gradientbaggrunde, der gengives i alle størrelser, du designer i, og udviklerdokumentationen viser, hvordan ChatGPT eller Claude kan søge i Marks og lave designs, der åbner i Studio.