Как перевести цвет из 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. Конвертер работает с непрозрачным цветом; значение альфа одинаково во всех форматах.
Этот инструмент бесплатный?
Да, он бесплатный. Без регистрации и электронной почты. Результат на этой странице.
Как получить результат?
Используйте инструмент на этой странице. Результат появится здесь, без отправки по электронной почте.