HEX–RGB-värimuunnin

Miksi HEX muunnetaan RGB:ksi?

HEX-värikoodi, kuten #4f46e5, on lyhyt tapa esittää sama tieto, jonka RGB-arvo kertoo kolmella luvulla: 79, 70, 229. Nämä luvut ovat väliltä 0–255, ja ne vastaavat tarkalleen punaisen, vihreän ja sinisen kirkkautta näytöllä. Tällä sivulla tehdään juuri tämä matemaattinen muunnos: kuusinumeroinen heksadesimaaliluku (kantaluku 16) muunnetaan kolmeksi desimaaliluvuksi (kantaluku 10). Muunnos on täsmällinen ja palautuva – mikään pyöristys tai väriavaruuden rajaus ei muuta lopputulosta. Siksi sivu näyttää heti oikeat RGB-arvot, joita voit käyttää suoraan koodissa, suunnitteluohjelmassa tai värimatematiikassa.

Tämä sivu on nimenomaan HEX–RGB-muunnin. Se ei käsittele kahdeksannumeroisia HEX-koodeja, jotka sisältävät alfakanavan (läpinäkyvyys). Se odottaa joko kuusi- tai kolminumeroista syötettä, ja kolminumeroinen laajennetaan automaattisesti kuusinumeroiseksi jokainen merkki tuplaten – esimerkiksi #abc muuttuu #aabbcc:ksi ennen laskentaa. Jos syöte ei vastaa odotettua muotoa, sivu näyttää virheilmoituksen: ”Enter a hex color like #4f46e5 or #abc.”

Kaikki laskenta tapahtuu selaimessasi – mitään tietoa ei lähetetä palvelimelle. Voit syöttää värikoodin joko kirjoittamalla, liittämällä leikepöydältä tai käyttämällä sisäänrakennettua väripoimijaa. Muut värimuodot (HSL, HSV, CMYK, LAB) päivittyvät samanaikaisesti, joten näet kerralla kaikki kollegasi käyttämät esitystavat.

Miten HEX–RGB-muunnos toimii?

HEX-koodi koostuu kolmesta kanavaparista: punainen, vihreä, sininen. Jokainen pari on heksadesimaaliluku väliltä 00–FF (desimaalilukuina 0–255). Muunnos tapahtuu kertomalla etumerkkiä vastaava numero 16:lla ja lisäämällä jälkimmäinen numero. Esimerkiksi #4f46e5:

• Punainen: 4f → 4 × 16 + 15 = 64 + 15 = 79
• Vihreä: 46 → 4 × 16 + 6 = 64 + 6 = 70
• Sininen: e5 → 14 × 16 + 5 = 224 + 5 = 229

Tuloksena RGB(79, 70, 229). Tarkalleen sama luku toistuu aina, koska heksadesimaalijärjestelmä on yksiselitteinen. Kolminumeroinen lyhenne, kuten #abc, tulkitaan siten, että a, b ja c tuplataan: #aabbcc. Siten #abc muuttuu punaiseksi aa (170), vihreäksi bb (187) ja siniseksi cc (204).

Tämä laskenta on tarkka ja palautuva: jos muunnat RGB(79,70,229) takaisin HEX-muotoon, saat #4f46e5. Koska kukin kanava käyttää 8 bittiä (256 mahdollista arvoa), HEX-koodin kaksi heksadesimaalimerkkiä riittävät kattamaan koko alueen.

Sivun ominaisuudet ja syötteet

Kun muokkaat mitä tahansa värikenttää (HEX, RGB, HSL jne.), kaikki muut kentät päivittyvät reaaliajassa. Tämä on hyödyllistä, kun haluat esimerkiksi säätää värisävyä HSL-arvon avulla ja nähdä samalla HEX- ja RGB-vastineet.

HEX- ja RGB-värien suhde additiiviseen malliin

Näytöt tuottavat värejä lisäämällä valoa: punainen, vihreä ja sininen. Kun kaikki kolme kanavaa ovat arvossa 255, saadaan valkoinen; kun ne ovat 0, saadaan musta. HEX-koodi on vain tiiviimpi tapa kirjoittaa nämä kolme lukua. Esimerkiksi:

• Punainen: #FF0000 → RGB(255, 0, 0)
• Vihreä: #00FF00 → RGB(0, 255, 0)
• Sininen: #0000FF → RGB(0, 0, 255)
• Valkoinen: #FFFFFF → RGB(255, 255, 255)
• Musta: #000000 → RGB(0, 0, 0)
• Harmaa: #808080 → RGB(128, 128, 128) (jokainen kanava sama)

Koska kukin kanava on 8-bittinen, HEX-koodin kaksi merkkiä kattavat 16^2 = 256 mahdollista arvoa. Yhteensä HEKin 16^6 = 16 777 216 mahdollista väriä vastaavat tarkalleen samaa määrää RGB-kombinaatioita.

Miksi HEX on yleistynyt webissä? Se on kompakti: kuusi merkkiä riittää kirjoittamaan yli 16 miljoonaa väriä, eikä tarvita pilkkuja eikä välilyöntejä. CSS:ssä voit käyttää molempia: color: #ff6600 tai color: rgb(255,102,0). Selain tulkitsee ne samaksi väriksi, mutta RGB on joskus kätevämpi, jos haluat käsitellä kanavia ohjelmallisesti (esim. JavaScriptin canvas-API:ssa).

Käytännön esimerkkejä ja virheiden välttäminen

Kun saat suunnittelijalta värikoodin #1E90FF, alatko laskea päässä? Ei tarvitse – tämä sivu tekee sen puolestasi. Syötä #1E90FF, ja saat RGB(30, 144, 255). Tämä on perinteinen ”dodger blue”. Toisaalta jos saat HEX-koodin muodossa #abc (kolminumeroinen), sivu laajentaa sen #aabbcc:ksi, jolloin tuloste on RGB(170, 187, 204) – vaalean siniharmaa.

Yleisiä virheitä, joita työkalu auttaa välttämään:

1. Unohdettu #-merkki – Syöte 4f46e5 toimii aivan yhtä hyvin kuin #4f46e5.
2. Väärä pituus – Neljä tai viisi merkkiä ei ole kelvollinen HEX-koodi. Sivu näyttää virheilmoituksen.
3. Alfakanava – Kahdeksanmerkkinen koodi (esim. #4f46e580) käsitellään virheellisenä, koska tämä työkalu on tarkoitettu vain ilman läpinäkyvyyttä.
4. Kirjoitusvirheet – Kirjaimet g–z eivät ole heksadesimaalijärjestelmässä. Sivu ilmoittaa virheestä.

Työkalu auttaa myös, kun haluat tarkistaa RGB-arvojen oikeellisuuden ennen niiden käyttöä esimerkiksi canvas-piirroksessa, jossa väri annetaan fillStyle = 'rgb(79,70,229)' -muodossa. Tarkkuus on tässä tärkeää: pyöristysvirhettä ei tapahdu, koska muunnos on deterministinen.

Kuka tätä työkalua tarvitsee?

Front-end-kehittäjät käyttävät HEX-koodeja CSS:ssä päivittäin, mutta JavaScriptin canvas-API tai WebGL vaativat usein RGB-arvot erillisinä numeroina. Myös inline-tyylit style.color = 'rgb(...)' saattavat olla helpompia muodostaa, kun kanavat ovat desimaaleina.

Graafiset suunnittelijat saavat brändiohjeistukset usein HEX-koodeina. Kun he siirtävät värit Photoshopiin, Sketchiin tai Figmaan, ohjelmat odottavat usein RGB-syötettä (0–255). Tämä sivu nopeuttaa työtä: kopioi HEX, liitä työkaluun, kopioi RGB.

Digitaaliset artistit ja pelinkehittäjät käsittelevät värejä matemaattisesti. Esimerkiksi värin vaalentaminen tarkoittaa käytännössä RGB-kanavien skaalausta. Jos sinulla on HEX-koodi, sinun on ensin muunnettava se numeroiksi. Tämä sivu tekee sen välittömästi.

Opiskelijat ja aloittelijat oppivat väriteoriaa. He näkevät, miten #FF0000 (punainen) on itse asiassa RGB(255,0,0) ja miksi valkoinen on #FFFFFF. Muunnos auttaa ymmärtämään additiivisen värimallin perusteet.

Esteettömyyden parissa työskentelevät tarvitsevat kontrastilaskelmia, joissa RGB-arvoista johdetaan luminanssi (suhteellinen kirkkaus) WCAG-ohjeiden mukaisesti. HEX-muunnoksen jälkeen saat tarkat kanava-arvot, joilla voit laskea kontrastisuhteen.

Usein kysytyt kysymykset

Miksi kolminumeroinen HEX-koodi laajennetaan tuplaamalla merkit?
CSS-määrittelyssä kolminumeroinen koodi on lyhenne, jossa jokainen merkki esittää samaa numeroa kahdesti. Esimerkiksi #abc on sama kuin #aabbcc. Tämä on standardi, joka vähentää kirjoitustyötä, mutta vähentää värien määrää (4096 väriä 16,7 miljoonan sijaan). Sivumme noudattaa samaa sääntöä.

Voiko sivu käsitellä kahdeksannumeroisia HEX-koodeja (kuten #RRGGBBAA)?
Ei. Tämä sivu on tarkoitettu vain kuusi- ja kolminumeroisille koodeille. Jos syötät kahdeksanmerkkinen koodin, saat virheilmoituksen. Alfakanavaa käsittelevälle muunnokselle on oma työkalunsa.

Mitä tapahtuu, jos syötän arvon #GGG?
G ei ole heksadesimaalimerkki (vain 0–9 ja A–F). Sivu ilmoittaa virheestä: ”Enter a hex color like #4f46e5 or #abc.”

Miksi RGB-arvot ovat aina kokonaislukuja 0–255?
Koska HEX on 8-bittinen kanavakohtainen esitys, jossa kukin kanava voi saada 256 eri arvoa. Heksadesimaalimuunnos antaa aina tarkan kokonaisluvun, koska kantaluku 16 on jaollinen kantalukua 10 olevalla desimaalijärjestelmällä ilman jäännöstä.

Voinko käyttää työkalua ilman internetyhteyttä?
Kyllä, kun sivu on ladattu, kaikki laskenta tapahtuu selaimesi JavaScriptillä. Sivu ei lähetä tietoja palvelimelle, joten se toimii offline-tilassa, jos selain sallii.

Miten saan muunnoksesta HEX->RGB lisäksi HSL-arvot?
Sivu päivittää automaattisesti kaikki värimuodot (HSL, HSV, CMYK, LAB) syötteen muuttuessa. Näet ne samalla näkymällä, ja voit kopioida haluamasi esitysmuodon.