HEX–HSL-värimuunnin

HEX:stä HSL:ään – miksi ihminen tarvitsee väliinputoajan

HEX‑koodi on netin ja suunnittelun peruskauraa: kuusi merkkiä, risuaita edessä, ja väri on määritelty. Mutta jos olet koskaan yrittänyt arvata, miltä #4f46e5 näyttää sen enempää kuin ”sinertävältä”, tiedät ongelman. HEX tallentaa värit laitteelle sopivassa muodossa, ei ihmiselle. Tämä sivu ottaa HEX‑koodin ja tuottaa sen HSL‑vastineen – muodon, jossa sävy, kylläisyys ja vaaleus ovat suoraan luettavissa. Samalla näet värin RGB‑, HSV‑, CMYK‑ ja LAB‑esitykset, ja voit kopioida käyttöösi sen, jota tarvitset.

Mitä HEX‑värikoodi tarkalleen ottaen tarkoittaa

HEX on tapa kirjoittaa RGB‑väri käyttäen heksadesimaalilukuja. Täysi kuusinumeroinen muoto koostuu kolmesta parista: punainen, vihreä ja sininen, kukin väliltä 00–FF (desimaalilukuna 0–255). Esimerkiksi #1E90FF puretaan näin:

• Punainen (R): 0x1E = 30
• Vihreä (G): 0x90 = 144
• Sininen (B): 0xFF = 255

Kolmimerkkinen lyhenne kuten #abc laajennetaan toistamalla jokainen merkki kahdesti: #aabbcc. Tämä toimii vain, kun kukin komponentti koostuu kahdesta samasta numerosta – #a2c ei käy, koska se laajenisi #aa22cc, mikä periaatteessa on ok, mutta oikea tulkinta on, että lyhenne toimii vain, kun jokainen heksadesimaaliluku on esitettävissä yhdellä merkillä ilman tarkkuuden menetystä. Käytännössä #abc tarkoittaa tismalleen samaa kuin #aabbcc.

HEX on kompakti ja nopea kirjoittaa, mutta se ei kerro mitään värin loogisesta rakenteesta. Et voi katsoa #4f46e5 ja päätellä, mitä tapahtuu, jos kirkastat sitä – se on pelkkää matematiikkaa. Tässä kohtaa HSL astuu kuvaan.

HSL – luonnollinen tapa puhua väreistä

HSL on lyhenne sanoista Hue, Saturation, Lightness – sävy, kylläisyys ja vaaleus. Se on suunniteltu ihmisen tavan hahmottaa värejä mukaan:

• Hue (sävy) ilmaistaan asteina 0–360 väriympyrällä. 0 on punainen, 120 vihreä, 240 sininen.
• Saturation (kylläisyys) on prosenttiluku 0–100 %. 0 % on harmaa, 100 % on täysin puhdas väri.
• Lightness (vaaleus) on myös 0–100 %. 0 % on musta, 100 % valkoinen, 50 % on ”puhdas” väri.

Kun työkalu muuttaa HEX‑koodin HSL:ksi, saat esimerkiksi #4f46e5 -> HSL(244°, 76%, 58%). Tämä kertoo heti, että kyseessä on sininen (244°), melko kylläinen (76%) ja keskivaalea (58%). Jos haluat tummemman version hover‑tilaa varten, lasket vain vaaleutta 10 prosenttiyksiköllä – sävy pysyy samana. HEX‑maailmassa joutuisit arvailemaan, mitä numeroita muuttaa ja paljonko.

HSL:n suurin etu on se, että voit muokata väriä loogisesti. Tästä syystä se on standardi väripalettien generoinnissa, teemoitusjärjestelmissä ja saavutettavuustarkastuksissa.

Muunnoksen matematiikka – mitä tapahtuu selaimessa

Taustalla on tarkka algoritmi, joka on määritelty CSS Color -spesifikaatiossa. Vaiheet ovat seuraavat:

1. HEX -> RGB – jokainen heksadesimaalipari muutetaan desimaaliluvuksi. Jos käytössä on kolmen merkin lyhenne, se laajennetaan ensin kuusimerkkiseksi. Esimerkki: #1E90FF -> R=30, G=144, B=255.

2. RGB -> HSL – arvot normalisoidaan välille 0–1 jakamalla ne 255:llä. Sitten lasketaan komponenttien maksimi- ja minimiarvot, niiden erotus ja summa. Kaavat ovat suoraviivaiset:

   • Valoisuus L = (max + min) / 2
   • Jos max == min, sävy on 0 ja kylläisyys 0 (väri on harmaa)
   • Muuten: kylläisyys S = delta / (1 - |2 * L - 1|)
   • Sävy H lasketaan sen mukaan, mikä komponentti on maksimi (punainen, vihreä tai sininen) ja palautetaan sitten asteina 0–360

Tämä kaikki tapahtuu silmänräpäyksessä, eikä mikään tieto poistu selaimestasi.

Muut väriavaruudet – miksi ne ovat mukana

Sivulla näytetään värin esitys myös RGB-, HSV-, CMYK- ja LAB‑muodoissa. Jokaisella on oma käyttötarkoituksensa:

• RGB – kaikkien näyttöjen perusta, mutta ihmiselle vaikeaselkoinen. Tarjolla lähinnä vertailun ja yhteensopivuuden vuoksi.
• HSV (Hue, Saturation, Value) – läheinen HSL:lle, mutta ”Value” (kirkkaus) korvaa Lightnessin. HSV on suosittu kuvankäsittelyohjelmissa, koska se sopii hyvin värien valintaan ja sävyjen sekoittamiseen.
• CMYK – painoväreille tarkoitettu malli (syaani, magenta, keltainen, musta). Tärkeä rajoitus: nämä arvot ovat vain arvio ruudulla. Ne eivät ole ammattipainoon kelvollisia ilman laitekalibrointia ja paino-olosuhteiden mittausta. Älä käytä näitä suoraan painoon luottamatta.
• LAB – CIELAB‑väriavaruus, joka on suunniteltu vastaamaan ihmisen näköjärjestelmää. Se on laajin mukana olevista väriavaruuksista: se sisältää värejä, joita mikään näyttö ei pysty toistamaan. Jos syötät värin, joka on olemassa LAB:ssa mutta ei RGB:n toistokyvyn sisällä, sivu sovittaa sen lähimpään mahdolliseen näytöllä toistettavaan väriin. Tämä saattaa aiheuttaa pienen muutoksen, kun väri muunnetaan takaisin HEX:ksi.

Raja‑arvot ja ongelmatilanteet – mitä odottaa

Työkalu on tiukka hyväksymissään syötteissä. Ainoat kelvolliset arvot ovat:

• Kuusimerkkinen heksadesimaaliluku, risuaidalla tai ilman: #4f46e5 tai 4f46e5
• Kolmimerkkinen lyhenne: #abc tai abc

Mikä tahansa muu teksti – liian lyhyt, liian pitkä, väärässä muodossa tai sisältää kirjaimia A–F:n ulkopuolelta – tuottaa virheilmoituksen: ”Enter a hex color like #4f46e5 or #abc.”

Koska HEX ei kanna alfakanavaa, kaikki värit ovat täysin peittäviä – läpinäkyvyyttä ei tässä muunnoksessa käsitellä. Jos tarvitset läpinäkyvyyttä, tämä työkalu ei sovellu siihen, ja sinun tulee etsiä HEX‑alfa‑muunnin, joka käsittelee kahdeksanmerkkinen HEX‑koodia.

Kaikki muunnokset suoritetaan selaimessasi JavaScriptillä. Mitään tietoa ei lähetetä palvelimelle, ei tallenneta evästeisiin eikä jaeta eteenpäin.

Kenelle tämä sivu on tehty ja miksi

Tämä työkalu on tarkoitettu kaikille, jotka käsittelevät värejä koodin ja designin rajapinnalla.

• Front‑end‑kehittäjät saavat HEX‑koodin muotoiltua suoraan HSL:ksi, jota he voivat käyttää CSS‑custom‑propertyissä. HSL:n avulla on helppo luoda hover‑tiloja, aktiivisia tiloja ja teemavariaatioita ilman toissijaisia värikoodeja.
• UI/UX‑suunnittelijat ajattelevat usein värejä HSL:n kautta. Kun brändiväri on annettu HEX:inä, muunnoksen avulla saat sen HSL‑muotoon, jossa voit varioida kylläisyyttä ja vaaleutta suunnittelujärjestelmää varten.
• Väripalettien rakentajat hyötyvät HSL:n loogisuudesta: komplementtiväri saadaan lisäämällä sävyyn 180°, analogiset värit muuttamalla sävyä 30° suuntaan tai toiseen. Kaikki tämä on mahdotonta suoraan HEX‑koodeilla.
• Saavutettavuustarkastajat – WCAG‑kontrastisuhteen laskeminen onnistuu helpommin, kun tiedät värien vaaleuden prosentteina. HSL:n avulla näet suoraan, onko taustan ja tekstin välinen vaaleusero riittävä.

UKK – usein kysytyt kysymykset

Mikä ero on HSL:llä ja HSV:llä? Molemmat käyttävät samaa sävyastetta (0–360°). Ero on kolmannessa komponentissa: HSL käyttää Lightness (vaaleus) arvoa, jossa 100 % on valkoinen ja 0 % musta. HSV käyttää Value (kirkkaus) arvoa, jossa 100 % on puhdas väri ja 0 % musta. HSV tuottaa usein kirkkaampia värejä samalla sävyllä, kun taas HSL pyrkii symmetrisempään vaaleuden hallintaan.

Miksi CMYK‑arvot ovat vain arvio? CMYK on tarkoitettu painoväreille, ja sen toistokyky riippuu täysin käytettävästä painomateriaalista, musteesta ja kalibroinnista. Ruudulla tehty muunnos perustuu geneerisiin profiileihin, eikä sitä tule käyttää lopullisena paino‑ohjeena ilman erillistä color management -työkalua.

Voinko käyttää kolmimerkkisen HEX‑lyhenteen? Kyllä. Työkalu laajentaa #abc muotoon #aabbcc automaattisesti. Huomaa, että jokainen merkki toistetaan – #12c tarkoittaa #1122cc, ei #1aa22c tms. Lyhenne toimii vain, koska se on standardi tapa CSS:ssä, mutta se rajoittaa värit 4096 mahdolliseen yhdistelmään (16×16×16) sen sijaan, että käytössä olisi 16,7 miljoonaa (256×256×256).

Miksi väri muuttuu hieman, kun vaihdan väriavaruutta tai lisään LAB‑arvon? LAB on laajempi kuin RGB. Jos syötät LAB‑värin, joka ei mahdu näyttösi toistokykyyn, se pitää sovittaa lähimpään mahdolliseen väriin ennen kuin se voidaan esittää ruudulla. Tämä sovitus aiheuttaa pienen muutoksen, joka voi näkyä, kun väri muunnetaan takaisin HEX:ksi. Sama pätee harvinaisiin CMYK‑arvoihin, jotka eivät ole RGB:n toistokyvyllä toteutettavissa.

Tapahtuuko syöttämälleni värikoodille mitään tietojen lähetystä? Ei. Kaikki laskenta tapahtuu selaimessasi JavaScriptillä. Mitään HEX‑koodia, HSL‑arvoa tai muuta tietoa ei lähetetä palvelimelle, tallenneta evästeisiin tai jaeta kolmansille osapuolille.

Mikä on paras tapa käyttää HSL:ää CSS:ssä? Kirjoitat color: hsl(244deg, 76%, 58%). Moderni CSS (Level 4) sallii myös hsl(244 76% 58%) ilman pilkkuja ja deg‑yksikön jättämisen pois. HSL sopii erityisen hyvin light-dark()‑funktion kanssa, jossa voit vaihtaa vaaleusarvoa teeman mukaan ilman, että sävy muuttuu.