Конвертер кольорів HEX у RGB

HEX і RGB: два способи записати один і той самий колір

Кожен колір, який ви бачите на екрані, змішується з трьох джерел світла: червоного, зеленого та синього. Увімкніть усі три на повну — отримаєте білий; вимкніть всі — отримаєте чорний. HEX і RGB — це просто два способи запису того, наскільки яскравим має бути кожен із цих трьох каналів. Вони вказують на точно однаковий колір, тому хороший конвертер лише перекладає між двома системами запису, не змінюючи відтінку. Саме це робить цей інструмент — повністю у вашому браузері, показуючи живий зразок, щоб ви могли підтвердити результат власними очима.

Як читати hex-код

Hex-колір виглядає ось так: #1E90FF. Символ решітки просто позначає початок; шість символів після нього — це три пари в шаблоні #RRGGBB. Перша пара — червоний, друга — зелений, третя — синій. Кожна пара — число, записане в шістнадцятковій системі, тобто за основою 16, де цифри йдуть від 0 до 9, а потім A, B, C, D, E, F позначають від 10 до 15. Одна пара може містити значення від 00 (канал повністю вимкнений) до FF (повністю увімкнений). У звичайному десятковому записі цей діапазон — від 0 до 255, та сама шкала, що використовує RGB. Маючи 256 можливих рівнів на кожен канал, шестизначна форма може описати 16 777 216 різних кольорів.

Конвертація в обидва боки: розбір прикладу

Щоб перейти з HEX до RGB, розбийте код на три пари та перетворіть кожну із шістнадцяткової в звичайну десяткову. Візьмемо #1E90FF. Червона пара — 1E: це 1, помножений на 16, плюс 14 (E), що дорівнює 30. Зелена пара 90 — це 9, помножений на 16, плюс 0, що дорівнює 144. Синя пара FF — це 15, помножений на 16, плюс 15, що дорівнює 255. Отже, #1E90FF перетворюється на rgb(30, 144, 255) — знайомий «додж-синій» (dodger blue).

Зворотній напрямок — той самий процес навпаки. Візьміть кожне RGB-число і запишіть його двома hex-цифрами. Чистий червоний, rgb(255, 0, 0), дає FF, 00 і 00, що об'єднується в #FF0000. Варто пам'ятати: якщо значення менше 16, вам все одно потрібні обидві цифри, тому 5 записується як 05, а не просто 5. Конвертер виконує це вирівнювання за вас, але при ручному обчисленні це збиває людей з пантелику.

Де який формат використовується

HEX — повсякденна мова вебу. CSS, HTML і більшість коду, який ви пишете, використовують hex-коди, тому що вони компактні й легко копіюються. RGB зазвичай з'являється в інструментах дизайну та роботи з зображеннями — Figma, Photoshop, Sketch і Illustrator зазвичай показують повзунки або поля в діапазоні 0–255, а програми для захоплення екрана або відео часто очікують RGB. Тому ви регулярно берете hex-код зі стилів і вам потрібна його RGB-форма для введення в панель дизайну, або навпаки. Саме цей кругооберт і є головною причиною, чому конвертер зручний. Якщо вам потрібно скласти цілий набір відповідних відтінків, а не перекласти один колір, наш генератор палітр стане кращою відправною точкою, а більше утиліт такого роду ви знайдете в розділі інструментів для розробників.

Альфа, прозорість і HSL

Обидва формати мають розширену форму, що додає прозорість. RGB перетворюється на rgba(30, 144, 255, 0.5), де четверте значення — це альфа: 0 означає повну прозорість, 1 — повну непрозорість. HEX додає четверту пару для тієї ж мети, отримуючи восьмизначний код #RRGGBBAA; наприклад, 80 відповідає приблизно 50% непрозорості. Деякі конвертери також пропонують HSL (відтінок, насиченість, яскравість), який описує колір так, як це міг би зробити людина: виберіть відтінок на колесі, а потім регулюйте його насиченість і яскравість. HSL — це інша ментальна модель, а не інша палітра, тому він може бути інтуїтивнішим, коли ви хочете зробити колір трохи світлішим або приглушенішим, не маніпулюючи трьома окремими числами.

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