HEX-koodi pakkaa kolme 8-bittistä numeroa kuuteen heksadesimaaliseen merkkiin. HEXin muuntaminen RGBksi tarkoittaa näiden merkkien jakamista pareiksi ja kunkin parin lukemista desimaalinumerona välillä 0–255 — juuri niitä arvoja, joita CSS, Figma ja kuvankäsittelyohjelmat odottavat.
Kuinka HEX→RGB muunnos toimii
- Poista johtava # ja jos koodi on vain kolmellä numerolla, kaksoista jokainen: #f53 muuttuu #ff5533.
- Jaa kuusi merkkiä kolmeen pariin — RR, GG ja BB.
- Lue kukin pari perus-16 numerona ja muunna perus-10:ksi: FF muuttuu 255:ksi, 57 muuttuu 87:ksi, 33 muuttuu 51:ksi.
- Kirjoita kolme tulosta muodossa rgb(R, G, B).
Esimerkkilaskelma
Tämä muunnos on tarkka. HEX ja RGB kuvaavat samoja sRGB-arvoja eri notaatiolla, joten mitään ei pyöristetä tai menetetä kumpaankaan suuntaan.
HEX ja RGB selitettynä
Mikä on HEX?
HEX-koodi on kuusinumeroinen heksadesimaali, joka tallentaa värin punaisen, vihreän ja sinisen kanavan eteen liitetyn # -merkin jälkeen. Kukin kahden merkin pari vastaa yhtä kanavaa, arvot 00 (ei lainkaan) – FF (täysi), mikä antaa saman 16,7 miljoonaa väriä kuin RGB mutta tiiviimmässä muodossa. HEX on oletus CSS:ssä, suunnittelutyökaluissa ja brändiohjeissa.
- Syntaksi:
- #RRGGBB
- Arvoalue:
- 00–FF per kanava
- Parhaiten soveltuu:
- CSS, suunnittelun luovutus, brändiohjeet
Mikä on RGB?
RGB kuvaa väriä kolmella valokanavalla — red, green ja blue — kukin 0–255. Se peilaa sitä, miten näytöt toimivat: kaikki kanavat 255 antavat valkoisen, kaikki 0 mustan. RGB on oikea valinta, kun sinun täytyy laskea väreillä, ja rgba() lisää läpinäkyvyyden päälle.
- Syntaksi:
- rgb(R, G, B)
- Arvoalue:
- 0–255 per kanava
- Parhaiten soveltuu:
- koodi, canvas, läpinäkyvyys rgba():lla
HEX → RGB viitetaulukko
Yleisimmät CSS-värit, muunnettu muodosta HEX muotoon RGB.
| Väri | HEX | RGB |
|---|---|---|
| black | #000000 | rgb(0, 0, 0) |
| white | #FFFFFF | rgb(255, 255, 255) |
| red | #FF0000 | rgb(255, 0, 0) |
| lime | #00FF00 | rgb(0, 255, 0) |
| blue | #0000FF | rgb(0, 0, 255) |
| yellow | #FFFF00 | rgb(255, 255, 0) |
| orange | #FFA500 | rgb(255, 165, 0) |
| teal | #008080 | rgb(0, 128, 128) |
| purple | #800080 | rgb(128, 0, 128) |
| gray | #808080 | rgb(128, 128, 128) |