OKLCH selitettynä: havaintoon perustuva väri suunnittelijalle

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

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ä 50 %:n valoisuudella, kontrasti valkoiseen vaihtelee keltaisen noin 1,07:1:stä sinisen 8,6:1:een.

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.

Näin kirjoitat OKLCH:n CSS:ssä

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

Selaintuki on laaja, ja voit tarkistaa yksityiskohdat caniusesta. Arvoja voi tutkia oklch.comin 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.

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, mutta yllätyksiä tulee harvoin. Asteikon muuttamista nimetyiksi tokeneiksi käsittelee designtokenit.

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

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.

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. Teoriaa käsittelee liukuvärin interpolointi.

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.