Конвертер Hex в HSL онлайн
Конвертируйте `#RGB`, `#RRGGBB` или `#RRGGBBAA` в CSS `hsl()` / `hsla()` с живым образцом. Дизайнеры копируют hex из пикера, а в стилях хотят HSL, чтобы чуть сдвинуть светлоту или насыщенность без hex-арифметики.
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?
- Округление и гамут отличаются — судите по целевому браузеру.