Конвертер HEX у RGB

Що таке перетворення HEX у RGB

На цій сторінці ви вводите шістнадцятковий код кольору (наприклад, #4f46e5 або #abc) і миттєво отримуєте відповідні значення RGB — три цілі числа від 0 до 255, які використовуються для відображення кольору на екранах. Результат подається разом з іншими форматами (HSL, HSV, CMYK, LAB), щоб ви могли одразу скопіювати потрібний запис у код або дизайнерське програмне забезпечення.

Відмінність цього інструменту від інших конвертерів кольорів полягає в тому, що він перетворює шістнадцяткове (base‑16) представлення кольору в десяткові (base‑10) канали RGB, які безпосередньо використовуються в математиці змішування кольорів. HEX-коди — це лише компактний спосіб записати ті самі три 8-бітні канали, які RGB виражає числово. Оскільки це спеціалізована сторінка HEX‑to‑RGB, правила тут жорсткі:

• HEX-коди мають шість цифр (#RRGGBB) або три цифри (#RGB) — скорочений запис, де кожна цифра подвоюється, утворюючи повний шестицифровий код.
• Символ # необов’язковий: інструмент приймає коди як з ним, так і без нього.
• Результуючі канали RGB — цілі числа від 0 до 255, альфа-канал не передбачений. Восьмицифрові HEX-коди, що містять альфу, на цій сторінці не обробляються (очікується лише шести- або трицифровий HEX).
• Перетворення суто математичне: кожна пара шістнадцяткових цифр множиться на степені 16, тому результат точний і зворотний — без округлення чи кліпування.

Як працює перетворення — математика шістнадцяткових цифр

Шістнадцяткова система (base‑16) використовує цифри 0–9 та літери A–F (або a–f), де A = 10, B = 11, C = 12, D = 13, E = 14, F = 15. Кожен канал RGB має 256 можливих значень (від 0 до 255), що в шістнадцятковій системі записується двома цифрами: від 00 до FF.

Процес конвертації на прикладі #4f46e5

1. Розбиваємо код на пари: 4f, 46, e5.
2. Перетворюємо першу пару (червоний канал):
   • Перша цифра 4 = 4 × 16¹ = 4 × 16 = 64.
   • Друга цифра f = 15 × 16⁰ = 15 × 1 = 15.
   • Сума: 64 + 15 = 79.
3. Друга пара (зелений):
   • 4 = 4 × 16 = 64.
   • 6 = 6 × 1 = 6.
   • Сума: 64 + 6 = 70.
4. Третя пара (синій):
   • e = 14 × 16 = 224.
   • 5 = 5 × 1 = 5.
   • Сума: 224 + 5 = 229.

Отже, RGB(79, 70, 229). Зворотне перетворення — з RGB у HEX — дає той самий код, оскільки операція є бієктивною.

Скорочений трицифровий запис (#abc)

Якщо ви введете #abc, інструмент автоматично подвоює кожну цифру: a → aa, b → bb, c → cc, отримуючи #aabbcc. Далі конвертація відбувається за звичайним алгоритмом:

• a (10) → 10×16 + 10 = 170.
• b (11) → 11×16 + 11 = 187.
• c (12) → 12×16 + 12 = 204. Результат: RGB(170, 187, 204).

Це корисно для роботи зі старими веб-палітрами або коли код наведено в скороченому вигляді.

Правила та випадки на межі — формат коду HEX

Інструмент суворо перевіряє введений код. Якщо ви введете значення, яке не відповідає очікуваному формату (наприклад, #xyz, 12g, або #12345), на екрані з’явиться повідомлення про помилку:
«Введіть шістнадцятковий колір, наприклад #4f46e5 або #abc».

Текст повідомлення англійською мовою: "Enter a hex color like #4f46e5 or #abc." — він фіксований і не перекладається, оскільки інтерфейс містить багатомовні елементи.

Чому це важливо

• Кількість символів: дозволено лише 3 або 6 шістнадцяткових цифр (з # або без). Коди з 4 або 8 цифрами (наприклад, з альфа-каналом) спричиняють помилку.
• Допустимі символи: лише 0–9, A–F, a–f. Символи поза цим діапазоном (наприклад, G, Z, пробіли) негайно відхиляються.
• Регістр: літери можуть бути як великими, так і малими — алгоритм однаково перетворює #1E90FF і #1e90ff на RGB(30, 144, 255).
• Символ #: якщо ви забули #, інструмент однаково розпізнає код. Наприклад, ff6600 = #ff6600 = RGB(255, 102, 0).

Усі перетворення виконуються безпосередньо у вашому браузері — жодні дані не завантажуються на сервер і не зберігаються. Це гарантує приватність і миттєву відповідь.

HEX і RGB: зв’язок та відмінності у веб-розробці

У CSS ви можете задати колір двома способами:

• color: #ff6600; — шістнадцятковий код (компактний, зручний для копіювання з макетів).
• color: rgb(255, 102, 0); — десяткові канали (читабельніші для людей, зручні для математичних операцій у JavaScript або canvas).

Браузер інтерпретує обидва записи абсолютно однаково — після парсингу вони перетворюються на внутрішнє 32-бітне представлення кольору. Тому вибір між HEX і RGB — питання зручності, а не технічної переваги.

Адитивна модель кольору

RGB — адитивна колірна модель: чим більше значення кожного каналу, тим яскравіший колір. Максимальні значення всіх трьох каналів (255, 255, 255) дають білий, мінімальні (0, 0, 0) — чорний. Шістнадцятковий код #FFFFFF відповідає білому, #000000 — чорному.

Цікавий факт: відтінки сірого мають однакові значення всіх каналів, тому в HEX вони виглядають як однакові пари цифр: #333333, #808080, #CCCCCC. Відповідні RGB: (51, 51, 51), (128, 128, 128), (204, 204, 204).

Для кого цей інструмент — практичні сценарії

Фронтенд-розробники

Часто потрібно передати числові значення RGB у JavaScript для роботи з canvas, анімації або динамічної зміни кольорів. Наприклад, функція getComputedStyle повертає колір у форматі rgb(), а вхідне значення задано HEX. За допомогою цього конвертера ви миттєво отримуєте потрібні числа.

Дизайнери

Коли ви отримуєте брендбук із шістнадцятковими кодами, але працюєте в редакторі, де кольори задаються повзунками RGB (0–255), цей інструмент позбавляє від ручних розрахунків. Наприклад, #4f46e5 одразу перетворюється на RGB(79, 70, 229) — і ви точно встановлюєте потрібний відтінок.

Розробники ігор та цифрові художники

У графічних рушіях (Unity, Unreal) кольори часто задаються як вектори RGB зі значеннями 0–1. HEX-код можна конвертувати, поділивши кожен канал на 255. Наша сторінка показує цілі числа, але ви легко перетворите їх далі в десяткові дроби.

Студенти та допитливі користувачі

Якщо ви вивчаєте, як шістнадцяткова система пов’язана з кольорами моніторів, цей інструмент дає змогу експериментувати: змінюйте HEX — і спостерігайте, як змінюються числові канали RGB. Це наочна демонстрація адитивної моделі.

Таблиця відповідностей для швидкого посилання

Часті запитання

Чому при введенні #abc я отримую інші RGB, ніж при ручному розрахунку?

Ручний розрахунок із трьох цифр без подвоєння дав би неправильний результат, тому що #abc у CSS завжди еквівалентний #aabbcc. Інструмент автоматично застосовує це правило, що відповідає специфікації CSS.

Як дізнатися RGB для кольору з альфа-каналом (наприклад, #rgba)?

Ця сторінка працює лише з RGB без альфа-каналу. Для RGBA потрібен окремий інструмент, який приймає чотири значення (наприклад, rgba(255,0,0,0.5)). Восьмицифрові HEX-коди (наприклад, #ff000080) не обробляються.

Чи можна конвертувати RGB назад у HEX на цій сторінці?

Ні, ця сторінка спеціалізується лише на напрямку HEX → RGB. Для зворотного перетворення потрібна окрема сторінка «RGB to HEX».

Чому значення RGB завжди цілі числа, а не десяткові дроби?

Кожен канал у 8-бітній системі може мати тільки 256 дискретних значень. Перетворення з шістнадцяткової системи дає точне ціле число, оскільки обидва представлення кодують той самий дискретний рівень.

Чи впливає регістр літер у HEX-коді на результат?

Ні. #AABBCC і #aabbcc дають однаковий RGB (170, 187, 204). Інструмент не чутливий до регістру.

Що станеться, якщо ввести код із некоректними символами, наприклад #GGG?

З’явиться повідомлення про помилку: «Enter a hex color like #4f46e5 or #abc.» Інструмент не виконує жодного перетворення, допоки не буде введено правильний шістнадцятковий код із дозволених символів.

Користуйтеся конвертером для швидкої та точної роботи з кольорами у веб-розробці, дизайні та графіці. Кожне перетворення відбувається миттєво і безпечно, прямо у вашому браузері.