CSS gradient OKLCH: interpolasjon for jevnere blandinger

OKLCH-interpolasjon i CSS-gradienter betyr å be nettleseren regne ut fargene mellom stoppene i OKLCH-fargerommet i stedet for i sRGB. Du legger til to ord etter retningen: linear-gradient(90deg in oklch, #2563eb, #facc15). Resultatet er en blanding der lysheten endrer seg jevnt og midten forblir livlig, i stedet for å synke ned i det grå, sølete båndet vanlige sRGB-blandinger er kjent for.

Hvorfor sRGB-gradienter blir grå

sRGB ble utviklet for å kode skjermfarger effektivt, ikke for å samsvare med hvordan folk ser. Å blande to sRGB-farger betyr å ta gjennomsnittet av røde, grønne og blå tall, og halvveis mellom et blått og et gult er et sett med middels tall som ser grått ut. Lysheten endrer seg også ujevnt, så noen blandinger buler lysere eller mørkere i midten. Designsiden av dette problemet står i sølete gradienter.

Oklab og dens sylindriske form, OKLCH, ble utviklet slik at like steg i tallene ser ut som omtrent like steg for øyet. Å blande i dem holder oppfattet lyshet i jevn bevegelse, og derfor ser gradienter laget slik jevnere og lysere ut med de samme endepunktene.

Syntaksen: in oklch og in oklab

Interpolasjonsmetoden står i første argument, før eller etter retningen. Den virker i linear-gradient(), radial-gradient(), conic-gradient() og de repeterende formene deres, og også i color-mix(). Fargestoppene kan forbli i hex, for det er bare regnestykket som endres.

/* direction first or interpolation first: both are valid */
background: linear-gradient(135deg in oklch, #7c3aed, #f97316);
background: linear-gradient(in oklch 135deg, #7c3aed, #f97316);

/* works in the other gradient functions too */
background: radial-gradient(in oklab circle at 30% 30%, #22d3ee, #1e1b4b);
background: conic-gradient(in oklch from 90deg, #ef4444, #3b82f6, #ef4444);

oklab eller oklch: hvilken du bør velge

Begge er perseptuelle, og de skiller seg i veien de tar. Oklab trekker en rett linje mellom de to fargene, så midten kan miste litt metning når endene ligger langt fra hverandre på fargehjulet, men den går aldri gjennom en fargetone du ikke ba om. OKLCH beholder kromaen, altså fargens intensitet, og går rundt fargetonesirkelen, så midten forblir mettet, men passerer fargetonene imellom. Blått til gult i oklch går gjennom grønt. Noen ganger er det poenget, andre ganger en overraskelse.

Å velge fargetoneretning

Mellom to hvilke som helst fargetoner finnes det to veier rundt fargehjulet. Som standard tar oklch shorter hue. Du kan be om longer hue, eller tvinge en retning med increasing hue eller decreasing hue. Nøkkelordet står rett etter fargerommet.

longer hue er den ryddigste måten å tegne et spektrum på: to stopp i stedet for sju. Det er også slik du lager en full regnbuegradient der alle fargene føles like lyse, noe en sRGB-regnbue aldri helt får til.

Å skrive farger i oklch()

Du kan også skrive selve stoppene i OKLCH: oklch(L C H), der L er lyshet fra 0 % til 100 %, C er kroma fra 0 opp til omtrent 0,37, og H er fargetonevinkelen. Å holde L lik på tvers av stoppene gir en gradient med lik lyshet, noe som er vanskelig å få til på øyemål i hex. oklch.com er en god velger for å finne verdier.

.band {
  /* same lightness and chroma, only the hue changes */
  background: linear-gradient(
    90deg in oklch,
    oklch(68% 0.17 300),
    oklch(68% 0.17 20),
    oklch(68% 0.17 70)
  );
}

Nettleserstøtte og reserver

Interpolasjonsmetoder og oklch()-farger støttes i gjeldende Chrome, Edge, Safari og Firefox. Nettlesere hopper over enhver deklarasjon de ikke kan tolke, så reserven er ganske enkelt å skrive den vanlige versjonen først. Der den forbedrede linjen ignoreres, blir sRGB-gradienten stående.

.hero {
  background-color: #7c3aed;
  background-image: linear-gradient(135deg, #7c3aed, #f97316);
  background-image: linear-gradient(135deg in oklch, #7c3aed, #f97316);
}

Vil du gå videre, passer perseptuelle blandinger godt sammen med korn for å hindre gradientbanding, og med stopp- og hint-teknikkene i guiden om CSS lineær gradient.