Конвертировать HEX в HSL Онлайн
Конвертируйте HEX-цвета в HSL и обратно прямо в браузере.
Зачем это нужно
HEX в HSL: работайте с цветом по-человечески
Интуитивная модель
HSL позволяет легко создавать варианты цвета: светлее, темнее, насыщеннее.
Без интернета
Конвертация в браузере без отправки данных на сервер.
Предпросмотр
Цветовой образец обновляется при вводе для визуальной проверки.
Мгновенно
Результат появляется немедленно при вводе HEX-кода.
Как это работает
Три шага — никаких сложностей
Введите HEX-код
Введите HEX-цвет в формате #RRGGBB или #RGB.
Получите HSL
Инструмент вычисляет оттенок (hue), насыщенность (saturation) и яркость (lightness).
Скопируйте результат
Скопируйте HSL-значение для использования в CSS.
FAQ
Остались вопросы?
HSL ближе к человеческому восприятию цвета. Оттенок (hue, 0-360°) — тип цвета на цветовом круге. Насыщенность (saturation, 0-100%) — интенсивность цвета. Яркость (lightness, 0-100%) — от чёрного (0%) к белому (100%). Чтобы сделать цвет светлее или темнее, достаточно изменить lightness — это намного интуитивнее, чем подбирать RGB.
В CSS Custom Properties: --base: 214, 80%; --primary: hsl(var(--base), 50%); --primary-light: hsl(var(--base), 70%); --primary-dark: hsl(var(--base), 30%). Изменение только lightness при фиксированных hue и saturation создаёт согласованные варианты одного цвета.
Математическое преобразование точно, но из-за округления HEX до целых значений и дробных HSL возможны незначительные отклонения при обратном преобразовании. Например, hsl(9, 100%, 64%) может конвертироваться в #FF634F, а не #FF6347. Это не ошибка — просто округление.
HSV (Hue Saturation Value) и HSB (Hue Saturation Brightness) — одна и та же модель. Главное отличие от HSL: в HSL белый цвет — это lightness=100% при любой насыщенности, в HSV белый — saturation=0% при любом value. Насыщенные цвета в HSL находятся при saturation=100% и lightness=50%, в HSV — при saturation=100% и value=100%.
Да. hsl(hue, saturation%, lightness%) поддерживается во всех браузерах с CSS2.1. CSS Color Level 4 вводит новый синтаксис: hsl(hue saturation% lightness%) без запятых и hsl(hue saturation% lightness% / alpha) для прозрачности. Функция oklch() — современная альтернатива для перцептивно равномерного пространства.
HSL в CSS: модель, практика и CSS Custom Properties
HSL (Hue Saturation Lightness) был добавлен в CSS 3 как альтернатива HEX и RGB для более интуитивной работы с цветом. Авторы спецификации Криис Ликалхи и Яссин Бен Наждалла разработали модель, близкую к тому, как дизайнеры думают о цвете. Тем не менее HSL не является перцептивно равномерным: изменение lightness на одинаковую величину воспринимается по-разному для разных hue.
CSS Custom Properties (переменные) открыли новые возможности для работы с HSL. Паттерн разделения компонентов: --hue: 214; --saturation: 80%; --lightness: 50%; --color: hsl(var(--hue), var(--saturation), var(--lightness)) позволяет динамически изменять отдельные компоненты через JavaScript или медиа-запросы для тёмной темы.
oklch() и oklab() — новые перцептивно равномерные цветовые пространства в CSS Color Level 4. Поддерживаются в Chrome 111+, Safari 15.4+, Firefox 113+. oklch(lightness chroma hue) позволяет интерполировать между цветами с предсказуемым результатом — в отличие от HSL, где интерполяция может давать неожиданные промежуточные цвета.