CSS-gradient med OKLCH-interpolation for blødere blandinger

CSS-gradient med OKLCH-interpolation betyder, at du beder browseren beregne gradientens mellemfarver i OKLCH-farverummet i stedet for i sRGB. Du tilføjer to ord efter retningen: linear-gradient(90deg in oklch, #2563eb, #facc15). Resultatet er en blanding, hvis lysstyrke skifter jævnt, og hvis midte forbliver levende, i stedet for at synke ned i det grå, mudrede bånd, som almindelige sRGB-blandinger er kendt for.

Hvorfor sRGB-gradienter bliver grå

sRGB blev designet til at kode skærmfarver effektivt og ikke til at svare til, hvordan folk ser. At blande to sRGB-farver betyder at tage gennemsnittet af deres rød-, grøn- og blåtal, og midtvejs mellem en blå og en gul er et sæt middelmådige tal, der ser gråt ud. Lysstyrken skifter også ujævnt, så nogle blandinger buler lysere eller mørkere i midten. Designsiden af problemet findes i mudrede gradienter.

Oklab og dets cylindriske form, OKLCH, blev designet, så lige store trin i deres tal ser ud som nogenlunde lige store trin for øjet. At blande i dem holder den opfattede lysstyrke bevægende sig jævnt, og derfor ser gradienter lavet på den måde blødere og lysere ud ved de samme endepunkter.

Syntaksen: in oklch og in oklab

Interpolationsmetoden står i det første argument, før eller efter retningen. Den virker i linear-gradient(), radial-gradient(), conic-gradient() og deres gentagende former og også i color-mix(). Dine farvestop kan blive i hex. Kun matematikken ændrer sig.

/* 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 skal du vælge

Begge er perceptuelle. De adskiller sig i den vej, de tager. Oklab tegner en ret linje mellem de to farver, så midten kan miste noget mætning, når enderne ligger langt fra hinanden på farvehjulet, men den vandrer aldrig gennem en farvetone, du ikke har bedt om. OKLCH bevarer kromatikken, farvens intensitet, og går rundt om farvetonecirklen, så midten forbliver mættet, men passerer farvetonerne imellem. Blå til gul i oklch går gennem grøn. Nogle gange er det pointen. Andre gange er det en overraskelse.

Vælg farvetoneretning

Mellem to farvetoner er der to veje rundt om farvehjulet. Som standard tager oklch shorter hue. Du kan bede om longer hue eller tvinge en retning med increasing hue eller decreasing hue. Nøgleordet står lige efter farverummet.

longer hue er den ryddeligste måde at tegne et spektrum: to stop i stedet for syv. Det er også sådan, du laver en hel regnbuegradient, hvis farver alle føles lige lyse, hvilket en sRGB-regnbue aldrig helt klarer.

Skriv farver i oklch()

Du kan også skrive selve stoppene i OKLCH: oklch(L C H), hvor L er lysstyrke fra 0 % til 100 %, C er kromatik fra 0 op til omkring 0,37, og H er farvetonens vinkel. Holder du L ens på tværs af stop, får du en gradient med ens lysstyrke, hvilket er svært at ramme på øjemål i hex. oklch.com er en god vælger til at finde værdier.

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

Browserunderstøttelse og reserver

Interpolationsmetoder og oklch()-farver understøttes i nuværende Chrome, Edge, Safari og Firefox. Browsere springer enhver erklæring over, de ikke kan tolke, så reserven er blot at skrive den almindelige version først. Hvor den forbedrede linje ignoreres, bliver 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 perceptuelle blandinger godt sammen med korn, der forhindrer gradientbanding, og med teknikkerne med stop og hints i guiden til CSS lineær gradient.