Конвертер приймає будь-яку CSS-форму hex: 6-значну #3366cc, скорочену 3-значну #36c, а також 4- і 8-значні форми з альфа-каналом, із символом # або без нього. Він показує рядок hsl() чи hsla(), окремі значення та розбір по кожній складовій - а ще рядок зворотного переведення HSL у HEX, коли потрібно навпаки. Усе працює прямо в браузері - без завантаження на сервер, без реєстрації, без обмежень.
Конвертер HEX у HSL
Працює повністю у вашому браузері - без завантаження на сервер і без реєстрації.
CSS
hsl(220, 60%, 50%)Як це обчислюється
Відтінок220
Насиченість60%
Світлість50%
Потрібно навпаки? HSL у HEX
#3366ccЯк перевести HEX у HSL?
Спочатку прочитайте hex-код як червоний, зелений і синій (0-255), а потім опишіть той самий колір через hue, saturation і lightness. Hue - це кут на колірному колі (0-360), saturation - наскільки колір насичений (0-100%), а lightness - наскільки він світлий (0-100%). #3366cc перетворюється на hsl(220, 60%, 50%). Цей конвертер робить це миттєво, поки ви друкуєте.
Як користуватися
- 1Введіть hex-код. Наберіть або вставте hex-колір на кшталт #3366cc (або #36c), або оберіть його через піпетку кольору. Символ # не обов'язковий.
- 2Прочитайте значення HSL. Рядок hsl(), окремі значення і живий попередній перегляд кольору оновлюються під час введення, а розбір показує, як обчислюються hue, saturation і lightness.
- 3Скопіюйте потрібний формат. Натисніть Copy біля рядка hsl() або біля звичайних значень. Потрібно навпаки? Введіть нижче hue, saturation і lightness, щоб отримати hex-код назад.
Кому це знадобиться
- Front-end розробники переводять hex-код у hsl(), щоб коригувати lightness для станів hover і focus, не підбираючи новий колір з нуля.
- Дизайнери, що будують палітри, фіксують hue і поступово змінюють saturation та lightness, щоб отримати світліші й темніші відтінки з одного фірмового кольору.
- Автори тем і дизайн-токенів зберігають кольори як HSL, бо їх набагато легше читати і коригувати вручну, ніж hex-рядок.
- Усі, хто зіставляє кольори між інструментами, де одному потрібен hex (Figma, більшість CSS), а іншому - HSL (хелпери SCSS, деякі колірні системи).
Часті запитання
Цей конвертер HEX у HSL безкоштовний?
Так - він на 100% безкоштовний, без реєстрації і без обмежень. Працює повністю у вашому браузері.
Мої кольори кудись завантажуються?
Ні. Конвертація - це звичайний JavaScript, що виконується на вашому пристрої - нічого не надсилається на сервер, і інструмент продовжує працювати офлайн після завантаження сторінки.
Що таке HSL?
HSL означає hue, saturation і lightness. Hue - це кут від 0 до 360 градусів на колірному колі, saturation показує, наскільки насичений колір, від 0 до 100 відсотків, а lightness проходить від 0 відсотків (чорний) через чистий колір на позначці 50 відсотків до 100 відсотків (білий).
Як перевести hex у HSL вручну?
Переведіть hex у червоний, зелений і синій та поділіть кожне значення на 255. Візьміть максимум і мінімум із трьох: lightness - це їхнє середнє, saturation - це (максимум - мінімум), поділене на (1 - |2L - 1|), а hue визначається тим, який канал максимальний, і масштабується до 0-360 градусів.
Чи підтримується скорочений запис на кшталт #36c?
Так. У CSS-скороченні кожна цифра дублюється, тож #36c розгортається в #3366cc і переводиться в hsl(220, 60%, 50%). 4-значна форма працює так само, остання цифра при цьому задає альфа-канал.
Як конвертер обробляє прозорість (HSLA)?
8-значний hex-код несе альфа-канал в останній парі. Цей байт (0-255) ділиться на 255, щоб отримати значення альфа від 0 до 1, яке очікує hsla(), з округленням до трьох знаків - так #3366cc80 стає hsla(220, 60%, 50%, 0.502).
Чи можна перевести HSL назад у HEX?
Так. Скористайтеся рядком HSL у HEX під результатом: введіть hue (0-360), а також saturation і lightness (0-100%), і hex-код з'явиться миттєво. Значення поза діапазоном обрізаються до допустимих меж.
Чим HSL корисніший за hex?
HSL зрозумілий для людини: можна освітлити колір, збільшивши L, зробити його блідішим, зменшивши S, або змінити його родину кольору, коригуючи H - і все це без вгадування hex-цифр. Це робить HSL ідеальним для побудови узгоджених палітр, станів hover і дизайн-токенів.