Miksi RGB–hex-muunnos on täydellinen ja käänteinen
Tämä sivu muuntaa RGB-arvot (kolme desimaalilukua väliltä 0–255) suoraan heksadesimaalivärikoodiksi. Muunnos on häviötön, koska molemmat formaatit käyttävät samaa sRGB-väriavaruutta, joka on nykynäyttöjen vakio. Kun annat esimerkiksi punaisen 79, vihreän 70 ja sinisen 229, saat tulokseksi #4F46E5. Mikään tieto ei katoa – voit aina palata alkuperäisiin desimaaliarvoihin kääntämällä heksadesimaalit takaisin.
Tämän työkalun erottaa muista se, että siinä ei ole erillistä ”muunna”-painiketta. Muokkaat mitä tahansa värikenttää – RGB, HSL, HSV, CMYK, LAB, suora värinvalitsin – ja kaikki muut päivittyvät samalla hetkellä. Käyttäjä ei koskaan joudu odottamaan tai klikkaamaan; väri on aina ajan tasalla. Lisäksi heksatuloste on aina kuusinumeroinen (esim. #4F46E5), eikä työkalu automaattisesti lyhennä sitä kolminumeroiseksi shorthardiksi, vaikka syötekenttä hyväksyykin lyhennysmuodot kuten #abc.
Miten työkalu käsittelee syötteet ja tulosteet
RGB-syöte kirjoitetaan kolmena numerona, jotka erotetaan pilkulla tai välilyönnillä – tai molemmilla. Esimerkiksi 79, 70, 229 ja 79 70 229 toimivat samalla tavalla. Työkalu odottaa, että jokainen luku on kokonaisluku välillä 0–255. Jos syötät arvon kuten 300 tai -5, ruudulle ilmestyy selkeä virheilmoitus: ”Enter RGB as three numbers 0–255, like 79, 70, 229.” Huomaa, että virheviesti on englanniksi – tämä on tarkoituksellista, koska työkalun kieli on englanti, mutta muunnoslogiikka on sama kaikilla kielillä.
Heksatuloste alkaa aina #-merkillä ja sisältää kuusi heksadesimaalimerkkiä (0–9 ja A–F). Jokainen RGB-kanava (0–255) muunnetaan kahdeksi heksaluvuksi. Esimerkiksi 255 = FF, 0 = 00, 128 = 80. Jos syötät RGB-arvot 0, 0, 0, saat #000000. Jos syötät 255, 255, 255, saat #FFFFFF. Työkalu ei lisää alpha-kanavaa (kahdeksas heksinumero), koska RGB-syöte ei sisällä läpinäkyvyyttä. Jos tarvitset alphaa, voit käyttää HSL- tai värinvalitsinosiota, jotka tukevat neljättä arvoa.
Toinen tärkeä yksityiskohta: heksasyötekenttä hyväksyy myös kolminumeroisen shorthand-muodon, kuten #abc. Tällöin työkalu laajentaa sen automaattisesti kuusinumeroiseksi (#aabbcc) ennen laskentaa. Tämä on yleinen käytäntö CSS:ssä, mutta muunnoslogiikka on täsmälleen sama.
Värimallien taustaa: additiivinen RGB ja heksadesimaali
RGB (Red, Green, Blue) on additiivinen värimalli, jossa värit syntyvät yhdistämällä valoa. Jokainen kanava edustaa yhden perusvärin intensiteettiä. Arvo 0 tarkoittaa, että kyseinen väri on kokonaan pois päältä (musta), ja 255 tarkoittaa täyttä intensiteettiä (valkoinen, kun kaikki kolme ovat 255). Asteikko 0–255 syntyy siitä, että tietokoneet käyttävät 8 bittiä per kanava, ja 8 bitillä voidaan esittää 256 eri arvoa (2^8 = 256).
Heksadesimaalijärjestelmä perustuu lukuihin 16. Jokainen desimaaliluku 0–255 voidaan jakaa kahdeksi heksaluvuksi: ensimmäinen luku saadaan jakamalla desimaali 16:lla (kokonaisosa), ja toinen on jakojäännös. Esimerkiksi 79 ÷ 16 = 4, jää 15. Heksaluvuissa 15 on F, joten 79 muuttuu muotoon 4F. Vastaavasti 70 ÷ 16 = 4, jää 6 → 46. 229 ÷ 16 = 14, jää 5 → E5. Yhdistämällä saadaan #4F46E5.
Tämä muunnos on täysin käänteinen: jos sinulla on heksakoodi #1E90FF, voit purkaa sen laskemalla 1E (1×16 + 14 = 30), 90 (9×16 + 0 = 144), FF (15×16 + 15 = 255) → RGB(30, 144, 255). Työkalu tekee tämän automaattisesti.
sRGB-väriavaruus on standardi, jota käyttävät lähes kaikki näytöt, selaimet ja digitaalikamerat. Koska RGB ja heksa käyttävät samaa avaruutta, niiden välillä ei tapahdu värien typistämistä tai likiarvoistamista. Poikkeuksia syntyy vasta, kun muunnetaan esimerkiksi CMYK- tai Lab-väriavaruuteen, joilla on eri värialue (gamut). Tässä työkalussa CMYK ja LAB -kentät näyttävät likiarvoja, mutta RGB–hex-muunnos on eksakti.
Käytännön virheet ja reunatapaukset
Yleisin virhe on syöttää yksi luku kolmen sijaan – esimerkiksi 128 eikä 128, 128, 128. Tällöin työkalu antaa virheilmoituksen, koska se odottaa kolmea numeroa. Jos syötät liian pitkän merkkijonon (esim. 79, 70, 229, 100), se hylätään samalla tavalla. Työkalu ei myöskään hyväksy desimaalilukuja, kuten 79.5, koska RGB-kanavat ovat kokonaislukuja.
Toinen usein esiintyvä ongelma on heksakoodin väärä muoto. Jos kirjoitat #4F46E (vain viisi merkkiä), työkalu näyttää virheen, koska kuusinumeroista koodia odotetaan. Kolminumeroinen shorthand sen sijaan hyväksytään ja laajennetaan automaattisesti.
Kaikki käsittely tapahtuu selaimessa – mitään syötteitä ei lähetetä palvelimelle. Tämä tarkoittaa, että työkalu toimii myös offline-tilassa, kun sivu on ladattu. Yksityisyys on taattu: värisi eivät koskaan poistu koneeltasi.
Kenelle työkalu on tarkoitettu
- Front-end-kehittäjät kirjoittavat CSS:ää tai inline-tyylejä, jotka vaativat heksadesimaalivärikoodin. Kun suunnittelija antaa RGB-arvot (esim. Photoshopista), kehittäjä voi nopeasti muuntaa ne heksaksi.
- UI/UX-suunnittelijat saavat värispesifikaatioita RGB-tripletteinä ja tarvitsevat heksakoodit design handoff -työkaluihin, kuten Figmaan tai Sketchiin.
- Graafiset suunnittelijat haluavat varmistaa, että RGB-prototyypin väri vastaa lopullista CSS-toteutusta. Heksakoodi on yleinen vaihtoformaatti.
- Opiskelijat ja harrastajat oppivat digitaalisen värin teoriaa. RGB–hex-muunnos on ensimmäinen askel ymmärtää, miten värejä esitetään tietokoneissa.
- Värinvalitsimen käyttäjät (esim. Chromen devtools) saavat usein RGB-arvot. Tämä työkalu antaa heksakoodin suoraan kopioitavaksi.
Heksadesimaalikoodin käyttö CSS:ssä ja suunnittelussa
CSS:ssä heksadesimaaliväriä käytetään yleisimmin ominaisuuksissa color, background-color, border-color ja box-shadow. Esimerkki:
.oma-elementti {
color: #4F46E5;
background-color: #1E90FF;
}
Heksakoodi on tarkka eikä vaadi yksiköitä. Voit käyttää myös kolminumeroista shorthandia, kun molemmat numerot kussakin parissa ovat samat (esim. #aabbcc → #abc). Työkalu ei automaattisesti lyhennä, mutta syöttökenttä hyväksyy sen.
Jos tarvitset läpinäkyvyyttä, CSS tukee kahdeksannumeroista heksaa (esim. #4F46E580), jossa kaksi viimeistä numeroa edustavat alpha-kanavaa (00 = täysin läpinäkyvä, FF = täysin peittävä). Tämä työkalu ei tuota kahdeksannumeroista heksaa suoraan, koska RGB-syöte ei sisällä alpha-tietoa. Voit kuitenkin lisätä alpha-arvon manuaalisesti heksakoodin perään, jos tiedät tarvittavan arvon.
Muista, että heksakoodi ja RGB edustavat samaa sRGB-väriavaruutta, joten ne ovat vaihtokelpoisia kaikissa nykyselaimissa. Vanhemmissa selaimissa saattaa olla eroja, mutta ne ovat harvinaisia.
Usein kysytyt kysymykset (FAQ)
Miksi saan virheilmoituksen, vaikka kirjoitan kolme numeroa?
Tarkista, että käytät pilkkua tai välilyöntiä erottimena. Esimerkiksi 79,70,229 ilman välilyöntiä toimii, mutta 79 70 229 on myös kelvollinen. Älä käytä pistettä tai muita merkkejä. Jos numerot ovat kokonaislukuja eivätkä sisällä desimaaleja, virheen syy on todennäköisesti liian suuri tai pieni arvo.
Voinko kopioida heksakoodin suoraan työkalusta?
Kyllä – heksakoodi näkyy omassa kentässään, ja voit valita sen hiirellä ja kopioida (Ctrl+C). Jos haluat kopioida koko koodin #-merkkeineen, valitse kenttä kokonaan.
Miksi heksakoodi on aina kuusinumeroinen, vaikka syötän esimerkiksi #fff?
Työkalu laajentaa shorthand-muodon automaattisesti: #fff → #ffffff. Tämä on CSS:n määrittelemä käytäntö. Näyttöön tulee aina täysi kuusinumeroinen koodi, jotta voit olla varma tarkkuudesta.
Muuttuuko väri, jos vaihdan toiseen väriavaruuteen (CMYK, LAB)? RGB–hex-muunnos on eksakti, mutta CMYK ja LAB ovat eri väriavaruuksia. Kun muokkaat CMYK-kenttää, työkalu laskee RGB-arvot, jotka voivat olla likiarvoja. Värisi saattaa näyttää erilaiselta painettuna kuin näytöllä.
Voinko käyttää työkalua offline-tilassa? Kyllä, kun sivu on kerran ladattu, kaikki käsittely tapahtuu selaimessasi. JavaScript toimii ilman verkkoyhteyttä.
Miten saan kahdeksannumeroisen heksakoodin alpha-arvolla?
Työkalu ei tuota alpha-kanavaa automaattisesti. Jos tiedät tarvitsemasi alpha-arvon (0–255), voit lisätä sen itse: esim. #4F46E5 + 80 → #4F46E580. CSS tulkitsee kaksi viimeistä merkkiä alpha-kanavaksi.