RGB pateikia tris dešimtinius kanalus nuo 0 iki 255. Konvertuojant į HEX, kiekvienas kanalas virsta dviženkliu šešioliktainiu skaičiumi, todėl visa spalva telpa į vieną kompaktišką žetoną, kurį supranta visi naršyklės, dizaino įrankiai ir stiliaus gairės.
Kaip veikia RGB į HEX konvertavimas
- Paimk raudoną kanalą ir padalink jį iš 16: dalmuo yra pirmoji skaitmeninė reikšmė, liekana — antroji.
- Skaitmenis 10–15 užrašyk raidėmis A–F — 255 tampa FF.
- Pakartok su žalia ir mėlyna, vienaskaitmes reikšmes papildyk pradiniu nuliu: 5 tampa 05.
- Sujunk tris poras ir priekyje pridėk #.
Veikęs pavyzdys
Tikslu, jei kanalai yra sveikieji skaičiai nuo 0 iki 255. Trupmeniniai dydžiai, pavyzdžiui rgb(79.5, 70, 229), pirmiausia suapvalinami iki artimiausio sveikojo skaičiaus, nes HEX negali saugoti tarpinių reikšmių.
RGB ir HEX paaiškinta
Kas yra RGB?
RGB aprašo spalvą kaip tris šviesos kanalus — raudoną, žalią ir mėlyną — kiekvienas nuo 0 iki 255. Tai atspindi, kaip iš tikrųjų veikia ekranai: visi trys 255 reiškia baltą, visi 0 — juodą. RGB tinka, kai reikia skaičiuoti su spalva, o rgba() prideda permatomumą.
- Sintaksė:
- rgb(R, G, B)
- Intervalas:
- 0–255 per kanalą
- Tinka geriausiai:
- kodas, canvas, permatomumas su rgba()
Kas yra HEX?
HEX kodas yra šešiženklis šešioliktainis skaičius, saugantis spalvos raudonos, žalios ir mėlynos kanalus po pradinio #. Kiekviena skaitmenų pora atitinka vieną kanalą nuo 00 (nėra) iki FF (pilnai), todėl tai suteikia tą pačią 16,7 milijono spalvų aprėptį kaip RGB, bet daug trumpesne užrašo forma. HEX yra numatytasis CSS, dizaino įrankių ir prekių ženklo gairių formatas.
- Sintaksė:
- #RRGGBB
- Intervalas:
- 00–FF per kanalą
- Tinka geriausiai:
- CSS, dizaino perdavimas, prekių ženklo gairės
RGB į HEX atnaujinimo lentelė
Dažniausiai sutinkamos CSS spalvos, konvertuotos iš RGB į HEX.
| Spalva | 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 |