CSS-gradient med OKLCH-interpolering för mjukare övergångar

OKLCH i CSS-gradienter innebär att du ber webbläsaren räkna ut gradientens mellanfärger i färgrummet OKLCH i stället för i sRGB. Du lägger till två ord efter riktningen: linear-gradient(90deg in oklch, #2563eb, #facc15). Resultatet är en övergång vars ljushet ändras jämnt och vars mitt förblir levande, i stället för att sjunka ned i det grå, sladdriga band som vanliga sRGB-övergångar är kända för.

Därför blir sRGB-gradienter grå

sRGB utformades för att koda skärmfärger effektivt, inte för att matcha hur människor ser. Att blanda två sRGB-färger innebär att räkna ut medelvärdet av deras röda, gröna och blå tal, och halvvägs mellan ett blått och ett gult finns en uppsättning medelmåttiga tal som ser grå ut. Ljusheten ändras också ojämnt, så vissa övergångar buktar ljusare eller mörkare i mitten. Designsidan av problemet finns i sladdriga gradienter.

Oklab och dess cylindriska form, OKLCH, utformades så att lika steg i deras tal ser ut som ungefär lika steg för ögat. Att blanda i dem håller den upplevda ljusheten i jämn rörelse, vilket är varför gradienter gjorda så ser mjukare och ljusare ut med samma ändpunkter.

Syntaxen: in oklch och in oklab

Interpoleringsmetoden står i det första argumentet, före eller efter riktningen. Den fungerar i linear-gradient(), radial-gradient(), conic-gradient() och deras upprepande former, och även i color-mix(). Dina färgstopp kan förbli i hex, bara matematiken ändras.

/* 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: vilket ska du välja

Båda är perceptuella, de skiljer sig i vägen de tar. Oklab drar en rak linje mellan de två färgerna, så mitten kan tappa lite mättnad när ändarna ligger långt ifrån varandra på färgcirkeln, men den vandrar aldrig genom en nyans du inte bad om. OKLCH behåller chroma, färgens intensitet, och går runt nyanscirkeln, så mitten förblir mättad men passerar de nyanser som ligger emellan. Blått till gult i oklch går via grönt. Ibland är det poängen, ibland är det en överraskning.

Att välja nyansriktning

Mellan två nyanser finns det två vägar runt färgcirkeln. Som standard tar oklch den shorter hue. Du kan be om longer hue, eller tvinga en riktning med increasing hue eller decreasing hue. Nyckelordet placeras direkt efter färgrummet.

longer hue är det prydligaste sättet att rita ett spektrum: två stopp i stället för sju. Det är också så du gör en hel regnbågsgradient vars färger alla känns lika ljusa, vilket en sRGB-regnbåge aldrig riktigt klarar.

Att skriva färger i oklch()

Du kan också skriva själva stoppen i OKLCH: oklch(L C H), där L är ljushet från 0 % till 100 %, C är chroma från 0 upp till ungefär 0,37 och H är nyansvinkeln. Om du håller L lika över stoppen får du en gradient med lika ljushet, vilket är svårt att göra med ögonmått i hex. oklch.com är en bra väljare för att hitta värden.

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

Webbläsarstöd och reservlösningar

Interpoleringsmetoder och oklch()-färger stöds i nuvarande Chrome, Edge, Safari och Firefox. Webbläsare hoppar över varje deklaration de inte kan tolka, så reservlösningen är helt enkelt att skriva den vanliga versionen först. Där den förbättrade raden ignoreras blir sRGB-gradienten kvar.

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

Om du vill gå längre passar perceptuella övergångar bra ihop med korn för att förhindra gradientbanding, och med stopp- och hint-teknikerna i guiden om CSS linear-gradient.