RGB дає три десяткові канали від 0 до 255. Конвертація в HEX переводить кожен канал у двозначне шістнадцяткове число, тож увесь колір вміщується в один компактний токен, який розуміє будь-який браузер, інструмент дизайну чи стильгайд.
Як працює конвертація RGB у HEX
- Візьми червоний канал і поділи його на 16: частка — перша цифра, остача — друга.
- Запиши цифри 10–15 як літери A–F — 255 стає FF.
- Повтори для зеленого та синього, доповнюючи одноцифрові значення провідним нулем: 5 стає 05.
- З’єднай три пари та постав # спереду.
Приклад роботи
Точно, доки канали — цілі числа від 0 до 255. Дробові значення, наприклад rgb(79.5, 70, 229), спочатку округлюють до найближчого цілого, бо HEX не може зберігати проміжні значення.
RGB і HEX пояснено
Що таке RGB?
RGB описує колір трьома каналами світла — червоний, зелений і синій — кожен від 0 до 255. Це відображає, як працюють екрани: усі три на 255 дають білий, всі на 0 — чорний. RGB підходить, коли треба рахувати з кольором (анімація одного каналу, змішування в коді), а rgba() додає прозорість.
- Синтаксис:
- rgb(R, G, B)
- Діапазон:
- 0–255 для кожного каналу
- Краще підходить для:
- код, canvas, прозорість з rgba()
Що таке HEX?
HEX-код — шестизначне шістнадцяткове число, яке зберігає канали червоного, зеленого й синього після провідного #. Кожна пара цифр відповідає одному каналу від 00 (немає) до FF (повна), що дає ті самі ≈16,7 мільйона кольорів, що й RGB, але в коротшій формі. HEX — стандарт у CSS, інструментах дизайну та брендгайдах.
- Синтаксис:
- #RRGGBB
- Діапазон:
- 00–FF для кожного каналу
- Краще підходить для:
- CSS, передача дизайну, брендгайди
Таблиця відповідностей RGB → HEX
Найпоширеніші CSS-кольори, конвертовані з RGB у HEX.
| Колір | 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 |