Как перевести цвет HEX в RGB: форматы HEX, RGB, HSL и alpha
- HEX та RGB описують один і той же колір по-різному: HEX — шістнадцяткова запис #RRGGBB, RGB — три числа від 0 до 255.
- Щоб перевести HEX в RGB, розбийте код на три пари і переведіть кожну з шістнадцяткової системи в десяткову.
- Прозорість додається через альфа-канал: RGBA(…, 0.5) або 8-значний HEX виду #RRGGBBAA.
- HSL (відтінок, насиченість, світлість) зручніше для ручного налаштування відтінків і створення палітр.
Один і той же колір у верстці можна записати кількома способами, і новачка це збиває з толку: дизайнер надіслав #3498DB, а в макеті CSS вказано rgb(52, 152, 219) — це помилка чи одне й те саме? Одне й те саме. HEX і RGB — просто дві форми запису одного кольору, як «1/2» і «0.5». У цій статті розберемо, як влаштовані формати HEX, RGB і HSL, як швидко переводити їх один в одного вручну і в коді, і коли який формат зручніше застосовувати в CSS і дизайні.
Перекладайте кольори між HEX, RGB і HSL — безкоштовно
Що таке RGB і чому 255
RGB розшифровується як Red, Green, Blue — червоний, зелений, синій. Екран формує будь-який колір, змішуючи ці три канали. Кожен канал задається числом від 0 до 255: 0 — канал вимкнений, 255 — світить на максимум. Чому саме 255? Тому що на кожен канал відводиться 8 біт, а 8 біт дають 2⁸ = 256 значень, тобто від 0 до 255. Три канали по 256 градацій дають 256³ ≈ 16,7 млн кольорів.
Приклади: rgb(255, 0, 0) — чистий червоний, rgb(0, 255, 0) — зелений, rgb(0, 0, 0) — чорний, rgb(255, 255, 255) — білий. Сірий — це рівні значення всіх трьох каналів, наприклад rgb(128, 128, 128).
Що таке HEX і як він пов'язаний з RGB
HEX — це ті ж три числа RGB, але записані в шістнадцятковій (16-річній) системі числення і без пробілів, з решіткою попереду. Формат: #RRGGBB, де RR — червоний, GG — зелений, BB — синій. У 16-річній системі використовуються цифри 0–9 і літери A–F (A=10, B=11, … F=15). Одна пара символів кодує число від 00 до FF, тобто рівно від 0 до 255 — тому HEX і RGB взаємозамінні.
Існує і коротка записка з трьох символів, наприклад #39F. Вона розгортається подвоєнням кожного символу: #39F = #3399FF. Це працює тільки коли обидві цифри в парі збігаються.
Як перевести HEX в RGB вручну
Візьмемо #3498DB і розіб'ємо на три пари: 34, 98, DB. Кожну пару переводимо з 16-ричної системи в десяткову за формулою «перший символ × 16 + другий символ»:
34 → 3×16 + 4 = 52
98 → 9×16 + 8 = 152
DB → 13×16 + 11 = 219
Результат: #3498DB = rgb(52, 152, 219) — приємний «небесно-синий». Зворотний переклад з RGB в HEX: кожне число ділимо на 16 (ціла частина — перший символ, залишок — другий). 52 = 3 залишок 4 → 34. Якщо число менше 16, зліва дописується нуль, наприклад 5 → 05.
Прозорість: RGBA та 8-значний HEX
Щоб колір став напівпрозорим, додають альфа-канал (alpha) — ступінь непрозорості від 0 (повністю прозорий) до 1 (повністю непрозорий). У RGB це робиться через RGBA: rgba(52, 152, 219, 0.5) — той же синій, але видимий на 50%. Це незамінно для тіней, оверлеїв і підкладок під текст.
У HEX також є версія з прозорістю — 8 символів #RRGGBBAA, де остання пара кодує альфу від 00 до FF. Наприклад, #3498DB80 приблизно дорівнює 50% прозорості (80 в 16-ричному ≈ 128 з 255). Сучасні браузери розуміють цей формат, але для читабельності багато верстальників надають перевагу RGBA.
HSL: коли зручніше він
HSL (Hue, Saturation, Lightness — відтінок, насиченість, світлотність) описує колір ближче до людської логіки. Hue — кут на кольоровому колі від 0 до 360° (0 — червоний, 120 — зелений, 240 — синій). Saturation — насиченість у відсотках, Lightness — світлотність у відсотках. Наш #3498DB в HSL — приблизно hsl(204, 70%, 53%).
Головна перевага HSL — з ним зручно будувати палітри: щоб отримати світліший або темніший відтінок, достатньо змінювати тільки Lightness, не чіпаючи тон. Для генерації градієнтів, станів кнопок (hover, active) і тем оформлення це набагато наочніше, ніж підбирати HEX навмання.
Що і де застосовувати на практиці
HEX — стандарт де-факто в макетах і дизайн-системах: компактно і звично. RGB і особливо RGBA потрібні, коли потрібна прозорість. HSL беруть для програмної генерації кольорів і тонкої настройки палітр. Усі три формати валідні в CSS, і браузер відобразить їх однаково — обирайте той, що зручніший для конкретного завдання. Для разової конвертації простіше всього скористатися онлайн-конвертером, щоб не рахувати 16-річні пари в умі.
Часті питання
Чим HEX відрізняється від RGB?
Нічим по суті — це дві форми запису одного кольору. HEX використовує шістнадцятковий запис #RRGGBB, а RGB — три десяткові числа від 0 до 255. Одна пара HEX (00–FF) в точності дорівнює одному числу RGB (0–255).
Як перевести HEX в RGB вручну?
Розбийте код на три пари символів (RR, GG, BB) і переведіть кожну з 16-річної системи в десяткову за формулою «перший символ × 16 + другий символ». Наприклад, #3498DB → 52, 152, 219.
Як додати прозорість до кольору?
Використовуйте альфа-канал: у форматі RGBA — четверте значення від 0 до 1, наприклад rgba(52,152,219,0.5). У HEX — восьмизначний запис #RRGGBBAA, де остання пара задає непрозорість від 00 до FF.
Що краще використовувати в CSS — HEX, RGB чи HSL?
Усі три працюють однаково. HEX компактний і зручний для макетів, RGBA потрібен для прозорості, HSL зручніший для генерації палітр і підбору відтінків, оскільки дозволяє змінювати лише світлоту або насиченість.
Перекладайте кольори між HEX, RGB і HSL — безкоштовно
Оновлено: 9 липня 2026 р. Редакція MegaInet.art.
