RGB antaa kolme desimaalikanavaa välillä 0–255. Muuntaminen HEXiksi muuttaa jokaisen kanavan kahden merkin heksadesimaaliarvoksi, jolloin koko väri mahtuu yhteen kompaktiseen tokeniin, jonka jokainen selain, suunnittelutyökalu ja tyyliohje ymmärtää.
Kuinka RGB→HEX muunnos toimii
- Ota punainen kanava ja jaa se 16:lla; jakojäännöksen osamäärä on ensimmäinen numero ja jäämä on toinen.
- Kirjoita numerot 10–15 kirjaimina A–F — 255 muuttuu FF:ksi.
- Toista vihreälle ja siniselle, täydennä yksittäiset numerot etunollalla: 5 muuttuu 05:ksi.
- Yhdistä kolme paria ja lisää eteen #.
Esimerkkilaskelma
Tarkka niin kauan kuin kanavat ovat kokonaislukuja 0–255. Desimaalit kuten rgb(79.5, 70, 229) pyöristetään ensin lähimpään kokonaislukuun, koska HEX ei voi säilyttää välejä.
RGB ja HEX selitettynä
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
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
RGB → HEX viitetaulukko
Yleisimmät CSS-värit, muunnettu muodosta RGB muotoon HEX.
| Väri | RGB | HEX |
|---|---|---|
| black | rgb(0, 0, 0) | #000000 |
| white | rgb(255, 255, 255) | #FFFFFF |
| red | rgb(255, 0, 0) | #FF0000 |
| lime | rgb(0, 255, 0) | #00FF00 |
| blue | rgb(0, 0, 255) | #0000FF |
| yellow | rgb(255, 255, 0) | #FFFF00 |
| orange | rgb(255, 165, 0) | #FFA500 |
| teal | rgb(0, 128, 128) | #008080 |
| purple | rgb(128, 0, 128) | #800080 |
| gray | rgb(128, 128, 128) | #808080 |