RGB annab kolm kümnendkanaali vahemikus 0–255. Teisendamine HEX-iks muudab iga kanali kahekohaliseks kuueteistkümnendikult numbriks, nii et kogu värv mahub ühe kompaktse märgisüsteemi sisse, mida iga brauser, disainitööriist ja stiilijuhend toetab.
Kuidas RGB -> HEX teisendamine toimib
- Võta punane kanal ja jaga see 16-ga: jagatis on esimene number, jääk teine.
- Kirjuta numbrid 10–15 tähtedena A–F — 255 saab FF.
- Korda sama rohelise ja sinisega; ühekohalised numbrid täida ette nulliga: 5 saab 05.
- Ühenda kolm paarist ja lisa ette #.
Töötav näide
Täpsus on täiuslik, kui kanalid on täisarvud vahemikus 0–255. Murdarvud, näiteks rgb(79.5, 70, 229), ümardatakse enne lähima täisarvuni, sest HEX ei saa vahepealseid väärtusi esitada.
RGB ja HEX selgitatud
Mis on RGB?
RGB kirjeldab värvi kolme valguskanaliga — red (punane), green (roheline) ja blue (sinine) — igaüks vahemikus 0 kuni 255. See peegeldab, kuidas ekraanid tegelikult töötavad: kõik kanalid 255 annavad valge, kõik 0 annavad musta. RGB on õige valik, kui pead värgiga arvutusi tegema; rgba() lisab selle juurde läbipaistvuse.
- Süntaks:
- rgb(R, G, B)
- Vahemik:
- 0–255 per kanal
- Parim jaoks:
- kood, canvas, läbipaistvus rgba() abil
Mis on HEX?
HEX-kood on kuuetäheline kuuesüsteemne number, mis salvestab värvi punase, rohelise ja sinise kanali ettejuhtiva # abil. Iga kahekohaline paar katab ühe kanali väärtuse 00-st (puudub) kuni FF-ni (täis), andes sama 16,7 miljonit tooni nagu RGB, kuid lühema notatsiooniga. HEX on CSS-i, disainitööriistade ja brändijuhiste vaikimisi vorming.
- Süntaks:
- #RRGGBB
- Vahemik:
- 00–FF per kanal
- Parim jaoks:
- CSS, disaini üleandmine, brändijuhised
RGB -> HEX võrdlustabel
Kõige levinumad CSS-värvid, teisendatud RGB formaadist HEX formaati.
| Värv | 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 |