Конвертувати колір між RGB, HSL та шістнадцятковим

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

Ось типові випадки використання, що спонукають до конвертації кольору:

• RGB є рідним у CSS та JavaScript, зрозумілим для людини для розуміння домінанти (канали червоний, зелений, синій від 0 до 255).
• HSL робить зміну відтінку тривіальною: достатньо відрегулювати насиченість або яскравість, не перераховуючи кожен канал.
• HEX є канонічним форматом для копіювання-вставки: шість символів, сумісний скрізь, ідеальний для макетів Figma, Sketch або посібників зі стилю.
• Конвертації HEX to RGB, RGB to HEX, HEX to HSL та їхні зворотні операції є найпоширенішими в CSS та JavaScript.

RGB та RGBA (Red, Green, Blue, Alpha)

Кожен канал кодується цілим числом від 0 до 255, що відповідає одному байту на компонент і дає 16 777 216 можливих кольорів. Альфа-канал RGBA варіюється від 0 (прозорий) до 1 (непрозорий) і керує прозорістю.

.button {
    background-color: rgb(20, 0, 182);
    border-color: rgba(20, 0, 182, 0.5);
}

HEX та HEX8 (шістнадцяткова нотація)

Компактний і широко поширений формат: #RRGGBB з шести символів, де кожна пара представляє канал RGB у основі 16. Варіант #RRGGBBAA з восьми символів додає альфа-канал у шістнадцятковому форматі (00 прозорий, FF непрозорий). Коротка нотація #RGB теж існує: #F53 еквівалентно #FF5533.

.title  { color: #1400B6; }
.shadow { color: #1400B680; }   /* alpha 50% */
.accent { color: #F53; }        /* коротка форма */

HSL та HSLA (Hue, Saturation, Lightness, Alpha)

HSL описує колір перцептуально. Hue є кутом на хроматичному колесі (від 0 до 360°), Saturation і Lightness є відсотками. Це формат, якому варто надавати перевагу для генерації варіантів: освітлення кнопки при наведенні, зменшення насиченості відключеного стану, створення узгодженої палітри з варіацією лише відтінку.

$primary: hsl(247, 100%, 36%);
$primary-hover: hsl(247, 100%, 46%);   /* svetliiche */
$primary-muted: hsl(247, 30%, 36%);    /* menshe nasychen. */

Інші існуючі формати

CMYK (Cyan, Magenta, Yellow, Key) використовується у друці: він описує колір шляхом віднімання чорнил і не є релевантним для екрана. OKLCH і LAB є рівномірно перцептуальними просторами, що з'явились у CSS Color Level 4; вони дозволяють кращий контроль сприйнятої яскравості. Цей інструмент зосереджується на конвертації RGB, HEX і HSL, що покривають переважну більшість веб-потреб.

HEX у RGB зводиться до парсингу рядка попарно і інтерпретації кожної пари як цілого числа у основі 16:

const hex = '#1400B6';
const r = parseInt(hex.slice(1, 3), 16); // 20
const g = parseInt(hex.slice(3, 5), 16); // 0
const b = parseInt(hex.slice(5, 7), 16); // 182

RGB у HEX є зворотною операцією: кожен канал конвертується у основу 16, доповнюється до двох символів, потім конкатенується.

const toHex = (n) => n.toString(16).padStart(2, '0');
const hex = '#' + toHex(20) + toHex(0) + toHex(182); // '#1400b6'

RGB у HSL є більш алгоритмічним. Канали нормалізуються між 0 і 1, обчислюються мін і макс для виведення яскравості, потім насиченості, потім відтінку залежно від домінантного каналу. Повна формула задокументована у специфікації CSS Color Module Level 3.

Інструмент працює в обох напрямках між RGB, HEX і HSL. Для виконання конвертації:

1. Оберіть вхідний формат: RGB, HEX або HSL.
2. Введіть значення (наприклад #1400B6, rgb(20, 0, 182) або hsl(247, 100%, 36%)).
3. Запустіть конвертацію: еквіваленти у двох інших форматах відображаються негайно.
4. Скопіюйте потрібний результат за допомогою відповідної кнопки та вставте у вашу таблицю стилів або макет.

Обчислення виконується на стороні браузера, жодні дані не надсилаються на сервер.

• Веб-дизайн і CSS: отримати HEX з макету і отримати еквівалентний HSL для генерації стану hover або active без відхилення від відтінку.
• Візуальна ідентичність і палітра: розробити основний колір у кількох варіантах (світлий, темний, приглушений), граючи на яскравості або насиченості HSL.
• Ілюстрація і графіка: перенести колір екрана (RGB) у шістнадцятковий код для передачі програмі або клієнту.
• Доступність: конвертувати у формат RGB для подальшого обчислення коефіцієнта контрасту (WCAG AA вимагає 4.5:1 для звичайного тексту) з кольором фону.
• Змінні CSS та препроцесори: наповнювати дизайн-токени у файлі SASS або темі Tailwind з одного референсного кольору.

Кілька повних конвертацій для ілюстрації відповідності між трьома форматами:

#1400B6 -> rgb(20, 0, 182)    -> hsl(247, 100%, 36%)
#FF5733 -> rgb(255, 87, 51)   -> hsl(11, 100%, 60%)
#2ECC71 -> rgb(46, 204, 113)  -> hsl(145, 63%, 49%)
#F1C40F -> rgb(241, 196, 15)  -> hsl(48, 89%, 50%)
#FFFFFF -> rgb(255, 255, 255) -> hsl(0, 0%, 100%)
#000000 -> rgb(0, 0, 0)       -> hsl(0, 0%, 0%)

З альфа-каналом:

#1400B680 -> rgba(20, 0, 182, 0.50)   -> hsla(247, 100%, 36%, 0.50)
#FF5733CC -> rgba(255, 87, 51, 0.80)  -> hsla(11, 100%, 60%, 0.80)

В чому різниця між HEX і HEX8?

Класичний HEX кодує три канали RGB у шести символах (#RRGGBB). HEX8 додає два символи для альфа-каналу (#RRGGBBAA), що дозволяє керувати прозорістю в одному рядку. #1400B6FF і #1400B6 дають візуально однаковий непрозорий колір.

Що краще у CSS: HSL чи RGB?

Обидва еквівалентні у відображенні. HSL є більш виразним для генерації узгодженої палітри або варіантів стану (hover, focus), оскільки змінюється лише один перцептуальний параметр. RGB залишається зручним при роботі з даними з canvas або датчика.

Чому мій HEX дає інший відтінок, ніж очікувалося?

Три поширені причини: плутанина між коротким #RGB і довгим #RRGGBB (символи дублюються, а не конкатенуються), помилка копіювання одного символу, або відображення на некаліброваному екрані. Перевірте також, чи ваш CSS не накладає батьківську прозорість, що змінює кінцеве відображення.

Для чого потрібен альфа-канал RGBA та HSLA?

Альфа-канал керує непрозорістю кольору від 0 (повністю прозорий) до 1 (повністю непрозорий). Він корисний для оверлеїв, тіней, відключених станів або накладань на зображення. На відміну від CSS-властивості opacity, RGBA та HSLA впливають лише на цільовий колір, а не на його дочірні елементи.

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

Між RGB та HEX конвертація точна, обидва формати кодують однакову інформацію на 24 біти. Конвертація до HSL передбачає округлення відтінку, насиченості та яскравості; тому туди і зворотно RGB > HSL > RGB може повернути значення, зміщене на одиницю в деяких каналах.

Навіщо використовувати онлайн-конвертер замість власної функції?

Для одноразової перевірки, прототипування палітри або швидкого перевірки HEX-еквіваленту кольору HSL, витягнутого з макету, онлайн-конвертер є миттєвим. Для постійної програмної потреби бібліотека типу color, chroma-js або tinycolor2 залишається більш підходящою.