Az RGB három tizes csatornát ad 0 és 255 között. HEX-re konvertáláskor minden csatornát kétjegyű hexadecimálissá alakítasz, így az egész szín egy tömör tokenbe fér, amit minden böngésző, design eszköz és stílusútmutató felismer.
Hogyan működik a RGB → HEX átalakítás
- Vedd a vörös csatornát és oszd el 16-tal: az egész hányados lesz az első számjegy, a maradék a második.
- A 10–15 számjegyeket írd le A–F betűkkel — az 255 így lesz FF.
- Ismételd meg a zölddel és a kékkel, egyjegyű értékeket egészíts elő nullával: az 5 például 05 lesz.
- Fűzd össze a három párt és tegyél elé egy # jelet.
Példa a gyakorlatban
Pontos, ha a csatornák egész számok 0 és 255 között. Tört értékeket, például rgb(79.5, 70, 229), először a legközelebbi egészre kerekítjük, mert a HEX nem tud tárolni köztes értékeket.
RGB és HEX magyarázata
Mi az a RGB?
Az RGB egy színt három fénysávként ír le — vörös, zöld és kék — mindegyik 0–255 között. Ez tükrözi, hogyan működnek a képernyők: mindhárom 255-nél fehér, mindhárom 0-nál fekete. Az RGB a jó választás, amikor számolni kell a színnel; az rgba() pedig átlátszóságot ad hozzá.
- Szintaxis:
- rgb(R, G, B)
- Tartomány:
- 0–255 csatornánként
- Legjobb erre:
- kód, canvas, átlátszóság rgba()-vel
Mi az a HEX?
A HEX kód egy hat számjegyű hexadecimális szám, amely a szín vörös, zöld és kék csatornáját tárolja egy vezető # mögött. Minden kétjegyű pár egy csatornát fed le 00-tól (nincs) FF-ig (teljes), így ugyanazt a 16,7 millió színt adja, mint az RGB, jóval tömörebb jelölésben. A HEX alapértelmezett a CSS-ben, design eszközökben és márkaelvekben.
- Szintaxis:
- #RRGGBB
- Tartomány:
- 00–FF csatornánként
- Legjobb erre:
- CSS, design átadás, márkaelvek
RGB → HEX referencia táblázat
A leggyakoribb CSS-színek, átalakítva RGB-ról HEX-ra.
| Szín | 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 |