Як перевести колір з HEX у HSL
Переводьте кольори з HEX у HSL миттєво. Введіть значення HEX чи RGB або скористайтеся повзунками — усі формати оновлюються одночасно, з попереднім переглядом, формулою й таблицею поширених кольорів.
- Введіть або вставте значення HEX, наприклад #3B82F6, у відповідне поле вище.
- Значення HSL оновлюється одразу: #3B82F6 — це hsl(217, 91%, 60%). Інші формати й попередній перегляд кольору теж оновлюються.
- Скопіюйте значення HSL у свій CSS, дизайн-програму чи код.
Формула переведення HEX → HSL
Зведіть червоний, зелений і синій до діапазону 0–1. Світлість — середнє найсильнішого й найслабшого каналу, насиченість зростає з різницею між ними, а тон — положення переважного каналу на колірному колі в 360°:
#3B82F6 → hsl(217, 91%, 60%)
Поширені кольори: HEX і HSL
| HEX | HSL |
|---|---|
#000000 | hsl(0, 0%, 0%) |
#FFFFFF | hsl(0, 0%, 100%) |
#FF0000 | hsl(0, 100%, 50%) |
#00FF00 | hsl(120, 100%, 50%) |
#0000FF | hsl(240, 100%, 50%) |
#FFFF00 | hsl(60, 100%, 50%) |
#00FFFF | hsl(180, 100%, 50%) |
#FF00FF | hsl(300, 100%, 50%) |
#808080 | hsl(0, 0%, 50%) |
#FFA500 | hsl(39, 100%, 50%) |
#800080 | hsl(300, 100%, 25%) |
#3B82F6 | hsl(217, 91%, 60%) |
Що таке HEX і HSL
Колір у HEX — це # і шість шістнадцяткових цифр: по дві на червоний, зелений і синій, від 00 (немає) до FF (максимум). Це найпоширеніший спосіб запису кольорів у CSS і дизайн-програмах.
HSL описує колір через тон (кут від 0 до 360 на колірному колі), насиченість і світлість (обидві у %). Так легко отримати світліші, темніші чи приглушені відтінки того самого кольору.
Поширені запитання
Чи змінюється колір під час переведення?
HEX, RGB і HSL описують ті самі екранні кольори, тому переведення між ними точне (HSL округлюється до цілих). CMYK — для друку: результат залежить від колірного профілю принтера, тож значення CMYK з екрана — лише відправна точка.
Чи можна використати результат у CSS?
Так. CSS напряму приймає hex (#3B82F6), rgb(59, 130, 246) і hsl(217, 91%, 60%). CMYK — не формат CSS; його використовують у друку й дизайн-програмах.
А як щодо прозорості?
Додайте альфа-канал: 8-цифровий hex (#3B82F680) або rgba()/hsla() у CSS. Конвертер працює з непрозорим кольором; значення альфа однакове в усіх форматах.
Цей інструмент безкоштовний?
Так, він безкоштовний. Без реєстрації та електронної пошти. Результат на цій сторінці.
Як отримати результат?
Скористайтеся інструментом на цій сторінці. Результат з’явиться тут, без надсилання електронною поштою.