RGB ti daje tri decimalna kanala između 0 i 255. Pretvorba u HEX svodi svaki kanal na dvoznamenkasti heksadecimalni broj, pa cijela boja stane u jedan kompaktni token koji svaki preglednik, alat za dizajn i vodič za stilove razumiju.
Kako funkcionira pretvorba RGB u HEX
- Uzmite crveni kanal i podijelite ga s 16: količnik je prva znamenka, ostatak je druga.
- Napišite znamenke od 10 do 15 kao slova A do F — 255 postaje FF.
- Ponovite za zelenu i plavu komponentu, popunjavajući jednomanji broj vodećom nulom: 5 postaje 05.
- Spojite tri para i stavite # ispred.
Primjer
Točno, pod uvjetom da su kanali cijeli brojevi od 0 do 255. Decimalne vrijednosti poput rgb(79.5, 70, 229) prvo se zaokružuju na najbliži cijeli broj, jer HEX ne može pohraniti vrijednosti između.
RGB i HEX objašnjeno
Što je RGB?
RGB opisuje boju kao tri kanala svjetla — crveni, zeleni i plavi — svaki od 0 do 255. Oponaša način na koji zasloni zapravo rade: sva tri na 255 daju bijelu, sva tri na 0 daju crnu. RGB je pravi izbor kad trebaš računati s bojom, a rgba() dodaje prozirnost.
- Sintaksa:
- rgb(R, G, B)
- Raspon:
- 0–255 po kanalu
- Najbolje za:
- kod, canvas, prozirnost s rgba()
Što je HEX?
HEX kod je šesteroznamenkasti heksadecimalni broj koji pohranjuje kanale crvene, zelene i plave boje iza vodećeg #. Svaki par znamenki predstavlja jedan kanal, od 00 (nijedan) do FF (puno), što daje istih 16,7 milijuna boja kao RGB u znatno kraćem zapisu. HEX je zadano u CSS-u, alatima za dizajn i smjernicama brenda.
- Sintaksa:
- #RRGGBB
- Raspon:
- 00–FF po kanalu
- Najbolje za:
- CSS, predaja dizajna, smjernice brenda
Referentna tablica RGB u HEX
Najčešće CSS boje, pretvorene iz RGB u HEX.
| Boja | 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 |