🎨

Конвертер HSL в HEX

Мгновенный перевод цвета из HSL в HEX-код с визуальным подбором

#2B7ACA≈ Стальной

HEX

#2B7ACA

HSL

hsl(210, 70%, 50%)

RGB

Тон (Hue)

Насыщенность (Saturation)

Яркость (Lightness)

Загрузка инструмента...

Конвертер HSL в HEX онлайн — точный и удобный перевод цветов

Онлайн-конвертер HSL в HEX позволяет моментально перевести цвет из формата HSL (Hue, Saturation, Lightness — тон, насыщенность, яркость) в шестнадцатеричный HEX-код, который используется в CSS, HTML и веб-дизайне. Этот инструмент необходим каждому дизайнеру, верстальщику и разработчику, работающему с цветовыми палитрами сайтов и приложений. HSL-модель — один из наиболее интуитивных способов описания цвета: параметр H (тон, оттенок) определяет базовый цвет на цветовом круге от 0° до 360°, S (насыщенность) задаёт интенсивность цвета от 0% до 100%, а L (яркость, светлота) регулирует, насколько цвет тёмный или светлый. Однако для указания цвета в коде CSS и HTML чаще всего используется HEX-формат: шестизначный код вида #RRGGBB. Именно поэтому конвертация HSL в HEX так востребована в повседневной работе веб-специалистов.

Наш конвертер цвета HSL в HEX работает мгновенно и прямо в браузере: при изменении любого параметра — тона, насыщенности или яркости — HEX-результат обновляется в реальном времени. Вы управляете цветом через визуальные слайдеры с цветовыми градиентами или вводите точные числовые значения. Инструмент также поддерживает обратный ввод: вставьте известный HEX-код, и калькулятор покажет соответствующие HSL-значения. Дополнительно отображается RGB-формат, что позволяет использовать результат в любом контексте — CSS, графический редактор, мобильное приложение. Все вычисления происходят локально на вашем устройстве, без передачи данных на сервер — это быстро и безопасно.

Преимущество HSL-модели в том, что она интуитивно понятна человеку: чтобы сделать цвет темнее, достаточно уменьшить L; чтобы приглушить — снизить S; чтобы изменить оттенок — повернуть H. Это делает HSL идеальной моделью для подбора оттенков и вариаций дизайн-системы. Но при вставке в код HTML и CSS удобнее использовать HEX — именно этот формат понимают все браузеры и графические программы. Конвертер HSL в HEX решает задачу перевода между этими двумя форматами за доли секунды.

Инструмент пригодится всем, кто работает с цветами в цифровой среде. Веб-дизайнеры используют конвертер при подборе палитры для макетов в Figma, Sketch и Adobe XD. Верстальщики и фронтенд-разработчики переводят HSL-значения в HEX для CSS-стилей. Контент-менеджеры подбирают фирменные цвета для email-рассылок. Маркетологи и SMM-специалисты используют инструмент для создания баннеров и креативов. Студенты и начинающие дизайнеры изучают связь между цветовыми моделями и учатся работать с HSL-пространством. Разработчики мобильных приложений конвертируют цвета для использования в iOS и Android проектах.

Перевод из HSL в HEX выполняется в два этапа. Сначала HSL-значения преобразуются в RGB (красный, зелёный, синий) — по стандартному алгоритму, определённому в спецификации CSS Color Level 4. Формула учитывает оттенок как угол на цветовом круге и рассчитывает доли красного, зелёного и синего каналов с учётом насыщенности и яркости. Затем полученные RGB-значения (от 0 до 255 для каждого канала) переводятся в шестнадцатеричную систему счисления и объединяются в шестизначный HEX-код формата #RRGGBB. Наш конвертер выполняет эту операцию с точностью до единицы значения каждого канала.

Мгновенная конвертация HSL в HEX-код в реальном времени без перезагрузки страницы
Визуальные слайдеры с цветовыми градиентами для интуитивного подбора тона, насыщенности и яркости
Числовые поля для ввода точных значений H (0–360°), S (0–100%) и L (0–100%)
Обратный ввод HEX-кода для определения HSL-значений цвета
Отображение результата в трёх форматах одновременно: HEX, HSL и RGB
Живой превью выбранного цвета с определением ближайшего именованного CSS-цвета
Готовые пресеты популярных дизайнерских цветов: Material, Tailwind, Bootstrap, iOS и другие
Копирование результата в буфер обмена в один клик — по отдельности или все форматы сразу
Генерация случайного цвета для вдохновения и быстрого тестирования палитр
История последних использованных цветов для быстрого возврата к предыдущим оттенкам

ℹ️ О конвертере HSL в HEX

Бесплатный онлайн-конвертер HSL в HEX на ТулФокс предназначен для быстрого и точного перевода цвета из HSL-модели в шестнадцатеричный HEX-код. Инструмент создан для дизайнеров, верстальщиков, разработчиков и всех, кто работает с цветами в CSS, HTML и цифровых продуктах.

Все расчёты выполняются локально в вашем браузере. Данные не сохраняются и не передаются третьим лицам. Инструмент доступен бесплатно и без регистрации.

Сравнение цветовых моделей: HSL, HEX, RGB

Параметр	HSL	HEX	RGB
Формат записи	hsl(0–360, 0–100%, 0–100%)	#RRGGBB (00–FF)	rgb(0–255, 0–255, 0–255)
Интуитивность	Высокая: тон + насыщенность + яркость	Средняя: нужен опыт чтения кодов	Средняя: три канала смешения
Использование в CSS	Поддерживается всеми браузерами	Стандартный формат для веба	Поддерживается всеми браузерами
Удобство подбора	Лучше всех — легко менять оттенок	Неудобно вручную	Средне
Пример (красный)	hsl(0, 100%, 50%)	#FF0000	rgb(255, 0, 0)

Как перевести HSL в HEX: пошаговая инструкция

Задайте значение тона (Hue)

Переместите слайдер тона или введите числовое значение от 0 до 360 градусов. Тон определяет базовый оттенок цвета на цветовом круге: 0° — красный, 60° — жёлтый, 120° — зелёный, 180° — голубой, 240° — синий, 300° — пурпурный.

Настройте насыщенность (Saturation)

Отрегулируйте насыщенность от 0% (серый, без цвета) до 100% (максимально насыщенный, чистый цвет). Слайдер показывает градиент от серого до полностью насыщенного оттенка с учётом текущего тона и яркости.

Установите яркость (Lightness)

Выберите яркость от 0% (чёрный) через 50% (чистый цвет) до 100% (белый). Этот параметр позволяет создавать тёмные и светлые оттенки одного и того же цвета — идеально для построения палитры.

Скопируйте HEX-результат

HEX-код обновляется автоматически при любом изменении параметров. Нажмите кнопку копирования рядом с нужным форматом (HEX, HSL или RGB) или скопируйте все форматы одной кнопкой. Результат готов для вставки в CSS, HTML или графический редактор.

Примеры конвертации HSL в HEX

🎨 Подбор фирменного цвета для сайта

Дизайнер подбирает основной цвет бренда, начиная с HSL: тон 210° (синий), насыщенность 85%, яркость 55%. Конвертер мгновенно выдаёт HEX-код #1A73C7, который вставляется в CSS-переменную --brand-color. Затем, меняя только яркость (40%, 70%, 90%), дизайнер получает тёмный, основной и светлый варианты цвета — согласованную палитру за считанные секунды.

🖥️ Вёрстка макета из Figma в CSS

Фронтенд-разработчик получает дизайн-макет, в котором цвета указаны в HSL-формате (hsl(142, 71%, 45%)). Для вставки в SCSS-переменные и Tailwind-конфигурацию нужен HEX. Конвертер переводит hsl(142, 71%, 45%) в #21C45D — готовый код для background-color, border-color или CSS custom property.

📧 Подготовка цветов для email-рассылки

В email-шаблонах поддержка HSL ограничена: многие почтовые клиенты (Outlook, Gmail) корректно отображают только HEX-коды. Маркетолог использует конвертер, чтобы перевести корпоративные цвета из HSL в надёжный HEX и гарантировать правильное отображение рассылки у всех получателей.

📱 Разработка мобильного приложения

При разработке приложения для iOS и Android дизайнер задаёт цвета в HSL для удобства подбора, а разработчик конвертирует их в HEX для использования в SwiftUI (#-нотация) и Jetpack Compose (0xFF-нотация). Конвертер HSL в HEX упрощает этот рабочий процесс.

Частые вопросы о конвертере HSL в HEX

Что такое цветовая модель HSL и чем она отличается от RGB?

HSL (Hue, Saturation, Lightness) — цветовая модель, где цвет определяется тоном (оттенком по цветовому кругу 0–360°), насыщенностью (0–100%) и яркостью (0–100%). В отличие от RGB, где цвет задаётся смешением красного, зелёного и синего каналов (0–255), HSL более интуитивна для человека: чтобы получить более тёмный или более приглушённый оттенок, достаточно изменить один параметр. RGB удобна для машинной обработки, HSL — для ручного подбора цветов дизайнерами.

Зачем конвертировать HSL в HEX, если CSS поддерживает оба формата?

Хотя CSS действительно поддерживает и HSL, и HEX, HEX-коды остаются стандартом де-факто. Многие дизайн-системы, библиотеки компонентов (Tailwind CSS, Bootstrap), графические редакторы, email-клиенты и конфигурации требуют именно HEX. Кроме того, HEX-коды компактнее, универсальнее и поддерживаются абсолютно везде — в том числе в устаревших браузерах и почтовых клиентах, которые могут игнорировать HSL.

Насколько точна конвертация HSL в HEX в этом инструменте?

Конвертация выполняется математически точно, в соответствии с алгоритмом из спецификации CSS Color Level 4. Единственное ограничение — округление RGB-каналов до целых чисел (0–255), что является стандартным для HEX-формата. Это означает, что два близких HSL-значения могут дать одинаковый HEX-код, но разница будет неразличима для глаза.

Можно ли выполнить обратную конвертацию HEX в HSL?

Да, в нашем конвертере предусмотрена вспомогательная функция обратного перевода. Переключитесь на вкладку "Ввод HEX" и введите шестнадцатеричный код цвета — слайдеры автоматически выставятся на соответствующие HSL-значения. Это удобно, если вы хотите узнать HSL-параметры известного HEX-цвета для последующей корректировки оттенка, насыщенности или яркости.

Поддерживается ли альфа-канал (прозрачность) при конвертации?

Данный конвертер работает с непрозрачными цветами: HSL (без альфа-канала) в 6-значный HEX (#RRGGBB). Если вам нужен HSLA → HEX8 (#RRGGBBAA), эта функция будет доступна в отдельном инструменте. В большинстве задач веб-разработки и дизайна стандартный HSL → HEX покрывает все потребности.

Безопасно ли использовать онлайн-конвертер цветов?

Абсолютно безопасно. Все вычисления выполняются прямо в вашем браузере с помощью JavaScript — никакие данные не отправляются на сервер. Инструмент не требует регистрации, не собирает персональную информацию и работает полностью офлайн после загрузки страницы.

Работает ли конвертер HSL в HEX на смартфоне?

Да, конвертер полностью адаптирован для мобильных устройств. Слайдеры удобно перемещаются на сенсорном экране, интерфейс масштабируется под экраны смартфонов и планшетов. Вы можете быстро подобрать и скопировать HEX-код прямо с телефона — например, работая с макетом вне офиса.

Полезная информация

Для создания согласованной палитры меняйте только яркость (L), сохраняя тон (H) и насыщенность (S) — так вы получите тёмные, средние и светлые оттенки одного цвета.

Насыщенность 0% при любом тоне даёт оттенки серого: от чёрного (L=0%) до белого (L=100%). Это удобно для создания нейтральной палитры.

Комплементарный (дополнительный) цвет легко найти, прибавив 180° к текущему тону: если основной цвет H=210° (синий), комплементарный — H=30° (оранжевый).

HEX-коды с повторяющимися символами (#AABBCC) можно сокращать до 3-значных (#ABC) — это экономит место в коде.

Для UI-дизайна используйте насыщенность 40–70% и яркость 45–55% — такие цвета хорошо читаются и на светлом, и на тёмном фоне.

Сохраняйте часто используемые цвета: конвертер запоминает последние 12 цветов для быстрого доступа.

Комментарии (1)

Был ли полезен этот инструмент?

Руслан Авдеев (автор проекта)• 1 янв. 2024 г., 00:00

Мгновенный перевод цветов из CMYK в HEX-код для веб-дизайна

Перейти к инструменту →