HSL–HEX-värimuunnin

HSL–HEX-muunnin: Väriarvojen välittömään kääntämiseen

Tällä sivulla syötetään HSL-väri – hue (sävy) asteina 0–360, saturation (kylläisyys) prosentteina ja lightness (vaaleus) prosentteina – ja sivu näyttää heti vastaavan heksadesimaalisen (HEX) värikoodin. HEX-koodi on kuusinumeroinen (tai kolminumeroinen lyhenne) merkintätapa, jota käytetään kaikkialla CSS:ssä ja suunnittelutyökaluissa, esimerkiksi #1E90FF. Kun kirjoitat tai valitset värin, HEX-arvo päivittyy välittömästi. Kaikki muut värikentät (RGB, HSV, CMYK, LAB) päivittyvät samanaikaisesti.

Mikä tekee tästä sivusta erilaisen

Tämä sivu on omistettu nimenomaan HSL–HEX-muunnokselle. HSL on värimalli, joka on suunniteltu ihmisen väripäättelyä varten – vaaleuden muuttaminen yksinään pitää sävyn ennallaan, minkä vuoksi sitä käytetään palettien ja teemojen luomisessa. HEX puolestaan on kuusinumeroinen (tai kolminumeroinen lyhenne) RGB-merkintätapa; se ei kanna alpha-kanavaa, ellei käytetä kahdeksannumeroista muotoa. Muunnos on suora ja häviötön sRGB-väriavaruuden sisällä, toisin kuin muunnokset, joissa käytetään LAB- tai CMYK-väriavaruuksia, jotka saattavat sovittaa värialueen ulkopuolisia värejä.

Toisin kuin monet yleiset värimuuntimet, tämä sivu ei tee oletuksia tai pyöristyksiä, jotka poikkeaisivat standardista HSL–RGB–HEX -algoritmista. Sivu ei myöskään lataa syötteitä palvelimelle; kaikki käsittely tapahtuu suoraan selaimessasi. Tämä tarkoittaa, että arkaluonteisia väripaletteja voi käsitellä huoletta.

HSL-värimallin perusteet

HSL tulee sanoista Hue, Saturation, Lightness. Se on väriavaruus, joka pyrkii jäljittelemään sitä, miten ihminen hahmottaa värejä: ensin valitaan värisävy (punainen, sininen, vihreä jne.), sitten säädetään sen puhtautta (kylläisyys) ja lopuksi vaaleutta tai tummuutta (vaaleus).

• Hue (sävy) ilmaistaan asteina 0–360 väriympyrällä. 0° on punainen, 120° vihreä, 240° sininen. Kaikki muut sävyt löytyvät väliltä.
• Saturation (kylläisyys) on prosenttiluku 0–100 %. 0 % tarkoittaa harmaasävyä (ei väriä), 100 % täysin puhdasta väriä.
• Lightness (vaaleus) on myös prosentti 0–100 %. 0 % on aina musta, 100 % aina valkoinen. 50 % on ”normaali” vaaleus, jossa väri on kirkkaimmillaan.

HSL on erityisen hyödyllinen teemojen luomisessa: jos haluat esimerkiksi tummennetun version tietystä väristä, voit yksinkertaisesti vähentää vaaleusarvoa pitäen sävyn ja kylläisyyden samoina. Tämä on paljon intuitiivisempaa kuin RGB- tai HEX-arvojen käsittely.

Heksadesimaalivärikoodien rakenne

HEX-värikoodi on tapa esittää RGB-väriarvo heksadesimaalilukuina. Jokainen RGB-kanava (punainen, vihreä, sininen) saa arvon 0–255, joka ilmaistaan kahdella heksadesimaaliluvulla (00–FF). Koodi alkaa #-merkillä.

Esimerkiksi #4f46e5 tarkoittaa: punainen 4F (79), vihreä 46 (70), sininen E5 (229). Jos jokainen kanava voidaan esittää yhdellä heksadesimaaliluvulla (esim. 0–15 eli 0–F), voidaan käyttää kolminumeroista lyhennettä – kuten #abc tarkoittaa #aabbcc. Tämä sivu näyttää kolminumeroisen muodon, kun se on mahdollista.

On tärkeää huomata, että HEX-koodi ei sisällä alpha-läpinäkyvyyttä, ellei käytetä kahdeksannumeroista muotoa (esim. #4f46e580). Tämä sivu tuottaa vain kuusinumeroisia HEX-koodeja, joten läpinäkyvyyttä ei käsitellä.

Kuinka muunnos toimii: HSL → RGB → HEX

Muunnos HSL:stä HEX:iin tapahtuu kahdessa vaiheessa. Ensin HSL muunnetaan RGB:ksi, sitten RGB muunnetaan heksadesimaaliluvuiksi. Tämä on standardi CSS-spesifikaation mukainen algoritmi.

Vaihe 1: HSL → RGB

Kun H on sävy (0–360), S on kylläisyys (0–100 %), L on vaaleus (0–100 %), lasketaan ensin normalisoidut arvot:

• h = H / 360
• s = S / 100
• l = L / 100

Sen jälkeen käytetään kaavaa, jossa lasketaan chroma (C), toinen väriarvo (X) ja kolmas väriarvo (m). Esimerkiksi kun h on välillä 0–1:

• C = (1 - |2*l - 1|) * s
• h1 = h * 6
• X = C * (1 - |h1 mod 2 - 1|)
• m = l - C / 2

Sitten määritetään (R', G', B') sen mukaan, missä kuudenneksessa h1 on. Lopuksi R = (R' + m) * 255, G = (G' + m) * 255, B = (B' + m) * 255. Nämä arvot pyöristetään kokonaisluvuiksi.

Vaihe 2: RGB → HEX

Jokainen RGB-kanava muunnetaan heksadesimaaliluvuksi käyttäen toString(16)-funktiota, ja tarvittaessa lisätään etunolla, jos arvo on alle 16. Esimerkiksi R=79 -> 4F, G=70 -> 46, B=229 -> E5. Lopuksi yhdistetään #4f46e5.

Tämä algoritmi on häviötön sRGB-väriavaruudessa: mikä tahansa HSL-arvo, joka on sallituilla alueilla, tuottaa tarkasti määritellyn HEX-koodin. Koska sRGB on sama väriavaruus, jota HEX edustaa, muunnoksessa ei tapahdu värin ulkopuolista sovittamista (gamut clipping), toisin kuin LAB- tai CMYK-muunnoksissa.

Syötteet, tulosteet ja reunatapaukset

Syötteet: Käyttäjä syöttää hue-arvon (0–360), kylläisyysprosentin (0–100 %) ja vaaleusprosentin (0–100 %). Esimerkki: 243, 75%, 59%. On tärkeää, että prosenttimerkkiä ei unohdeta – ilman sitä sivu tulkitsee arvon virheellisesti.

Tulosteet: Päätuloste on HEX-värikoodi (esim. #4f46e5). Jos kaikki RGB-kanavat ovat alle 16, sivu näyttää myös kolminumeroisen lyhenteen (esim. #abc). Kaikki muut värikentät (RGB, HSV, CMYK, LAB) päivittyvät samanaikaisesti.

Reunatapaukset ja virheilmoitukset:

• Jos HSL-arvot ovat sallittujen alueiden ulkopuolella (hue alle 0 tai yli 360, kylläisyys tai vaaleus alle 0 % tai yli 100 %) tai ne eivät ole oikeassa muodossa, sivu näyttää virheilmoituksen: "Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%."
• Jos käyttäjä syöttää esimerkiksi 243, 75, 59 ilman prosenttimerkkejä, sivu tulkitsee numeeriset arvot väärin ja näyttää todennäköisesti virheilmoituksen.
• CMYK-tulos on arvio eikä välttämättä vastaa ammattipainatuksen arvoja. Sivu varoittaa tästä.
• Kaikki käsittely tapahtuu selaimessa; mitään ei ladata palvelimelle.

Kenelle tämä sivu on tarkoitettu

• Suunnittelijoille, jotka luovat väripaletteja HSL:llä ja tarvitsevat HEX-koodeja toteutukseen koodissa tai suunnittelutyökaluissa.
• Front-end-kehittäjille, jotka saavat HSL-arvoja suunnittelutiedostoista (esim. Figma, Sketch) ja joutuvat kääntämään ne CSS:n HEX-ominaisuuksiksi.
• Kaikille, jotka säätävät teemoja tai soveltavat saavutettavuuden kontrastisuhteita muuttamalla vaaleutta HSL:llä ja muuntavat tuloksen HEX-arvoksi tuotantoa varten.

HSL on erityisen hyödyllinen saavutettavuuden kannalta: kun haluat varmistaa, että teksti erottuu taustasta, voit muokata vaaleusarvoa säilyttäen sävyn. Tämä sivu antaa sinulle tarkan HEX-koodin, jota voit käyttää CSS:ssä kontrastin tarkistamiseen.

Usein kysytyt kysymykset

Miksi HEX-koodi on välillä kolminumeroinen ja välillä kuusinumeroinen?
Kolminumeroinen lyhenne on mahdollinen vain, kun jokainen RGB-kanava voidaan esittää yhdellä heksadesimaaliluvulla (arvo 0–15, eli 0–F). Esimerkiksi #aabbcc voidaan kirjoittaa #abc. Tämä sivu näyttää lyhenteen, kun se on mahdollista.

Onko muunnos tarkka?
Kyllä, HSL:stä HEX:iin muunnos on häviötön sRGB-väriavaruudessa. Kaikki sallitut HSL-arvot tuottavat tarkasti saman värisävyn HEX-muodossa.

Mitä teen, jos saan virheilmoituksen?
Tarkista, että syötät hue-arvon numerona (0–360) ja kylläisyyden ja vaaleuden prosenttina prosenttimerkillä, esimerkiksi 243, 75%, 59%. Varmista, ettei arvoja ole erotettu väärillä välimerkeillä.

Voiko tämä sivu käsitellä läpinäkyvyyttä?
Ei. Sivu tuottaa vain kuusinumeroisia HEX-koodeja, jotka eivät sisällä alpha-kanavaa. Jos tarvitset läpinäkyvyyttä, käytä kahdeksannumeroista HEX-muotoa (#RRGGBBAA) erillisellä työkalulla.

Miksi CMYK-tulos on vain arvio?
CMYK on väriavaruus, joka on suunniteltu painatusta varten, eikä sitä voi muuntaa suoraan sRGB:stä ilman värihallintaa ja profiileja. Tämä sivu antaa likimääräisen arvon, jota ei pidä käyttää ammattipainatuksessa.

Toimiiko sivu ilman internet-yhteyttä?
Kyllä, koska kaikki käsittely tapahtuu selaimessasi. Kun sivu on ladattu, se toimii offline-tilassa.