Що таке HSL і HEX?
HSL і HEX — це дві різні системи опису кольору, які часто використовуються в веб‑дизайні та розробці. HSL (Hue, Saturation, Lightness) створено для людського сприйняття: ви задаєте відтінок (кут на колірному колі від 0° до 360°), насиченість (0–100%) і світлоту (0–100%). Змінюючи лише світлоту, ви зберігаєте той самий відтінок — це робить HSL ідеальним для генерації палітр, тем і перевірки контрастності без псування тону.
HEX — це шістнадцяткове представлення кольору в моделі RGB. Найчастіше воно має вигляд шести цифр: #1E90FF (або трицифровий скорочений запис, наприклад #ABC). HEX не містить власної інформації про альфа‑канал (прозорість) у шестицифровій формі; восьмицифровий варіант (#RRGGBBAA) існує, але цей інструмент його не підтримує. Перетворення з HSL в HEX є прямим і безвтратним у межах колірного простору sRGB — на відміну від конвертацій через LAB або CMYK, які можуть вимагати відсікання кольорів за межами гами.
Ця сторінка присвячена саме переходу від HSL до HEX. У той час як інші інструменти пропонують загальний конвертер, тут акцент зроблено на людську зручність HSL і технічну точність HEX — без зайвих ускладнень. Коли ви вводите 243, 75%, 59%, ви миттєво отримуєте #4f46e5.
Як працює перетворення HSL в HEX
Алгоритм перетворення складається з двох кроків: спочатку HSL перетворюється в RGB, потім кожен RGB‑канал (червоний, зелений, синій) записується у шістнадцятковій системі.
Крок 1: HSL → RGB
Математична формула базується на нормалізації значень. Наприклад, для кольору hsl(243°, 75%, 59%):
- H = 243° → нормалізуємо: H′ = 243 / 360 ≈ 0,675
- S = 75% → S′ = 0,75
- L = 59% → L′ = 0,59
Далі за допомогою допоміжних функцій обчислюються значення червоного, зеленого та синього в діапазоні 0–255. Результат: R=79, G=70, B=229.
Крок 2: RGB → HEX
Кожне число переводимо в шістнадцятковий формат:
- 79 → 4F
- 70 → 46
- 229 → E5
Отже, HEX = #4f46e5 (регістр літер значення не має, але в CSS традиційно використовують малі літери).
Якщо кожен канал можна записати одним шістнадцятковим символом (наприклад, R=0, G=255, B=0 → #00FF00 → скорочено #0F0), інструмент показує і трицифрову форму. Для більшості кольорів доводиться використовувати повний шестицифровий запис.
Важливо: це перетворення завжди знаходиться в межах видимого RGB‑діапазону — жодного відсікання кольорів не відбувається, на відміну від конвертацій у CMYK або LAB. Значення CMYK, які відображаються поруч, є лише оцінкою на екрані й можуть відрізнятися від реального друку.
Як користуватися інструментом
- Введіть значення HSL у форматі: відтінок (0–360), насиченість (0–100% з символом
%), світлота (0–100% з%). Приклад:243, 75%, 59%. Роздільником може бути кома чи пробіл — інструмент розпізнає обидва варіанти. - Миттєве оновлення: як тільки ви закінчуєте введення, поле HEX змінюється. Водночас оновлюються всі інші колірні поля: RGB, HSV, CMYK, LAB.
- Якщо введено неправильно: коли значення виходять за межі (наприклад, відтінок 361°, насиченість 150% або світлота без
%), з’являється повідомлення:
„Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.“
(Введіть HSL як відтінок 0–360 з двома відсотками, наприклад 243, 75%, 59%.) Повідомлення англійською, бо воно є частиною інтерфейсу, але його зміст зрозумілий. - Усі обчислення виконуються у вашому браузері: жодні дані не надсилаються на сервер, тож приватність гарантована.
- Трицифровий HEX: якщо кожен RGB‑канал можна виразити одним шістнадцятковим символом (наприклад, 0, 255, 0 →
#0F0), інструмент покаже його поряд із повним шестицифровим кодом.
Особливості та обмеження
- Немає альфа‑каналу: шестицифровий HEX не підтримує прозорість. Якщо вам потрібен колір з альфа, використовуйте
rgba()або восьмицифровий HEX вручну — цей інструмент не генерує такий формат. - Оціночний CMYK: значення CMYK, які ви бачите, є наближеним перетворенням sRGB у CMYK без урахування профілю друку. Для професійного друку слід використовувати кольороподіл у графічному редакторі.
- Без відсікання: на відміну від конвертації HEX у LAB або CMYK, HSL→HEX завжди лишається в межах sRGB. Жоден колір не буде автоматично змінено або обрізано.
- Світлота залежить від пристрою: HEX-код є абсолютним числовим значенням, але візуальна яскравість на різних моніторах може відрізнятися через калібрування та гамму.
- COLOUR PICKER: хоча інструмент не є пікером кольору, ви можете вводити HSL вручну, щоб отримати точний HEX для коду.
Для кого цей інструмент
- Дизайнери, які будують колірні палітри в HSL (наприклад, у Figma або Sketch) і потребують готових HEX-кодів для впровадження в код або дизайн‑системи.
- Фронтенд‑розробники, які отримують від дизайнерів HSL-значення й мають перетворити їх на CSS-властивості
background-color: #.... - Усі, хто працює з доступністю: за допомогою HSL можна регулювати світлоту, зберігаючи відтінок, а потім конвертувати результат у HEX для фінального використання. Наприклад, для WCAG‑контрасту 4.5:1 достатньо змінити світлоту на кілька відсотків, не чіпаючи колірний тон.
- Викладачі та студенти, які вивчають колірні моделі: інтерактивний перегляд залежностей між HSL, RGB і HEX допомагає зрозуміти математику перетворення.
Типові помилки та поради
- Забули символ
%для насиченості або світлоти. Невірно:243, 75, 59. Правильно:243, 75%, 59%. Інструмент не приймає числа без відсотка, бо не може відрізнити їх від значень у діапазоні 0–255 (як у RGB). - Відтінок поза межами 0–360. Наприклад,
400, 50%, 50%видасть помилку. Навіть від’ємні значення не допускаються — обчислення не відбуваються. - Плутанина між трицифровим і шестицифровим записом. Не всі кольори можна скоротити:
#123456не має трицифрової версії;#112233можна записати як#123. Інструмент покаже скорочену форму тільки тоді, коли вона можлива. - Очікування прозорості. HEX
#4f46e5не містить інформації про альфа. Якщо вам потрібен напівпрозорий колір, використовуйтеrgba(79, 70, 229, 0.5). - Спроба скопіювати HEX без решітки. Код, який ви бачите, завжди має на початку
#. У CSS решітка обов’язкова.
Часті запитання
1. Чи можна отримати восьмицифровий HEX з альфа-каналом?
Ні, цей інструмент генерує лише шестицифровий (або трицифровий) HEX. Альфа не підтримується. Ви можете самостійно додати два шістнадцяткові символи (наприклад, 80 для 50% прозорості) до коду, отриманого тут.
2. Як перевірити, чи правильно я ввів значення?
Якщо після введення HEX-поле не змінилося, а з’явилося повідомлення про помилку — перевірте наявність % після чисел насиченості та світлоти, а також те, що відтінок у межах 0–360. Навіть пропуск коми може спричинити помилку.
3. Чому CMYK-значення, які я бачу, не збігаються з друкованими?
Тому що CMYK є оцінкою на основі sRGB. Для точного друку потрібен кольороподіл з урахуванням профілю конкретного принтера та паперу. Не використовуйте ці числа для професійного друку.
4. Чи впливає на результат те, чи вводжу я відтінок як ціле число або з десятковими?
Інструмент очікує цілі числа для відтінку (0–360). Десяткові дроби, наприклад 243.5, можуть не прийматися або спричинити помилку. Рекомендуємо використовувати цілі градуси. Якщо вам потрібен проміжний відтінок, краще округліть.
5. Чи є спосіб зберегти історію перетворень?
Інструмент не зберігає історію — все працює в реальному часі без запису. Ви можете скопіювати HEX-код вручну.
6. Чи можна використовувати цю сторінку офлайн?
Так, оскільки весь код виконується у вашому браузері, сторінка працюватиме навіть без підключення до інтернету після першого завантаження. Жодних зовнішніх запитів не відбувається.
Підсумок: інструмент HSL‑to‑HEX — це простий, швидкий і точний спосіб перетворити зручну для людини модель кольору на машиночитаний код. Він призначений для практичного використання дизайнерами та розробниками, які цінують прозорість перетворення та відсутність прихованих алгоритмів. Усі обчислення відбуваються локально, а результати можна одразу застосовувати в CSS.