HEX-код упаковує три 8-бітні числа в шість шістнадцяткових цифр. Конвертація HEX у RGB означає розбити ці цифри на пари та прочитати кожну пару як десяткове число від 0 до 255 — саме ті значення, які очікують CSS, Figma і графічні редактори.
Як працює конвертація HEX у RGB
- Прибери провідний # і, якщо код має тільки три цифри, подвоюй кожну: #f53 стає #ff5533.
- Розділи шість цифр на три пари — RR, GG і BB.
- Прочитай кожну пару як число в основі 16 і перетвори на основу 10: FF стає 255, 57 стає 87, 33 стає 51.
- Запиши три результати як rgb(R, G, B).
Приклад роботи
Це перетворення точне. HEX і RGB описують одні й ті самі sRGB-значення в різній нотації, тож нічого не округлюється і нічого не втрачається в обидві сторони.
HEX і RGB пояснено
Що таке HEX?
HEX-код — шестизначне шістнадцяткове число, яке зберігає канали червоного, зеленого й синього після провідного #. Кожна пара цифр відповідає одному каналу від 00 (немає) до FF (повна), що дає ті самі ≈16,7 мільйона кольорів, що й RGB, але в коротшій формі. HEX — стандарт у CSS, інструментах дизайну та брендгайдах.
- Синтаксис:
- #RRGGBB
- Діапазон:
- 00–FF для кожного каналу
- Краще підходить для:
- CSS, передача дизайну, брендгайди
Що таке RGB?
RGB описує колір трьома каналами світла — червоний, зелений і синій — кожен від 0 до 255. Це відображає, як працюють екрани: усі три на 255 дають білий, всі на 0 — чорний. RGB підходить, коли треба рахувати з кольором (анімація одного каналу, змішування в коді), а rgba() додає прозорість.
- Синтаксис:
- rgb(R, G, B)
- Діапазон:
- 0–255 для кожного каналу
- Краще підходить для:
- код, canvas, прозорість з rgba()
Таблиця відповідностей HEX → RGB
Найпоширеніші CSS-кольори, конвертовані з HEX у RGB.
| Колір | 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) |