RGB dod trīs decimālkanālus no 0 līdz 255. Pārvēršot uz HEX, katru kanālu pārvērš divciparu heksadecimālā skaitlī, tādējādi visa krāsa ietilpst vienā kompaktā tokenā, ko saprot visi pārlūki, dizaina rīki un stila vadlīnijas.
Kā darbojas RGB uz HEX konvertēšana
- Paņem sarkano kanālu un dalīt to ar 16: dalījuma rezultāts ir pirmais cipars, atlikums — otrais.
- Ciparus 10–15 uzraksta kā burtus A–F — 255 kļūst par FF.
- Atkārto arī zaļajam un zilajam kanālam, ja nepieciešams pievieno priekšā nulli vienciparu rezultātiem: 5 kļūst par 05.
- Saliec trīs pārus kopā un priekšā liec #.
Praktisks piemērs
Precīzi, ja vien kanāli ir veseli skaitļi no 0 līdz 255. Daļskaitļi, piemēram rgb(79.5, 70, 229), vispirms tiek noapaļoti līdz tuvākajam veselam, jo HEX nevar glabāt starpposmu vērtības.
RGB un HEX izskaidrojums
Kas ir RGB?
RGB attēlo krāsu kā trīs gaismas kanālus — sarkanu, zaļu un zilu — katrs no 0 līdz 255. Tas atspoguļo, kā ekrāni patiesībā strādā: visi trīs 255 dod baltu, visi 0 dod melnu. RGB ir pareizā izvēle, kad jāveic aprēķini ar krāsu, un rgba() pievieno caurspīdīgumu virsū.
- Sintakse:
- rgb(R, G, B)
- Diapazons:
- 0–255 per channel
- Vislabāk piemērots:
- kods, canvas, caurspīdīgums ar rgba()
Kas ir HEX?
HEX kods ir sešciparu heksadecimāls skaitlis, kas aiz vadības zīmes # glabā krāsas sarkanās, zaļās un zilās kanāla vērtības. Katra ciparu pāris attēlo vienu kanālu no 00 (nav) līdz FF (pilna), kas dod tos pašus 16.7 miljonus krāsu kā RGB, bet īsākā pierakstā. HEX ir noklusējums CSS, dizaina rīkos un zīmola vadlīnijās.
- Sintakse:
- #RRGGBB
- Diapazons:
- 00–FF per channel
- Vislabāk piemērots:
- CSS, dizaina nodošana, zīmola vadlīnijas
RGB uz HEX atsauces tabula
Visizplatītākās CSS krāsas, konvertētas no RGB uz HEX.
| Krāsa | 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 |