OKLCH selitettynä: värimuoto, joka vihdoin vastaa silmääsi

Mikä OKLCH on

OKLCH on Oklabin napakoordinaattimuoto. Oklab on havaintopohjainen väriavaruus, jonka Björn Ottosson julkaisi vuonna 2020. Siinä on kolme lukua. L on koettu vaaleus 0:sta (musta) 1:een tai 100 %:iin (valkoinen). C on kroma eli värin määrä 0:sta (harmaa) noin 0,37:ään, joka on näyttöjen voimakkaimpien värien taso. H on sävyn kulma 0–360 astetta.

Sama väri näyttää eri muodoissa tältä. PickShade laskee kaikki alla olevat arvot reaaliajassa, joten voit kopioida ne sellaisenaan.

Miksi OKLCH on parempi kuin HSL

HSL:n vaaleus on kaava, ei havainto. hsl(60 100% 50%) on kirkas keltainen ja hsl(240 100% 50%) tumma sininen, mutta molempien vaaleus on muka 50 %. Jos rakennat paletin HSL:n varaan, jokaista sävyä joutuu korjaamaan käsin.

OKLCH:ssa värit, joilla on sama L, näyttävät yhtä vaaleilta. Voit pitää L:n ja C:n ennallaan ja kiertää H:ta, jolloin saat tasapainoisen joukon sävyjä, tai pitää H:n ja C:n ennallaan ja porrastaa L:ää, jolloin saat siistin vivahdeasteikon. Siksi Tailwind CSS v4 määrittelee koko oletuspalettinsa OKLCH:ssa.

Vaaleus ennustaa myös kontrastia. Teksti, jonka L eroaa taustasta noin 0,4 tai enemmän, on yleensä luettavaa, joten saavutettavia värivalintoja on paljon helpompi arvioida.

Syntaksi CSS:ssä

Vaaleuden voi kirjoittaa prosentteina tai lukuna 0–1. Kroma on luku. Sävy on kulma asteina. Läpinäkyvyys tulee kauttaviivan jälkeen.

color: oklch(62.8% 0.258 29.23);
background: oklch(0.7 0.15 250 / 50%);
border-color: oklch(from var(--brand) calc(l - 0.1) c h);

Selaintuki

oklch() toimii kaikissa nykyisissä selaimissa: Safarissa versiosta 15.4, Chromessa ja Edgessä versiosta 111 ja Firefoxissa versiosta 113. Se kattaa reilusti yli 90 % käyttäjistä. Hyvin vanhoja selaimia varten lisää HEX-varavaihtoehto OKLCH-arvoa edeltävälle riville.

color: #ff5733;
color: oklch(68% 0.21 33.7);

Kroman rajat ja värialue

OKLCH:lla voi kuvata värejä, joita mikään näyttö ei pysty näyttämään. Suurin mahdollinen kroma riippuu vaaleudesta ja sävystä: voimakas keltainen onnistuu vain suurella vaaleudella, voimakas sininen vain pienellä. Kun arvo on sRGB:n tai Display P3:n värialueen ulkopuolella, selain sovittaa sen takaisin alueelle, mikä voi muuttaa väriä.

PickShade merkitsee sRGB:n ulkopuoliset värit ja antaa lähimmän värin, joka mahtuu alueelle. Se löydetään pienentämällä kromaa ja säilyttämällä vaaleus ja sävy, kuten CSS Color 4 suosittelee.

Näin muunnat HEX-koodin OKLCH:ksi

Muunnos kulkee HEX:stä sRGB:hen, sRGB:stä lineaariseen valoon, lineaarisesta sRGB:stä tappisolujen LMS-avaruuteen, kuutiojuuren ja matriisin kautta Oklabiin ja lopuksi Oklabista napakoordinaatteihin. Käsin laskiessa virheet ovat helppoja, joten liitä mikä tahansa väri muuntimeen ja kopioi tulos.

Kysymyksiä ja vastauksia