Основи: RGB та HEX — дві мови одного кольору
Колірний простір sRGB, який використовує більшість сучасних моніторів, будується на адитивній моделі: колір створюється змішуванням трьох променів — червоного, зеленого та синього. Кожен промінь може мати 256 рівнів яскравості — від 0 (повністю вимкнений) до 255 (максимальна яскравість). Ці значення зберігаються у вигляді десяткових чисел (RGB) або у шістнадцятковому коді (HEX).
HEX-код — це компактний запис тих самих трьох чисел у системі числення з основою 16. Кожне десяткове число 0–255 перетворюється на дві шістнадцяткові цифри (00–FF). Наприклад, червоний колір rgb(255, 0, 0) стає #FF0000, чистий білий — rgb(255, 255, 255) → #FFFFFF, чорний — rgb(0, 0, 0) → #000000. Оскільки обидва формати посилаються на той самий набір кольорів sRGB, перетворення між ними є точним і зворотним — жодна інформація про колір не втрачається.
Така властивість робить RGB–HEX-конвертер принципово відмінним від перетворень між різними колірними просторами (наприклад, sRGB → CMYK), де через різницю в гамах неминучі зсуви кольору або обрізання. У межах sRGB перетворення ніколи не потребує наближень чи компромісів.
Як працює конвертер на сторінці
Сторінка очікує на введення трьох десяткових чисел — значень червоного, зеленого та синього. Формат може бути як через кому (79, 70, 229), так і через пробіл (79 70 229), а також комбінований. Щойно користувач вводить числа, конвертер негайно обчислює відповідний HEX-код, оновлює всі інші поля (HSL, HSV, CMYK, LAB, а також візуальний зразок кольору) — жодних кнопок "перетворити" не передбачено.
Вивід HEX завжди починається з решітки (#) і містить шість цифр. Для значень 79, 70, 229 отримуємо #4F46E5. Конвертер не додає альфа-канал (прозорість), тому HEX-рядок складається виключно з трьох пар шістнадцяткових цифр.
Весь розрахунок виконується локально в браузері. Жодне введене значення не передається на сервер — це гарантує конфіденційність даних.
Математика перетворення: від десяткового до шістнадцяткового
Алгоритм перетворення кожного каналу однаковий: поділити десяткове число на 16, узяти цілу частину як першу цифру, а залишок — як другу. Якщо результат менший за 10, використовується відповідна десяткова цифра (0–9); якщо 10 або більше — літера латинського алфавіту (A для 10, B для 11, C для 12, D для 13, E для 14, F для 15).
Приклад: візьмемо три числа 79, 70, 229.
- Канал R = 79: 79 ÷ 16 = 4 (остача 15). Цифра 4 відповідає 4, остача 15 — це F. Отже, шістнадцяткове представлення — 4F.
- Канал G = 70: 70 ÷ 16 = 4 (остача 6). Перша цифра 4, друга 6 → 46.
- Канал B = 229: 229 ÷ 16 = 14 (остача 5). 14 — це E, 5 — 5 → E5.
Об’єднуємо результати: #4F46E5.
Для наочності наведемо таблицю відповідності десяткових чисел та шістнадцяткових цифр:
| Десяткове | Шістнадцяткове |
|---|---|
| 0–9 | 0–9 |
| 10 | A |
| 11 | B |
| 12 | C |
| 13 | D |
| 14 | E |
| 15 | F |
Коли обидві цифри однакові, наприклад, 255 → FF, або 17 → 11, запис залишається двозначним. Конвертер ніколи не скорочує пари в одноцифрові, навіть якщо вони повторюються.
Правила введення та обробка помилок
Поле для RGB приймає три числа, кожне з яких має бути в діапазоні 0-255. Якщо ввести значення за межами цього інтервалу (наприклад, 300, 0, 0) або використати неприпустимий формат тексту, сторінка негайно показує повідомлення:
“Введіть RGB як три числа 0–255, наприклад 79, 70, 229.”
Це саме повідомлення з’являється, якщо введено менше трьох чисел або зайві символи.
Поле HEX-введення, у свою чергу, допускає тризначну скорочену форму (наприклад, #ABC). Конвертер автоматично розгортає її до повного шестизначного запису: #AABBCC. Таким чином, навіть якщо ви звикли до короткого формату, інструмент правильно інтерпретує його як rgb(170, 187, 204). Вихідний же HEX-код завжди залишається шестизначним — конвертер не виводить тризначні скорочення автоматично.
Регістр літер у шістнадцятковому записі (великі чи малі) не впливає на колір — #ff6600 і #FF6600 ідентичні. Сторінка показує результат у верхньому регістрі для кращої читабельності.
Практичне застосування HEX у веб-розробці та дизайні
HEX-коди є основним форматом кольору в CSS. Властивості color, background-color, border-color та інші приймають шістнадцяткові рядки безпосередньо:
button {
background-color: #4F46E5;
color: #FFFFFF;
}
Крім CSS, HEX використовується в файлах SVG, у вбудованих стилях HTML, у деяких форматах зображень (PNG, GIF) та в бібліотеках JavaScript для роботи з кольором. Дизайнери часто отримують кольори з графічних редакторів (Photoshop, GIMP, Figma) у вигляді RGB-трійок і потребують швидкого перетворення для передачі розробникам. Цей конвертер робить такий перехід миттєвим і безпомилковим.
Крім того, сторінка одночасно показує колір у форматах HSL, HSV, CMYK та LAB. Це дає змогу одразу оцінити, як колір виглядатиме в різних колірних моделях, і вибрати оптимальний для конкретного завдання — чи то веб-дизайн, чи підготовка матеріалів до друку.
Особливості та обмеження
Оскільки конвертер працює виключно з моделлю RGB (без альфа-каналу), вихідний HEX-код не містить інформації про прозорість. Якщо потрібен колір із прозорістю, слід використовувати восьмизначний HEX (наприклад, #4F46E580 для 50% прозорості) або формат rgba(). Цей інструмент не виконує такого перетворення вхідного RGB, але поле HEX може прийняти і обробити восьмизначний код, якщо ви введете його вручну.
Усі кольори знаходяться в просторі sRGB. Це означає, що для друкованої продукції (де використовується CMYK) отриманий HEX потребуватиме додаткової конвертації з урахуванням профілю паперу та принтера. На екрані ж результати будуть точними та відтворюваними на будь-якому пристрої, що підтримує sRGB.
Часті запитання
1. Чи можна ввести значення більше 255 або менше 0?
Ні. Конвертор приймає лише числа від 0 до 255. Якщо ви спробуєте ввести, скажімо, 300, з’явиться повідомлення про помилку з прикладом правильного введення.
2. Чи розрізняє конвертер великі та малі літери в HEX-коді?
Ні. Регістр не впливає на колір. Вихідний код може бути виведений у верхньому регістрі для зручності, але #ff6600 і #FF6600 — це один і той самий колір.
3. Чи можна використовувати пробіли замість ком у введенні RGB? Так. Конвертер приймає числа, розділені комами, пробілами або комбінацією обох символів. Головне — щоб було рівно три числа.
4. Чи безпечні мої дані? Так. Усі обчислення виконуються локально у вашому браузері. Жодна інформація не передається на сервер.
5. Чому вихідний HEX має шість цифр, а не три?
Кожен канал RGB має діапазон 0–255, що потребує двох шістнадцяткових цифр (00–FF). Трицифрове скорочення (#ABC) — це лише альтернативний запис, який конвертер автоматично перетворює на повний (#AABBCC). Вихід завжди шестицифровий, оскільки саме він дає точне 8-бітове значення кожного каналу.
6. Чи можна отримати колір із прозорістю (альфа-каналом)?
Базове перетворення RGB → HEX не включає прозорість. Якщо вам потрібен колір із альфа-каналом, використовуйте восьмизначний HEX (наприклад, #4F46E580) або формат rgba(). Конвертер може обробити такий код, якщо ввести його в поле HEX, але вихідне RGB-значення не міститиме альфи.