Gradientinterpolering: sRGB, OKLab och varför det spelar roll

Gradientinterpolering är hur färgerna mellan dina stopp beräknas. Du väljer blått i ena änden och gult i den andra, och programvaran måste hitta på varje färg däremellan, vilket den gör genom att dra en linje mellan de två färgerna i någon färgrymd. Vilken rymd den använder ändrar vad du ser. Blanda i sRGB och blått till gult passerar genom platt grått. Blanda i OKLCH och det passerar genom en klar blågrön. Samma stopp, mycket olika gradient.

Vad gradientinterpolering innebär

Varje färg kan beskrivas som en punkt i en rymd. I sRGB är de tre axlarna rött, grönt och blått. I OKLab är de ljushet och två motpolsaxlar, grönt till rött och blått till gult. I OKLCH är de ljushet, kroma (hur färgstark) och nyans (vinkeln runt hjulet). Att interpolera betyder att gå från en punkt till den andra. En rak promenad genom en rymd kan vara en kurva, eller en omväg genom grått, i en annan.

sRGB, OKLab och OKLCH sida vid sida

Varför sRGB-gradienter blir grå eller leriga

sRGB utformades för skärmar, inte för ögat. Dess tal är gammakodade, och dess axlar stämmer inte med hur vi ser nyans eller ljushet. När två färger ligger på motsatta sidor av hjulet korsar den raka linjen mellan dem nära det neutrala centrumet, så mitten tappar sin färg. Blått och gult får medelvärdet #808080. Det här är huvudorsaken till leriga gradienter, och det är därför en formgivares instinkt att lägga till en överbryggande färg fungerar: det extra stoppet böjer vägen runt det grå.

OKLab: jämna steg för ögat

OKLab, publicerat av Björn Ottosson 2020, byggdes så att lika avstånd ser ut som lika skillnader. Det praktiska resultatet är en gradient vars ljushet ändras jämnt från ände till ände, utan någon mörk dipp eller ljus buckla i mitten. Den tar fortfarande en rät väg, så två verkliga motsatser tappar en del färg i mitten, men mycket mindre än i sRGB. Modern CSS använder OKLab som standard så snart någon färg i en gradient skrivs med en nyare syntax som oklch().

OKLCH: håll färgen vid liv

OKLCH är samma rymd som OKLab, beskriven i polär form: ljushet, kroma och en nyansvinkel. Att interpolera i den går runt hjulet, så färgerna däremellan behåller sin mättnad. Det är idealiskt för livfulla, varumärkesdrivna gradienter och regnbågsgradienter. Du kan också välja åt vilket håll runt hjulet du går med shorter hue (standard), longer hue, increasing hue eller decreasing hue. OKLCH-guiden förklarar rymden mer ingående.

Så ställer du in gradientinterpolering i CSS

Lägg till in <rymd> före stoppen, efter eventuell vinkel eller form. Webbläsare som inte förstår det ignorerar hela deklarationen, så skriv en sRGB-version först som reserv. Alla rymder och nyansnyckelord listas i MDN:s referens för färginterpolering, och CSS-gradienter i OKLCH har fler recept.

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

Vilken färgrymd du ska välja

1. 1

   Utgå från OKLab

   För de flesta blandningar av två eller tre färger ger den det mjukaste resultatet utan överraskningar.

2. 2

   Använd OKLCH för avlägsna eller livfulla färger

   När färgerna ligger långt ifrån varandra på hjulet och du vill att mitten ska förbli klar.

3. 3

   Behåll sRGB för att matcha gammalt arbete

   Om en gradient måste se identisk ut med en befintlig tillgång eller bild, blanda i samma rymd som den gjordes i.

4. 4

   Kontrollera mittpunkten

   Oavsett rymd, titta på färgen halvvägs. Om den är grå eller en nyans du inte väntade dig, byt rymd eller lägg till ett stopp.

Interpolering är bara en del av en bra blandning, och var stoppen sitter betyder minst lika mycket, vilket tas upp i gradientens färgstopp. Om du hellre hoppar över matematiken är Gradiently-Marks färdiga gradientbakgrunder som renderas i varje storlek du designar i, och utvecklardokumentationen visar hur ChatGPT eller Claude kan söka efter Marks och skapa designer som öppnas i Studio.