Конвертер Hex → HSL онлайн
Hex в HSL/HSLA для CSS. Короткий hex и альфа, с живым превью.Runs locally in your browser; files never leave your device.Runs locally in your browser; files nev
HSL разделяет тон, насыщенность и светлоту — «чуть темнее» часто проще, чем править hex-цифры.
Восьмизначный hex с альфой идёт в hsla; непрозрачные — в hsl.
Крошечные отличия от дизайн-приложений возможны из-за цветовых пространств — доверяйте превью-образцу.
Как конвертировать
- Введите hex
- Проверьте вывод HSL и образец
- Скопируйте в CSS
Чем полезен HSL
- Строить более светлые/тёмные варианты в CSS-переменных.
- Согласовать код с hex из дизайн-хэндоффа.
- Мгновенное превью сокращает пробы наугад.
Сценарии
- Фирменный hex → hsl custom property
- Hover кнопки через сдвиг светлоты
- Посмотреть альфу в 8-значном hex
Советы
- Решётка `#` на вводе опциональна.
- Короткий `#abc` раскрывается в `#aabbcc`.
- Копируйте hsl или hsla в зависимости от нужды в альфе.
Примеры
| Ввод | Вывод | Примечание |
|---|---|---|
| #FF5733 | hsl(...) | Непрозрачный |
| #FF573380 | hsla(...) | Полупрозрачный |
Частые вопросы о Hex→HSL
- Связь с RGB-конвертером?
- На сайте также есть hex↔RGB. HSL часто удобнее для перцептивных светлее/темнее.
- Расхождение с Figma?
- Округление и гамут отличаются — судите по целевому браузеру.