# Liukuvärin interpolointi: sRGB, OKLab ja niiden merkitys

[Canonical HTML page](https://gradiently.design/fi/guide/gradient-interpolation)

Valitse sininen ja keltainen, sekoita ne ja keskikohta muuttuu harmaaksi. Vika ei ole väreissä vaan sekoittavan väriavaruuden laskennassa. CSS Color 4:stä lähtien voit vaihtaa sitä.

## The short version

- Liukuvärin interpolointi laskee jokaisen kahden pysäkin välisen värin, ja käytetty väriavaruus muuttaa lopputulosta.
- sRGB-sekoitus etenee suoraviivaisesti punaisen, vihreän ja sinisen arvoissa, joten vastakkaiset värit kuten sininen ja keltainen kulkevat harmaan kautta.
- OKLabissa yhtä suuret askeleet näyttävät silmälle yhtä suurilta muutoksilta, joten liukuvärin vaaleus on tasaisempi.
- OKLCH sekoittaa vaaleuden, värikylläisyyden ja sävyn erikseen, jolloin värit säilyvät kylläisinä ja kulkevat väriympyrää pitkin harmaan keskustan sijaan.
- CSS:ssä väriavaruus valitaan liukuvärin sisältä, esimerkiksi `linear-gradient(in oklch, #2563eb, #f97316)`.

**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.

- Alku: sininen: #0000ff
- Keskikohta sRGB:ssä: #808080
- Keskikohta, lineaarinen sRGB: #bcbcbc
- Keskikohta OKLabissa: #6cabc7
- Keskikohta OKLCH:ssa: #00cfbd
- Loppu: keltainen: #ffff00

Puhtaan sinisen ja keltaisen puoliväri neljässä avaruudessa. sRGB päätyy elottomaan harmaaseen, OKLCH elävään sinivihreään.

## sRGB, OKLab ja OKLCH rinnakkain

- Sinisestä oranssiin, sRGB: `linear-gradient(90deg in srgb, #2563eb, #f97316)`
- Sinisestä oranssiin, OKLab: `linear-gradient(90deg in oklab, #2563eb, #f97316)`
- Sinisestä oranssiin, OKLCH: `linear-gradient(90deg in oklch, #2563eb, #f97316)`
- Punaisesta siniseen, sRGB: `linear-gradient(90deg in srgb, #ff0000, #0000ff)`
- Punaisesta siniseen, OKLab: `linear-gradient(90deg in oklab, #ff0000, #0000ff)`
- Punaisesta siniseen, OKLCH: `linear-gradient(90deg in oklch, #ff0000, #0000ff)`

Kaksi väriparia kolmessa avaruudessa. sRGB himmenee ja tummenee keskellä, OKLab tasaa vaaleutta ja OKLCH säilyttää värin.

| Avaruus | Sekoitustapa | Sopii parhaiten | Huomioi |
| --- | --- | --- | --- |
| sRGB | Suora reitti puna-, viher- ja siniarvoissa | Vanhojen suunnitelmien tarkka vastaavuus | Harmaat, tummat keskikohdat etäisten sävyjen välillä |
| Lineaarinen sRGB | Sama ilman gammakoodausta | Valon sekoittaminen, hohdot | Keskikohdat näyttävät liian kirkkailta |
| OKLab | Havainnollisesti tasainen vaaleus ja väri | Pehmeät luonnolliset sekoitukset; modernien CSS-värien oletus | Vastavärit menettävät yhä hieman väriään |
| OKLCH | Vaaleus, kylläisyys ja sävy erikseen | Kirkkaat sekoitukset, sateenkaaret, etäiset brändivärit | Reitti voi kulkea odottamattomien sävyjen kautta |

Neljä tavallisinta avaruutta. CSS tarjoaa myös esimerkiksi `lab`, `lch`, `hsl` ja `display-p3`.

## 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](https://gradiently.design/fi/guide/muddy-gradients) 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](https://gradiently.design/fi/guide/rainbow-gradient). Voit valita myös kulkusuunnan: `shorter hue` (oletus), `longer hue`, `increasing hue` tai `decreasing hue`. [OKLCH-opas](https://gradiently.design/fi/guide/oklch-explained) syventää väriavaruutta.

- Punaisesta siniseen, lyhyt sävyreitti: `linear-gradient(90deg in oklch shorter hue, #ef4444, #3b82f6)`
- Punaisesta siniseen, pitkä sävyreitti: `linear-gradient(90deg in oklch longer hue, #ef4444, #3b82f6)`

Samat kaksi väriä. Lyhyt reitti kulkee magentan, pitkä oranssin, keltaisen ja vihreän kautta.

## 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](https://developer.mozilla.org/en-US/docs/Web/CSS/color-interpolation-method), ja [CSS-liukuvärit OKLCH:ssa](https://gradiently.design/fi/guide/css-gradient-oklch) tarjoaa lisää ohjeita.

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

Interpolointiavainsana toimii lineaarisissa, säteittäisissä ja kartiomaisissa liukuväreissä. Punaisesta punaiseen kulkeva kartioliukuväri asetuksella `longer hue` piirtää kokonaisen tasaisen sateenkaaren.

## Minkä väriavaruuden valitset

1. **Käytä oletuksena OKLabia** Useimmille kahden tai kolmen värin yhdistelmille se antaa tasaisimman tuloksen ilman yllätyksiä.
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. **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. **Tarkista keskikohta** Katso puoliväri avaruudesta riippumatta. Jos se on harmaa tai odottamaton sävy, vaihda avaruutta tai lisää pysäkki.

### Vanha tapa

- Sekoita sRGB:ssä ja piilota harmaa lisäpysäkeillä
- Hyväksy tumma keskikohta
- Valitse läheiset värit varmuuden vuoksi

### Parempi tapa

- Sekoita OKLabissa tai OKLCH:ssa vähemmillä pysäkeillä
- Tasainen vaaleus päästä päähän
- Käytä rohkeampia pareja ja anna avaruuden pitää ne puhtaina

Interpolointi on vain osa hyvää liukuväriä. Pysäkkien sijainti on yhtä tärkeä, kuten [liukuvärin väripysäkit](https://gradiently.design/fi/guide/gradient-stops) kertoo. Jos ohitat mieluummin laskennan, Gradientlyn Markit ovat valmiita liukuväritaustoja, jotka renderöityvät kaikissa suunnittelukoissa. [Kehittäjäohjeet](https://gradiently.design/fi/developers) näyttää, miten ChatGPT tai Claude hakee Markeja ja luo Studiossa avautuvia suunnitelmia.

## FAQ

### Mitä liukuvärin interpolointi on?

Jokaisen kahden liukuväripysäkin välisen värin laskemista. Käytetty väriavaruus, kuten sRGB tai OKLab, vaikuttaa keskellä näkyviin väreihin.

### Miksi liukuvärini keskikohta on harmaa?

Se sekoittaa sRGB:ssä ympyrän vastakkaisia värejä, joten reitti kulkee harmaan lähellä. Sekoita OKLCH:ssa tai lisää väliväri.

### Onko OKLab vai OKLCH parempi liukuväreihin?

OKLab tuottaa tasaisimmat, luonnolliset sekoitukset. OKLCH säilyttää värit kylläisempinä ja sopii paremmin kirkkaisiin pareihin ja sateenkaariin.

### Miten käytän OKLCH:ta CSS-liukuvärissä?

Lisää `in oklch` ennen värejä, esimerkiksi `linear-gradient(90deg in oklch, #2563eb, #f97316)`. Kirjoita ensin sRGB-varaversio.

### Mikä on CSS-liukuvärien oletusväriavaruus?

sRGB, kun kaikki värit käyttävät vanhaa syntaksia kuten heksakoodia tai `rgb()`-funktiota, ja OKLab, kun jokin väri käyttää uutta syntaksia kuten `oklch()`-funktiota.