Egy HEX kód három 8 bites számot sűrít hat hexadecimális számjegybe. A HEX-et RGB-vé konvertálni annyit jelent, hogy a számjegyeket párokra bontjuk és minden párt tizes számrendszerben olvasunk 0 és 255 között — pontosan az értékeket, amiket a CSS, a Figma és a képszerkesztők elvárnak.
Hogyan működik a HEX → RGB átalakítás
- Vesd el a vezető # jelet, és ha a kód csak három számjegyből áll, duplázd meg mindegyiket: #f53 lesz #ff5533.
- Oszd fel a hat számjegyet három párra — RR, GG és BB.
- Olvasd minden párt 16-os alapú számként és alakítsd át 10-esbe: FF lesz 255, 57 lesz 87, 33 lesz 51.
- Írd le a három eredményt rgb(R, G, B) formátumban.
Példa a gyakorlatban
Ez az átváltás pontos. A HEX és az RGB ugyanazokat az sRGB értékeket írja le más jelölésben, így egyik irányban sem vesznek el vagy kerekítenek el adatokat.
HEX és RGB magyarázata
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
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
HEX → RGB referencia táblázat
A leggyakoribb CSS-színek, átalakítva HEX-ról RGB-ra.
| Szín | 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) |