Конвертер понимает все формы hex в CSS: 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), а затем этот цвет описывается через оттенок, насыщенность и светлоту. Оттенок - это угол на цветовом круге (0-360), насыщенность показывает, насколько цвет яркий (0-100%), а светлота - насколько он светлый (0-100%). #3366cc превращается в hsl(220, 60%, 50%). Инструмент делает это мгновенно, пока вы печатаете.
Как пользоваться
- 1Введите hex-код. Введите или вставьте hex-код цвета, например #3366cc (или #36c), либо выберите цвет через цветовой образец. Решётку # можно не ставить.
- 2Посмотрите значение HSL. Строка hsl(), чистые значения и живой предпросмотр цвета обновляются по мере ввода, а разбивка по компонентам показывает отдельно оттенок, насыщенность и светлоту.
- 3Скопируйте нужный формат. Нажмите «Копировать» рядом со строкой hsl() или рядом с обычными значениями. Нужно наоборот? Введите ниже оттенок, насыщенность и светлоту, чтобы получить hex-код обратно.
Кому пригодится
- Фронтенд-разработчикам, которым нужно перевести hex в hsl(), чтобы менять светлоту для состояний hover и focus, не подбирая совершенно новый цвет.
- Дизайнерам, которые собирают палитру и держат оттенок неизменным, а насыщенность и светлоту меняют шагами, получая оттенки и тени из одного фирменного цвета.
- Авторам тем и дизайн-токенов, которые хранят цвета в HSL, потому что такую запись гораздо проще читать и править вручную, чем hex-строку.
- Всем, кто сверяет цвета между инструментами, где в одном месте нужен hex (Figma, большинство CSS-свойств), а в другом - HSL (хелперы SCSS, некоторые цветовые системы).
Вопросы и ответы
Этот конвертер HEX в HSL бесплатный?
Да, он полностью бесплатный, без регистрации и без ограничений. Всё работает прямо в вашем браузере.
Мои цвета куда-нибудь отправляются?
Нет. Перевод выполняет обычный JavaScript прямо на вашем устройстве - ничего не уходит на сервер, и после загрузки страницы инструмент продолжает работать даже офлайн.
Что такое HSL?
HSL расшифровывается как оттенок (hue), насыщенность (saturation) и светлота (lightness). Оттенок - это угол от 0 до 360 градусов на цветовом круге, насыщенность показывает яркость цвета от 0 до 100 процентов, а светлота идёт от 0 процентов (чёрный) через чистый цвет на 50 процентах до 100 процентов (белый).
Как перевести hex в HSL вручную?
Разложите hex на красный, зелёный и синий и разделите каждое значение на 255. Возьмите максимум и минимум из трёх чисел: светлота - их среднее, насыщенность равна (макс - мин), делённому на (1 - |2L - 1|), а оттенок зависит от того, какой канал максимален, и приводится к диапазону 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 под результатом: введите оттенок (0-360), а также насыщенность и светлоту (0-100%), и вы сразу получите hex-код. Значения вне диапазона автоматически ограничиваются.
Чем HSL удобнее hex?
HSL понятен человеку: можно осветлить цвет, увеличив L, сделать его более приглушённым, уменьшив S, или сменить всю цветовую группу, изменив H - и всё это без подбора hex-цифр наугад. Поэтому HSL отлично подходит для построения согласованных палитр, состояний hover и дизайн-токенов.