Liukuvärin interpolointi: sRGB, OKLab ja niiden merkitys

Liukuvärin interpolointi tarkoittaa pysäkkien välisten värien laskentaa. Valitset sinisen toiseen päähän ja keltaisen toiseen; ohjelmiston pitää muodostaa kaikki välivärit piirtämällä viiva värien välille jossakin väriavaruudessa. Avaruuden valinta muuttaa näkyvää tulosta. sRGB:ssä sinisestä keltaiseen kuljetaan tasaisen harmaan kautta, OKLCH:ssa kirkkaan sinivihreän kautta. Samat pysäkit, hyvin erilainen liukuväri.

Mitä liukuvärin interpolointi tarkoittaa

Jokainen väri voidaan kuvata pisteenä avaruudessa. sRGB:n kolme akselia ovat punainen, vihreä ja sininen. OKLabissa ne ovat vaaleus ja kaksi vastaväriakselia, vihreästä punaiseen sekä sinisestä keltaiseen. OKLCH:ssa ne ovat vaaleus, värikylläisyys ja sävy eli kulma väriympyrällä. Interpolointi tarkoittaa kulkemista pisteestä toiseen. Suora reitti yhdessä avaruudessa voi olla kaari tai harmaan kautta kulkeva kiertotie toisessa.

sRGB, OKLab ja OKLCH rinnakkain

Miksi sRGB-liukuväri muuttuu harmaaksi tai sameaksi

sRGB suunniteltiin näytöille, ei silmälle. Arvot ovat gammakoodattuja eivätkä akselit vastaa sävyn tai vaaleuden havaitsemista. Kun värit ovat ympyrän vastakkaisilla puolilla, suora reitti kulkee neutraalin keskustan lähellä ja keskikohta menettää värinsä. Sinisen ja keltaisen keskiarvo on #808080. Tämä on sameiden liukuvärien pääsyy ja selittää, miksi välivärin lisääminen toimii: lisäpysäkki taivuttaa reitin harmaan ympäri.

OKLab: tasaiset askeleet silmälle

Björn Ottosson julkaisi OKLabin vuonna 2020. Se rakennettiin niin, että yhtä suuret etäisyydet näyttävät yhtä suurilta eroilta. Liukuvärin vaaleus muuttuu siksi tasaisesti päästä päähän ilman tummaa painaumaa tai kirkasta pullistumaa keskellä. Reitti on yhä suora, joten aidot vastavärit menettävät keskellä hieman väriä, mutta paljon vähemmän kuin sRGB:ssä. Moderni CSS käyttää oletuksena OKLabia, jos jokin liukuvärin väri on kirjoitettu uudella syntaksilla, kuten oklch().

OKLCH: pidä väri elävänä

OKLCH on sama avaruus kuin OKLab napakoordinaateissa: vaaleus, värikylläisyys ja sävykulma. Interpolointi kulkee ympyrää pitkin, joten välivärit säilyvät kylläisinä. Se sopii eläviin brändiliukuväreihin ja sateenkaariliukuväreihin. Voit valita myös kulkusuunnan: shorter hue (oletus), longer hue, increasing hue tai decreasing hue. OKLCH-opas syventää väriavaruutta.

Aseta liukuvärin interpolointi CSS:ssä

Lisää in <space> pysäkkien edelle kulman tai muodon jälkeen. Selaimet, jotka eivät ymmärrä sitä, ohittavat koko määrityksen, joten kirjoita ensin sRGB-varaversio. Kaikki avaruudet ja sävyavainsanat on lueteltu MDN:n interpolointiohjeessa, ja CSS-liukuvärit OKLCH:ssa tarjoaa lisää ohjeita.

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

Minkä väriavaruuden valitset

1. 1

   Käytä oletuksena OKLabia

   Useimmille kahden tai kolmen värin yhdistelmille se antaa tasaisimman tuloksen ilman yllätyksiä.

2. 2

   Käytä OKLCH:ta etäisille tai kirkkaille väreille

   Kun värit ovat kaukana toisistaan ympyrällä ja haluat keskikohdan pysyvän kirkkaana.

3. 3

   Säilytä sRGB vanhan työn vastaavuuteen

   Jos liukuvärin täytyy vastata olemassa olevaa kuvaa tai aineistoa, sekoita samassa avaruudessa kuin alkuperäinen.

4. 4

   Tarkista keskikohta

   Katso puoliväri avaruudesta riippumatta. Jos se on harmaa tai odottamaton sävy, vaihda avaruutta tai lisää pysäkki.

Interpolointi on vain osa hyvää liukuväriä. Pysäkkien sijainti on yhtä tärkeä, kuten liukuvärin väripysäkit kertoo. Jos ohitat mieluummin laskennan, Gradientlyn Markit ovat valmiita liukuväritaustoja, jotka renderöityvät kaikissa suunnittelukoissa. Kehittäjäohjeet näyttää, miten ChatGPT tai Claude hakee Markeja ja luo Studiossa avautuvia suunnitelmia.