HEX-kood pakib kolm 8-bitist numbrit kuueks kuueteistkümnendikuks numbriks. HEX-i teisendamine RGB-ks tähendab nende numbrite jagamist paarideks ja iga paari lugemist kümnendkujul 0–255 — täpselt need väärtused, mida CSS, Figma ja pilditöötlus ootavad.
Kuidas HEX -> RGB teisendamine toimib
- Eemalda juhtiv # ja kui kood on kolmetähteline, korda iga täht: #f53 muutub #ff5533-ks.
- Jaga kuus numbrit kolmeks paariks — RR, GG ja BB.
- Loe iga paari kui aluse-16 arvu ja teisenda see aluse-10-ks: FF muutub 255-ks, 57 muutub 87-ks, 33 muutub 51-ks.
- Kirjuta kolm tulemust vormingus rgb(R, G, B).
Töötav näide
See teisendus on täpne. HEX ja RGB kirjeldavad samu sRGB väärtusi eri notatsioonis, nii et suunast ei kaotsi ega ümarda midagi.
HEX ja RGB selgitatud
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
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
HEX -> RGB võrdlustabel
Kõige levinumad CSS-värvid, teisendatud HEX formaadist RGB formaati.
| Värv | 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) |