# OKLCH selitettynä: havaintoon perustuva väri suunnittelijalle

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

HSL lupasi ymmärrettävän väritavan ja melkein onnistui. OKLCH säilyttää ymmärrettävyyden ja korjaa valoisuuden harhan, minkä vuoksi designjärjestelmät siirtyvät siihen.

## The short version

- OKLCH kuvaa väriä kolmella arvolla: havaittu valoisuus (L), kromaattisuus eli värikkyys (C) ja värisävyn kulma (H).
- Toisin kuin HSL:ssä, OKLCH:n valoisuus vastaa ihmisen näkemää kirkkautta. Kahdella saman L-arvon värillä on siis samankaltainen kontrasti valkoiseen.
- CSS:ssä muoto on `oklch(60% 0.2 293)`, haluttaessa alfa vinoviivan jälkeen, ja kaikki nykyiset suuret selaimet tukevat sitä.
- Kromaattisuudella ei ole kiinteää enimmäisarvoa: mahdollinen värikkyys riippuu valoisuudesta, sävystä ja näytöstä. Näytön alueen ylittävät värit sovitetaan takaisin siihen.
- Liukuvärien interpolointi OKLCH:ssa tai OKLabissa välttää harmaan, samean keskikohdan, jonka sRGB tuottaa kaukaisten sävyjen välille.

**OKLCH** kuvaa väriä valoisuudella, kromaattisuudella ja sävyllä niin, että valoisuus mitataan ihmisen havaintoa vastaavasti. CSS:ssä `oklch(60% 0.2 293)` on voimakas violetti, joka näyttää olevan 60 % matkasta mustasta valkoiseen sävykulmassa 293 astetta. Suunnittelijan käytännön hyöty on selvä: vaihda sävyä mutta säilytä L, ja uusi väri näyttää yhtä vaalealta. HSL ei voi luvata tätä. Siksi OKLCH on uusien designjärjestelmien, myös Tailwindin väripaletin, oletusvalinta.

## Valoisuus, kromaattisuus ja sävy

| Kirjain | Nimi | Alue | Mitä säätää |
| --- | --- | --- | --- |
| L | Valoisuus | 0-100 % (tai 0-1) | Miten vaalealta väri näyttää silmän arvioimana |
| C | Kromaattisuus | 0:sta ylöspäin, harvoin yli 0,37 | Värin määrä: 0 on harmaa, suurempi on elävämpi |
| H | Sävy | 0-360 astetta | Mikä väri: noin 30 punainen, 110 keltainen, 140 vihreä, 265 sininen |
| / A | Alfa | 0-1 tai 0-100 % | Peittävyys, valinnainen |

OKLCH:n sävykulmat eivät vastaa HSL:n kulmia. Puhdas sininen on tässä lähellä 264:ää, ei 240:tä.

**Valoisuus** on pääasia. Se tulee vuonna 2020 julkaistusta OKLab-väriavaruudesta, joka ennustaa havaittua valoisuutta, värikkyyttä ja sävyä vanhoja malleja tasaisemmin. **Kromaattisuus** korvaa kylläisyyden: se ei ole prosentti jostakin enimmäisarvosta vaan värin absoluuttinen määrä. Kromaattisuus 0,1 tarkoittaa siis samaa visuaalista voimakkuutta sävystä riippumatta. **Sävy** on edelleen kulma, mutta kulmat on jaettu niin, että 30 asteen askel näyttää samankaltaiselta muutokselta koko kierroksen ajan.

## OKLCH ja HSL: sama valoisuus rinnakkain

Valitse kuusi sävyä ja pidä valoisuus ja kromaattisuus muodossa `oklch(65% 0.11 H)`. Alla olevat näytteet näyttävät samalta perheeltä, ja niiden kontrasti valkoiseen pysyy välillä 3,1:1-3,4:1. Kun teet saman [HSL:llä](https://gradiently.design/fi/guide/hsl-colors) 50 %:n valoisuudella, kontrasti valkoiseen vaihtelee keltaisen noin 1,07:1:stä sinisen 8,6:1:een.

- H 30 #c97466: #c97466
- H 90 #a98c35: #a98c35
- H 150 #5aa26b: #5aa26b
- H 210 #11a1b4: #11a1b4
- H 270 #758bd3: #758bd3
- H 330 #b576af: #b576af

`oklch(65% 0.11 H)` kuudella sävyllä. Sama valoisuus ja kromaattisuus myös näyttävät samoilta.

Tasaisuus tekee OKLCH:sta hyödyllisen käytännössä. Tilavärit, kaaviosarjat tai luokkatunnisteet voivat jakaa saman L:n ja C:n ja erota vain sävyltään, eikä yksikään korostu muita enemmän. Värinäön poikkeamat huomioivassa sarjassa vaihtele myös L:ää. Tätä käsittelee [värisokeusystävälliset paletit](https://gradiently.design/fi/guide/color-blindness-design).

## Näin kirjoitat OKLCH:n CSS:ssä

```css
:root {
  /* lightness as a percentage or a number */
  --violet: oklch(60% 0.2 293);
  --violet-same: oklch(0.6 0.2 293);

  /* with transparency */
  --violet-soft: oklch(60% 0.2 293 / 0.4);

  /* grey: chroma 0, hue ignored */
  --grey: oklch(60% 0 0);
}

/* a fallback for very old browsers comes first */
.button {
  background: #8860ea;
  background: oklch(60% 0.2 293);
}
```

`oklch(60% 0.2 293)` vastaa likimain sRGB-väriä #8860ea. Chromen, Edgen, Firefoxin ja Safarin nykyversiot tukevat oklch()-muotoa.

Selaintuki on laaja, ja voit tarkistaa yksityiskohdat [caniusesta](https://caniuse.com/mdn-css_types_color_oklch). Arvoja voi tutkia [oklch.comin](https://oklch.com) valitsimella, joka näyttää tavallisen näytön toistettavat yhdistelmät. Muunna nykyinen brändin hex-väri liittämällä se valitsimeen tai selaimen kehittäjätyökalujen väripaneeliin, joka voi näyttää minkä tahansa värin OKLCH:na.

## Asteikon rakentaminen OKLCH:lla

Tee vaalennus- ja tummennusasteikko muuttamalla valoisuutta tasaisin askelin. Nosta kromaattisuutta keskellä ja laske sitä päitä kohti. Hyvin vaaleat ja tummat värit eivät fyysisesti voi olla kovin värikkäitä, joten suuri kromaattisuus ääripäissä pakottaa selaimen leikkaamaan ne. Tässä näin rakennettu violetti asteikko.

- L 97 C .015: #f5f3ff
- L 90 C .05: #dfd9fd
- L 80 C .10: #c0b2f9
- L 70 C .17: #a486fd
- L 60 C .22: #8a5af4
- L 50 C .22: #6e37d2
- L 40 C .18: #50249d
- L 30 C .12: #331b63
- L 20 C .07: #180d32

Sävy on kaikkialla 293. Kukin askel on samankaltainen visuaalinen muutos, mihin HSL-asteikot harvoin pystyvät.

Koska L seuraa havaittua valoisuutta, voit arvioida kontrastia karkeasti pelkistä luvuista. Tässä asteikossa valkoinen teksti ylittää 4,5:1:n L-arvosta 50 alaspäin ja musta L-arvosta 60 ylöspäin. Varmista aina [kontrastintarkistimella](https://gradiently.design/fi/guide/color-contrast-accessibility), mutta yllätyksiä tulee harvoin. Asteikon muuttamista nimetyiksi tokeneiksi käsittelee [designtokenit](https://gradiently.design/fi/guide/design-tokens).

## Värintoistoalue: kun väriä ei ole näytöllä

OKLCH voi kuvata värejä, joita mikään näyttö ei toista. Useimmat näytöt käyttävät sRGB:tä, monet uudet puhelimet ja kannettavat laajempaa Display P3:a. Kun nostat kromaattisuutta tarpeeksi, poistut molemmista. Silloin selain sovittaa värin lähimpään näytön toistamaan väriin. Mikään ei rikkoudu, mutta et ehkä saa kirjoittamaasi väriä.

### Vältä

- Suurta kromaattisuutta hyvin vaalealla tai tummalla L:llä
- P3-arvojen kopiointia painolle tarkoitettuun brändiohjeeseen
- Oletusta, että kirkas OKLCH-väri näyttää samalta joka näytöllä
- Noin 0,2:n ylittävää kromaattisuutta suurilla taustapinnoilla

### Tee näin

- Tarkista arvot valitsimella, joka merkitsee sRGB-rajan
- Säilytä hex-varaväri brändiväreille
- Laske kromaattisuutta asteikon päitä kohti
- Säästä kirkkaimmat värit pieniin tehosteisiin

## OKLCH-liukuvärit

Liukuväreissä havaintoon perustuva väri hyödyttää näkyvimmin. Tavallinen CSS-liukuväri sekoittuu sRGB:ssä, joka painuu harmaaksi kaukaisten sävyjen välillä. Moderni CSS antaa valita sekoitusavaruuden. OKLab tai OKLCH pitää keskikohdan kirkkaana ja puhtaana.

- Sekoitus sRGB:ssä: harmaa keskikohta: `linear-gradient(90deg in srgb, #2563eb, #facc15)`
- Sekoitus OKLabissa: puhdas: `linear-gradient(90deg in oklab, #2563eb, #facc15)`
- Sekoitus OKLCH:ssa: vihreän kautta: `linear-gradient(90deg in oklch, #2563eb, #facc15)`

Samat kaksi väriä kolmella tavalla. OKLCH kulkee sävyympyrää pitkin, joten se voi ohittaa värejä, joita kummassakaan päässä ei ole.

OKLab sekoittaa suoralla linjalla ja sopii useimpiin kahden värin liukuihin. OKLCH kiertää sävyä, mikä on kaunista auringonlaskuissa ja sateenkaarissa mutta voi yllättää. Koko menetelmä avainsanoineen `shorter hue` ja `longer hue` on oppaassa [CSS-liukuvärit OKLCH:ssa](https://gradiently.design/fi/guide/css-gradient-oklch). Teoriaa käsittelee [liukuvärin interpolointi](https://gradiently.design/fi/guide/gradient-interpolation).

Gradientlyn Markit piirtyvät elävinä CSS-määritysten sijaan, ja jokaisella on oma palettinsa. Automaattinen muste valitsee siitä vaalean tai tumman tekstivärin kullekin riville, joten sanat erottuvat ilman lukujen tarkistamista. Jos aloitat mieluummin valmiista elävästä taustasta kuin valitsimen arvosta, selaa Markkinoita värisanoilla.

## FAQ

### Mikä OKLCH on?

OKLCH on OKLab-väriavaruuteen perustuva värimuoto. Se kuvaa värejä havaitulla valoisuudella, kromaattisuudella ja sävyllä, joten samat arvot näyttävät yhtä vaaleilta ja värikkäiltä.

### Onko OKLCH parempi kuin HSL?

Palettien, asteikkojen ja liukuvärien rakentamiseen kyllä, koska valoisuus vastaa silmän havaintoa. HSL sopii edelleen nopeisiin käsisäätöihin.

### Voinko käyttää oklch()-muotoa CSS:ssä nyt?

Kyllä. Chromen, Edgen, Firefoxin ja Safarin nykyversiot tukevat sitä. Lisää hex-varaväri ensin, jos sinun on tuettava hyvin vanhoja selaimia.

### Mikä on OKLCH:n suurin kromaattisuus?

Kiinteää enimmäisarvoa ei ole. Mahdollinen kromaattisuus riippuu valoisuudesta, sävystä ja näytöstä. sRGB:ssä useimpien sävyjen enimmäisarvo jää selvästi alle 0,37:n.

### Miten muunnan hex-värin OKLCH:ksi?

Liitä hex OKLCH-valitsimeen, kuten oklch.comiin, tai selaimen kehittäjätyökalujen väripaneeliin, joka näyttää saman värin OKLCH:na.