Mikä on OKLCH ja miksi minun pitäisi käyttää sitä HEX:n tai HSL:n sijaan?

OKLCH (Kirkkaus, Värikylläisyys, Sävy) on Oklab-malliin perustuva perceptuaalisesti tasainen väriavaruus. Toisin kuin HEX tai HSL, yhtä suuret numeeriset muutokset OKLCH:ssä tuottavat yhtä suuret koetut erot. Tämä tekee siitä ihanteellisen saavutettavien väripalettien suunnitteluun, sujuvien gradienttien luomiseen ja johdonmukaisten Tailwind v4 -väriskaalien generointiin.

Kuinka muunnan HEX:n OKLCH:ksi?

Liitä HEX-arvosi (esim. #3b82f6) HEX-syöttökenttään ja OKLCH-kenttä päivittyy välittömästi vastaavaksi oklch(0.6 0.18 250) -merkinnäksi. Kaikki muut muodot — OKLab, RGB ja HSL — synkronoituvat myös samanaikaisesti, joten saat täydellisen ja tarkan tuloksen ilman lisätoimia.

Mitä tarkoittaa 'sRGB-gamutin ulkopuolella' ja mitä värille tapahtuu?

Jotkut OKLCH-värit — erityisesti korkean värikylläisyyden arvot — ylittävät sRGB-väriavaruuden, jota useimmat näytöt käyttävät. Kun näin tapahtuu, työkalu soveltaa CSS Color 4 toGamut-algoritmia löytääkseen lähimmän näytettävissä olevan sRGB-värin. Keltainen varoitusbanneri näyttää alkuperäisen gamutin ulkopuolella olevan arvon kartoitetun tuloksen rinnalla, joten tiedät tarkalleen, mitä värillesi tapahtuu.

Kuinka Tailwind v4 OKLCH -paletigeneraattori toimii?

Generaattori käyttää Tailwind v4:n virallista kirkkauden aikataulua (50=0.971, 100=0.945, aina 950=0.238 asti) sovellettuna nykyiseen sävyysi ja värikylläisyyteesi. Se tuottaa 11 väriaskelta vaaleasta tummaan ja vie ne @theme { --color-brand-50: oklch(...); } -koodilohkona valmiina liitettäväksi CSS:ään.

Miksi OKLCH-interpolointi näyttää paremmalta kuin HSL gradienteissa?

HSL interpoloi lieriömäisen koordinaatiston kautta, joka ei vastaa ihmisen havaintoa, aiheuttaen usein harmaita kuoppia tai odottamattomia sävynmuutoksia gradientin puolivälissä. OKLCH interpoloi perceptuaalisesti tasaisessa Oklab-avaruudessa, joten kirkkaus ja värikylläisyys siirtyvät sujuvasti ilman odottamattomia värivääristymiä gradientin keskiosassa.

Onko tämä OKLCH-muunnin ilmainen ja yksityinen?

Kyllä. Työkalu on täysin ilmainen ja toimii kokonaan selaimessasi culori-kirjaston avulla. Mitään väriarvoja ei lähetetä palvelimelle, ja kaikki käsittely tapahtuu paikallisesti laitteellasi täydellisen tietosuojan varmistamiseksi.

Toimiiko CSS Color 4 OKLCH kaikissa selaimissa?

OKLCH-värisyntaksi (oklch()) on tuettu kaikissa moderneissa selaimissa vuodesta 2023 alkaen, mukaan lukien Chrome 111+, Firefox 113+, Safari 15.4+ ja Edge 111+. Vanhemmille selaimille käytä tämän muuntimen tarjoamia HEX- tai RGB-varaarvoja täydellisen taaksepäin yhteensopivuuden varmistamiseksi.

Värityökalut

OKLCH-värimuunnin – CSS Color 4, Tailwind v4 -paletigeneraattori

Ilmainen OKLCH-värimuunnin reaaliaikaisella synkronoinnilla OKLCH, OKLab, RGB, HSL ja HEX välillä. Sisältää L/C/H/alfa-liukusäätimet, CSS Color 4 -gamutkartoituksen ja Tailwind v4 -palettiviennin.

OKLCH (Kirkkaus, Värikylläisyys, Sävy) on Oklab-malliin perustuva perceptuaalisesti tasainen väriavaruus, joka on virallisesti hyväksytty CSS Color Level 4:ssä. Toisin kuin RGB tai HSL, OKLCH pitää koetun kirkkauden johdonmukaisena eri sävyissä, mikä tekee siitä ihanteellisen saavutettaville värijärjestelmille, Tailwind v4 -paleteille ja sujuville gradienteille.

Kuinka käyttää OKLCH-värimuunninta

1
Syötä värin arvo
Kirjoita tai liitä arvo missä tahansa tuetussa muodossa: oklch(0.6 0.18 250), #3b82f6, rgb(59, 130, 246), hsl(217deg 91% 60%) tai oklab(0.6 -0.056 -0.169). Työkalu synkronoi kaikki muut muodot välittömästi.
2
Hienosäädä L/C/H/Alfa-liukusäätimillä
Vedä Kirkkaus (L), Värikylläisyys (C), Sävy (H) tai Alfa-liukusäätimiä. Värikylläisyysliukusäädin näyttää sRGB-gamutin rajamarkkerin, joten tiedät aina, kun väri ylittää standardinäyttöalueen.
3
Tarkista gamutvaroitus jos se ilmestyy
Jos OKLCH-värisi on sRGB-gamutin ulkopuolella, keltainen varoitusbanneri näyttää alkuperäisen arvon ja CSS Color 4 toGamut-kartoitetun tuloksen, jota käytetään näyttämiseen.
4
Luo Tailwind v4 -paletti
Tailwind v4 OKLCH -palettiosio luo automaattisesti 50–950 väriaskeleet nykyiselle sävyllesi Tailwindin virallisen kirkkauden aikataulun mukaisesti. Napsauta Kopioi liittääksesi @theme-lohkon suoraan CSS:ään.

Viitteet

W3C CSS Color Level 4 – oklch()
W3C-spesifikaatio, joka määrittelee OKLCH-värimerkinnän ja gamutkartoitusalgoritmit.
Culori – JavaScript-värikirjasto
Avoimen lähdekoodin kirjasto, joka tarjoaa OKLCH-muunnoksen, toGamut-kartoituksen ja perceptuaalisen interpoloinnin tässä työkalussa.
Evil Martians – OKLCH CSS:ssä: Miksi luopua RGB:stä ja HSL:stä?
Kattava opas, joka selittää OKLCH:n edut RGB:hen ja HSL:ään verrattuna modernissa värityössä.
Tailwind CSS v4 – Oletuspaletti
Tailwindin virallinen väripalettidokumentaatio, mukaan lukien OKLCH-kirkkausarvot, joita käytetään tässä paletigeneraattorissa.

Aiheeseen liittyvät työkalut

Värimuunnin

Muunna RGB, RGBA, HEX, HSL, HSV ja CMYK välillä kaksisuuntaisella reaaliaikaisella synkronoinnilla.

CSS-pienennin

Pienennä CSS, joka käyttää OKLCH-väriarvojasi.

SVG-katseluohjelma

Esikatsele ja tarkastele SVG-grafiikkaa, joka käyttää OKLCH-täyttö- ja viiva-arvoja.

Usein kysytyt kysymykset

Mikä on OKLCH ja miksi minun pitäisi käyttää sitä HEX:n tai HSL:n sijaan?: OKLCH (Kirkkaus, Värikylläisyys, Sävy) on Oklab-malliin perustuva perceptuaalisesti tasainen väriavaruus. Toisin kuin HEX tai HSL, yhtä suuret numeeriset muutokset OKLCH:ssä tuottavat yhtä suuret koetut erot. Tämä tekee siitä ihanteellisen saavutettavien väripalettien suunnitteluun, sujuvien gradienttien luomiseen ja johdonmukaisten Tailwind v4 -väriskaalien generointiin.
Kuinka muunnan HEX:n OKLCH:ksi?: Liitä HEX-arvosi (esim. #3b82f6) HEX-syöttökenttään ja OKLCH-kenttä päivittyy välittömästi vastaavaksi oklch(0.6 0.18 250) -merkinnäksi. Kaikki muut muodot — OKLab, RGB ja HSL — synkronoituvat myös samanaikaisesti, joten saat täydellisen ja tarkan tuloksen ilman lisätoimia.
Mitä tarkoittaa 'sRGB-gamutin ulkopuolella' ja mitä värille tapahtuu?: Jotkut OKLCH-värit — erityisesti korkean värikylläisyyden arvot — ylittävät sRGB-väriavaruuden, jota useimmat näytöt käyttävät. Kun näin tapahtuu, työkalu soveltaa CSS Color 4 toGamut-algoritmia löytääkseen lähimmän näytettävissä olevan sRGB-värin. Keltainen varoitusbanneri näyttää alkuperäisen gamutin ulkopuolella olevan arvon kartoitetun tuloksen rinnalla, joten tiedät tarkalleen, mitä värillesi tapahtuu.
Kuinka Tailwind v4 OKLCH -paletigeneraattori toimii?: Generaattori käyttää Tailwind v4:n virallista kirkkauden aikataulua (50=0.971, 100=0.945, aina 950=0.238 asti) sovellettuna nykyiseen sävyysi ja värikylläisyyteesi. Se tuottaa 11 väriaskelta vaaleasta tummaan ja vie ne @theme { --color-brand-50: oklch(...); } -koodilohkona valmiina liitettäväksi CSS:ään.
Miksi OKLCH-interpolointi näyttää paremmalta kuin HSL gradienteissa?: HSL interpoloi lieriömäisen koordinaatiston kautta, joka ei vastaa ihmisen havaintoa, aiheuttaen usein harmaita kuoppia tai odottamattomia sävynmuutoksia gradientin puolivälissä. OKLCH interpoloi perceptuaalisesti tasaisessa Oklab-avaruudessa, joten kirkkaus ja värikylläisyys siirtyvät sujuvasti ilman odottamattomia värivääristymiä gradientin keskiosassa.
Onko tämä OKLCH-muunnin ilmainen ja yksityinen?: Kyllä. Työkalu on täysin ilmainen ja toimii kokonaan selaimessasi culori-kirjaston avulla. Mitään väriarvoja ei lähetetä palvelimelle, ja kaikki käsittely tapahtuu paikallisesti laitteellasi täydellisen tietosuojan varmistamiseksi.
Toimiiko CSS Color 4 OKLCH kaikissa selaimissa?: OKLCH-värisyntaksi (oklch()) on tuettu kaikissa moderneissa selaimissa vuodesta 2023 alkaen, mukaan lukien Chrome 111+, Firefox 113+, Safari 15.4+ ja Edge 111+. Vanhemmille selaimille käytä tämän muuntimen tarjoamia HEX- tai RGB-varaarvoja täydellisen taaksepäin yhteensopivuuden varmistamiseksi.