Miten muunnan HEX-koodin HSL-arvoksi?

Ensin hex-koodi luetaan punaisena, vihreänä ja sinisenä (0-255), ja sen jälkeen sama väri ilmaistaan sävynä, kylläisyytenä ja valoisuutena. Sävy on kulma väriympyrällä (0-360), kylläisyys kertoo, miten voimakas väri on (0-100 %) ja valoisuus, miten vaalea se on (0-100 %). #3366cc muuttuu muotoon hsl(220, 60%, 50%). Tämä muunnin tekee sen heti kirjoittaessasi.

Näin se toimii

1Syötä hex-koodi. Kirjoita tai liitä hex-väri kuten #3366cc (tai #36c), tai valitse se värivalitsimella. Risuaita on valinnainen.

2Lue HSL-arvo. hsl()-merkkijono, pelkät arvot ja reaaliaikainen värin esikatselu päivittyvät kirjoittaessasi, ja kanavakohtainen erittely näyttää sävyn, kylläisyyden ja valoisuuden erikseen.

3Kopioi tarvitsemasi muoto. Klikkaa Kopioi-painiketta hsl()-merkkijonon tai raakojen arvojen vieressä. Tarvitsetko toisen suunnan? Syötä alla sävy, kylläisyys ja valoisuus saadaksesi hex-koodin takaisin.

Kenelle

Front end -kehittäjät, jotka muuntavat hex-koodin hsl()-muotoon, jotta valoisuutta voi säätää hover- ja focus-tiloihin ilman kokonaan uuden värin valitsemista.

Palettien suunnittelijat, jotka pitävät sävyn kiinteänä ja säätävät kylläisyyttä ja valoisuutta luodakseen sävyjä ja vivahteita yhdestä brändin väristä.

Teemojen ja design-tokenien tekijät, jotka tallentavat värit HSL-muodossa, koska sitä on paljon helpompi lukea ja säätää käsin kuin hex-merkkijonoa.

Kaikki, jotka sovittavat värejä työkalujen välillä, kun yksi haluaa hexin (Figma, useimmat CSS-käytöt) ja toinen HSL:n (SCSS-apuohjelmat, jotkin värijärjestelmät).

Muunnin hyväksyy kaikki CSS:n hex-muodot: 6-merkkisen #3366cc, lyhennetyn 3-merkkisen #36c sekä 4- ja 8-merkkiset muodot alfakanavalla, risuaidan kanssa tai ilman. Se näyttää hsl()- tai hsla()-merkkijonon, pelkät arvot ja kanavakohtaisen erittelyn - sekä HSL-koodin muuntamisen takaisin hexiksi, kun tarvitset toisen suunnan. Kaikki toimii selaimessasi - ei latausta palvelimelle, ei tiliä, ei rajoituksia.

Usein kysyttyä

Onko tämä HEX-HSL-muunnin ilmainen?

Kyllä - se on 100 % ilmainen, ei vaadi rekisteröitymistä eikä rajoituksia. Kaikki toimii selaimessasi.

Ladataanko värini jonnekin?

Ei. Muunnos on tavallista JavaScriptiä, joka suoritetaan laitteellasi - mitään ei lähetetä palvelimelle, ja työkalu toimii offline-tilassa heti kun sivu on latautunut.

Mikä on HSL?

HSL tulee sanoista hue, saturation ja lightness eli sävy, kylläisyys ja valoisuus. Sävy on kulma 0-360 astetta väriympyrällä, kylläisyys kertoo värin voimakkuuden 0-100 prosentin välillä, ja valoisuus kulkee 0 prosentista (musta) puhtaan värin kautta 50 prosentissa aina 100 prosenttiin (valkoinen).

Miten hex muunnetaan HSL:ksi käsin?

Muunna hex-koodi punaiseksi, vihreäksi ja siniseksi ja jaa kukin luku 255:llä. Ota kolmesta suurin ja pienin arvo: valoisuus on niiden keskiarvo, kylläisyys on (suurin - pienin) jaettuna (1 - |2L - 1|):llä, ja sävy määräytyy siitä, mikä kanava on suurin, skaalattuna välille 0-360 astetta.

Tukeeko se lyhennettyä muotoa kuten #36c?

Kyllä. CSS:n lyhennysmuodossa jokainen numero kahdennetaan, joten #36c laajenee muotoon #3366cc ja muuntuu arvoksi hsl(220, 60%, 50%). 4-merkkinen muoto toimii samoin, ja viimeinen numero on alfa.

Miten se käsittelee läpinäkyvyyttä (HSLA)?

8-merkkisessä hex-koodissa alfa on viimeisessä parissa. Tämä tavu (0-255) jaetaan 255:llä, jotta saadaan hsla():n odottama 0-1-alfa pyöristettynä kolmeen desimaaliin - näin #3366cc80 muuttuu muotoon hsla(220, 60%, 50%, 0.502).

Voiko se muuntaa HSL:n takaisin hexiksi?

Kyllä. Käytä tuloksen alla olevaa HSL-hex-riviä: syötä sävy (0-360) sekä kylläisyys ja valoisuus (0-100 %), niin saat hex-koodin heti. Rajojen ulkopuoliset arvot rajataan sallitulle välille.

Miksi HSL on hyödyllinen hexin sijaan?

HSL on ihmisen luettavissa: väriä voi vaalentaa nostamalla valoisuutta (L), himmentää laskemalla kylläisyyttä (S) tai vaihtaa sen sävyperhettä muuttamalla sävyä (H) - kaikki ilman hex-numeroiden arvailua. Siksi se sopii erinomaisesti yhtenäisten palettien, hover-tilojen ja design-tokenien rakentamiseen.