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

HEX в HSL: конвертація кольорів для людського сприйняття

Шістнадцятковий код кольору — компактний запис RGB-компонентів у base-16. Складається з шести цифр (або трьох у скороченому варіанті), де перші два символи позначають червоний канал, наступні два — зелений, останні два — синій. Кожна пара значень лежить у діапазоні від 00 до FF (тобто від 0 до 255 у десятковій системі). Скорочена форма #abc розшифровується як #aabbcc — кожен символ подвоюється.

HSL розшифровується як Hue (відтінок), Saturation (насиченість), Lightness (світлість). Відтінок вимірюється в градусах від 0 до 360, де 0 і 360 — червоний, 120 — зелений, 240 — синій. Насиченість — від 0% (сірий) до 100% (максимальна інтенсивність кольору). Світлість — від 0% (чорний) до 100% (білий).

Сторінка hex-to-hsl на нашому сайті приймає дійсний шести- або тризначний HEX-код (з символом # або без нього) і миттєво повертає еквівалентне значення HSL, а також представлення кольору у форматах RGB, HSV, CMYK, LAB. Усі поля оновлюються одночасно під час редагування. Перетворення відбуваються всередині вашого браузера — жодні дані не завантажуються та не зберігаються.

Чому HSL, а не HEX

HEX — сирий запис RGB-значень. Він зручний для машин, але неінтуїтивний для людини. Коли ви бачите #4f46e5, важко на око визначити, чи це блакитний, фіолетовий або синій відтінок. Ще складніше оцінити його насиченість або світлість.

HSL створено для людського мислення. Змінюючи лише світлість (Lightness), ви отримуєте той самий відтінок (Hue), але темніший або світліший. Це ключова властивість, якої немає в HEX або RGB. Наприклад, для кольору #1E90FF (Hue = 217°, Saturation = 100%, Lightness = 56%) можна створити світліший варіант, збільшивши Lightness до 75%, або темніший, зменшивши до 35% — відтінок залишиться 217°.

Саме тому HSL став стандартом для генерації колірних палітр, тем оформлення (dark/light themes) та створення динамічних варіацій кольорів у CSS. Сучасні CSS-властивості, як-от hsl(), oklch() та color-mix(), активно використовують HSL-подібні моделі.

Важливо: стандартний HEX (шестизначний або тризначний) не містить інформації про альфа-канал (прозорість). HSL також не має альфа-компонента — перетворення завжди працює з повністю непрозорими кольорами. Якщо вам потрібна прозорість, використовуйте HSLA або RGBA.

Як HEX перетворюється на HSL — математична основа

Перетворення відбувається у два кроки: спочатку HEX → RGB, потім RGB → HSL.

HEX → RGB:

• Розбиваємо HEX-код на три пари: #4f46e5 → 4f, 46, e5.
• Кожну пару переводимо з шістнадцяткової системи в десяткову: 4f = 79, 46 = 70, e5 = 229.
• Отримуємо RGB(79, 70, 229).
• Для тризначного коду #abc спочатку подвоюємо символи: aabbcc, потім так само: aa = 170, bb = 187, cc = 204. Результат: RGB(170, 187, 204).

RGB → HSL:

Спочатку нормалізуємо R, G, B до діапазону, поділивши на 255. Для нашого прикладу: R = 0.3098, G = 0.2745, B = 0.8980.

1. Обчислюємо світлість L: L = (max + min) / 2 де max — найбільше значення з (R, G, B), min — найменше. max = 0.8980 (B), min = 0.2745 (G), L = (0.8980 + 0.2745) / 2 = 0.5863 → 58.63%.

2. Обчислюємо насиченість S: Якщо max = min (колір сірий), то S = 0. Інакше обчислюємо різницю: delta = max - min. Якщо L ≤ 0.5, то S = delta / (max + min). Якщо L > 0.5, то S = delta / (2 - max - min). У нашому прикладі L = 0.5863 (> 0.5), delta = 0.6235. S = 0.6235 / (2 - 0.8980 - 0.2745) = 0.6235 / 0.8275 = 0.7535 → 75.35%.

3. Обчислюємо відтінок H: Те сама умова max = min → H = 0. Інакше залежно від того, який канал є max:

   • Якщо max = R: H = (G - B) / delta + (G < B? 6: 0)
   • Якщо max = G: H = (B - R) / delta + 2
   • Якщо max = B: H = (R - G) / delta + 4 У нашому прикладі max = B, отже: H = (0.3098 - 0.2745) / 0.6235 + 4 = 0.0353 / 0.6235 + 4 = 0.0567 + 4 = 4.0567. Переводимо в градуси: H × 60 = 4.0567 × 60 = 243.4°. (Якщо результат менше 0, додаємо 360.)

Підсумок: HEX #4f46e5 = HSL(243°, 75%, 59%). Саме ці числа ви побачите на сторінці: відтінок 243°, насиченість 75%, світлість 59%, а також повний набір інших форматів.

Межі та граничні випадки

Сторінка приймає лише дійсні шестизначні або тризначні HEX-коди (з # або без). Якщо ввести неправильне значення, з'явиться повідомлення: "Enter a hex color like #4f46e5 or #abc." Помилка виникає, якщо:

• Код містить символи, які не є шістнадцятковими цифрами (0–9, A–F, a–f).
• Кількість символів (без #) не дорівнює 3 або 6.
• Введено 4, 5, 7, 8 символів (наприклад, #1E90FFaa не підтримується — це 8-символьний HEX з альфа-каналом).

Якщо ви перемкнетеся на інший колірний простір (наприклад, LAB або CMYK) і введете значення, що виходить за межі видимого RGB-гамуту, колір буде скориговано до найближчого відображуваного кольору. При зворотному перетворенні такого кольору в HEX може виникнути незначний зсув. Наприклад, деякі чисті кольори в LAB або екстремально насичені відтінки в HSL не можуть бути точно відтворені на звичайному sRGB-моніторі.

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

HSL vs HSV: практичні відмінності

Обидві моделі використовують відтінок (Hue) як градуси на колірному колі. Різниця — у двох інших компонентах:

• HSV — Hue, Saturation, Value (яскравість). Saturation тут визначає, наскільки колір розбавлений білим. Value — це максимальна яскравість (найбільший компонент RGB). При Value = 0 отримуємо чорний, при Value = 1 та Saturation = 0 — білий.
• HSL — Hue, Saturation, Lightness. Lightness — це середнє арифметичне між мінімальним і максимальним компонентом RGB. При Lightness = 0 — чорний, при Lightness = 1 — білий.

На практиці HSV краще підходить для вибору кольорів у графічних редакторах (наприклад, палітра в Adobe Photoshop), тоді як HSL зручніший для створення рівномірних градієнтів і тем оформлення. Наприклад, зміна Lightness у HSL дає природніше затемнення/освітлення, ніж зміна Value у HSV.

Доступність веб-вмісту (WCAG) та HSL

Для перевірки контрастності кольорів відповідно до WCAG 2.1 часто використовують HSL-значення. Правило вимагає коефіцієнта контрасту щонайменше 4.5:1 для звичайного тексту та 3:1 для великого тексту. HSL дозволяє змінювати лише світлість, зберігаючи відтінок, і швидко знаходити варіанти, що задовольняють вимоги.

Наприклад, якщо ви маєте колір фону #f0f0f0 (HSL(0°, 0%, 94%)) і текстовий колір #666666 (HSL(0°, 0%, 40%)), коефіцієнт контрасту становить 3.6:1 — цього недостатньо. Збільшивши світлість тексту до 30% (або зменшивши світлість фону до 88%), можна досягти потрібного контрасту, не змінюючи відтінку.

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

1. Чи можна конвертувати HEX з альфа-каналом (8 символів) у HSL? Ні. Сторінка приймає лише 6- або 3-символьні HEX-коди (без прозорості). Для прозорих кольорів використовуйте HSLA або RGBA в CSS.

2. Чому CMYK-значення відрізняються від тих, що я бачу в друкарні? CMYK на сторінці — це математичне перетворення з RGB, яке не враховує профіль друку, тип паперу та чорнила. Для точного друку потрібна окрема калібровка.

3. Як перевірити, чи колір входить у видимий RGB-гамут? Сторінка автоматично скоригує неприпустиме значення до найближчого відображуваного кольору. Якщо ви отримуєте несподіваний результат, спробуйте зменшити насиченість або зсунути відтінок.

4. Чому при конвертації #abc я отримую той самий результат, що й для #aabbcc? Тому що тризначна форма є скороченням: кожен символ подвоюється. #abc = #aabbcc.

5. Чи можна використовувати HSL безпосередньо в CSS? Так. Сучасні браузери підтримують hsl(243°, 75%, 59%), hsla() та новіші функції oklch() і color-mix().

6. Що станеться, якщо ввести HEX-код без символу #? Сторінка приймає коди як з #, так і без нього. Наприклад, 4f46e5 буде опрацьовано так само, як #4f46e5.