Перейти к содержимому
Все инструментыЛичный кабинет
🎨

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

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

Инструмент справился с вашей задачей?

Одно нажатие, без регистрации. По ответам мы решаем, какие инструменты дорабатывать первыми.

Ваш ответ здесь будет первым.

Этот инструмент ещё ждёт первого комментария

Нашли приём, остался вопрос или чего-то не хватило — напишите, пригодится следующим. Почту и пароль указывать не нужно · публикуем после проверки, обычно за 1–2 дня · если вам ответят, ответ появится здесь же

Конвертер 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

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

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

    1

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

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

    2

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

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

    3

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

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

    4

    Скопируйте 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). Если вам нужен HEX с прозрачностью (#RRGGBBAA), переведите цвет в RGBA и воспользуйтесь конвертером «RGBA в HEX» — он выдаёт восьмизначный HEX. В большинстве задач веб-разработки и дизайна стандартный 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–2 дня · если вам ответят, ответ появится здесь же

    • Руслан АвдеевОт автора проекта
      Все инструменты на ToolFox бесплатны, и я их дорабатываю сам. Напишите, если инструмент считает неверно, чего-то не хватает или что-то стоит поправить, — по таким комментариям я и решаю, чем заняться дальше.

    Комментарии — мнения посетителей, прошедшие проверку по правилам сайта.