Värimuunnin
Syötä heksavärikoodi nähdäksesi sen RGB- ja HSL-vastineet sekä yksittäiset punaisen, vihreän ja sinisen kanavan arvot.
Kuinka tätä värimuunninta käytetään
- Syötä heksavärikoodi
Kirjoita 6-merkkinen heksakoodi heksavärikoodikenttään (esim. FF6B35 tai 00FF88). Jätä #-merkki pois.
- Lue RGB-arvot
Punaisen (Red), vihreän (Green) ja sinisen (Blue) kanavan tulokset näyttävät kunkin komponentin arvot välillä 0–255.
- Tarkista HSL-tulos
Tarkastele HSL-tulosta: sävy (0–360°), kylläisyys ja valoisuus — hyödyllinen värien säätämiseen.
Kuinka tämä värimuunnin toimii
Tämä työkalu muuntaa heksadesimaalivärikoodin RGB- (punainen, vihreä, sininen) ja HSL-muotoon (sävy, kylläisyys, vaaleus). Jokainen heksapari vastaa 8-bittistä kanava-arvoa (0–255), ja HSL-muunnos käyttää standardia väriavaruusmatematiikkaa.
R = hex[0:2] → desimaali; G = hex[2:4] → desimaali; B = hex[4:6] → desimaali Hex #FF6B35 → RGB(255, 107, 53) → HSL(16, 100%, 60%).
Hex 000000 → RGB(0, 0, 0) → HSL(0, 0%, 0%) — puhdas musta.
Hex FFFFFF → RGB(255, 255, 255) → HSL(0, 0%, 100%) — puhdas valkoinen. Hex 808080 → RGB(128, 128, 128) → HSL(0, 0%, 50%) — keskiharmaa.
- ✓ Syöte on kelvollinen 6-merkkinen heksavärikoodi.
- ✓ Alfakanavaa ei tueta tässä versiossa.
- CMYK-muunnos vaatii väriprofiilin, eikä se sisälly tähän.
Värimallien ymmärtäminen
HEX, RGB ja HSL ovat eri tapoja kuvata samaa väriä. HEX koodaa RGB-arvot 6-merkkiseksi heksadesimaalijonoksi: jokainen merkkipari vastaa yhtä 8-bittistä kanavaa (0–255). RGB ilmaisee samat arvot kolmena lukuna, jotka edustavat näyttöjen käyttämiä additiivisia päävärejä. HSL (Hue, Saturation, Lightness) on sylinterimäinen malli: sävy (hue) on kulma väriympyrällä (0° punainen, 120° vihreä, 240° sininen), kylläisyys (saturation) on värin voimakkuus ja valoisuus (lightness) on kirkkaus. Suunnittelijat suosivat usein HSL-mallia säätäessään värejä ohjelmallisesti — pelkän valoisuuden muuttaminen tummentaa tai vaalentaa väriä muuttamatta sävyä, ja kylläisyyden hienosäätö muuttaa värin eloisuutta.
Kehittäjien käyttötapaukset värien muuntamiselle
Kehittäjät muuntavat värejä rakentaessaan suunnittelujärjestelmiä, toteuttaessaan teemoja, luodessaan väripaletteja ja etsiessään virheitä CSS-koodista. Design-tokenit tallentavat värit usein heksamuodossa; muuntaminen RGB- tai HSL-muotoon mahdollistaa ajonaikaiset laskelmat, kuten peittävyyden (opacity) tai saavutettavuuden kontrastitarkistukset. Teemanvaihtajat saattavat tarvita vaaleampia tai tummempia muunnelmia perusväristä HSL-mallin avulla. Automaattiset saavutettavuustyökalut muuntavat värejä laskeakseen luminanssin ja kontrastisuhteet. Ulkoasu- tai teemavirheitä selvitettäessä heksaarvon näkeminen RGB- tai HSL-muodossa auttaa tunnistamaan, mikä kanava on virheellinen. Värien muuntamista käytetään myös datan visualisoinnissa, kaaviokirjastoissa ja dynaamisessa käyttöliittymän teemoituksessa.
Usein kysytyt kysymykset
Voinko syöttää 3-merkkisen heksakoodin?
Tämä työkalu odottaa tällä hetkellä 6-merkkistä koodia. Jos käytät 3-merkkistä lyhennettä, kuten F60, muunna se ensin muotoon FF6600.
Mikä on HSL?
HSL tarkoittaa sanoja Hue (sävy), Saturation (kylläisyys) ja Lightness (vaaleus). Se on vaihtoehtoinen tapa kuvata värejä, jota jotkut suunnittelijat pitävät intuitiivisempana kuin RGB-malli.