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

Что делает этот конвертер и чем он отличается от других

Страница hex-to-hsl принимает шестнадцатеричный цветовой код — полный шестизначный вида #1E90FF или сокращённый трёхзначный #abc — и мгновенно возвращает эквивалент в формате HSL: оттенок (hue) в градусах, насыщенность (saturation) и светлоту (lightness) в процентах. Одновременно отображаются все остальные поддерживаемые форматы (RGB, HSV, CMYK, LAB), так что вы можете скопировать нужное представление без лишних кликов.

Чем эта страница принципиально отличается от других конвертеров? Отличие не техническое — математика везде одна и та же, — а объяснительное. Факт-шит прямо указывает:

• HEX — это сырая RGB-нотация. Шесть шестнадцатеричных цифр (или три в сокращённой записи) напрямую кодируют значения красного, зелёного и синего. Код компактен, широко используется в CSS и графических редакторах, но не интуитивен для осмысленных корректировок.
• HSL построен для человеческого восприятия. Оттенок измеряется в градусах (0–360), насыщенность и светлота — в процентах. Изменение одной только светлоты не меняет оттенок, поэтому HSL — основной формат для создания цветовых палитр и систем тем.
• Нет альфа-канала. Стандартный HEX (шести- или трёхзначный) не несёт информации о прозрачности, и HSL также не включает альфа-компонент. Преобразование всегда работает с полностью непрозрачными цветами.

Таким образом, основная задача страницы — не просто выполнить преобразование, а показать, почему результат в HSL удобнее для человека, и дать контекст через параллельный вывод других форматов.

Как устроен HEX-код: шестизначный и трёхзначный

HEX (hexadecimal) — это способ записи трёх чисел (красный, зелёный, синий) в системе с основанием 16. Каждое число может быть от 0 до 255, что в шестнадцатеричной системе даёт диапазон от 00 до FF.

Шестизначный код вида #RRGGBB:

• #1E90FF означает R = 1E₁₆ = 30₁₀, G = 90₁₆ = 144₁₀, B = FF₁₆ = 255₁₀.
• Если ведущий решётки # опущен (просто 1E90FF), страница всё равно принимает код.

Трёхзначный код — сокращение, когда каждый канал удваивается:

• #abc означает #aabbcc. То есть #a → aa, #b → bb, #c → cc.
• Пример: #abc → R=0xAA=170, G=0xBB=187, B=0xCC=204.

Страница принимает только корректные коды. Если вы введёте #XYZ (где X,Y,Z не шестнадцатеричные цифры) или #1234 (четыре цифры), появится сообщение об ошибке: «Введите HEX-код типа #4f46e5 или #abc.» Обратите внимание: четыре цифры не поддерживаются — только три или шесть.

Структура HSL: оттенок, насыщенность, светлота

HSL (Hue, Saturation, Lightness) — это цветовая модель, которая отделяет цветовую характеристику от яркости и интенсивности.

• Оттенок (Hue) — угол на цветовом круге от 0° до 360°. 0° — красный, 120° — зелёный, 240° — синий. Промежуточные значения дают все остальные цвета. Важно: оттенок не привязан к конкретной яркости — вы можете получить очень тёмный или очень светлый синий, сохраняя оттенок 240°.
• Насыщенность (Saturation) — интенсивность цвета, от 0% (серый, полностью ненасыщенный) до 100% (чистый цвет). Нулевая насыщенность при любой светлоте даёт оттенки серого; оттенок в этом случае теряет значение.
• Светлота (Lightness) — brightness от чёрного (0%) до белого (100%). Светлота 50% соответствует «чистому» цвету максимальной интенсивности.

Именно HSL позволяет разработчику легко создавать варианты одного базового цвета. Например, имея hsl(210°, 100%, 50%) (синий), вы получаете более светлый вариант для фона, уменьшив насыщенность до 30% и подняв светлоту до 80%, или более тёмный для текста, опустив светлоту до 20%. Оттенок остаётся тем же — вам не нужно пересчитывать RGB-соотношения.

Математика преобразования HEX → HSL

Страница выполняет преобразование внутри браузера (никакие данные не отправляются на сервер). Алгоритм стандартный:

1. HEX → RGB. Разбираем шестнадцатеричную строку: для шестизначного кода берём по два символа и переводим в десятичное число. Для трёхзначного — удваиваем каждый символ, затем переводим.

2. RGB → HSL. Формулы (значения R, G, B нормированы к диапазону):

   • Находим max = max(R, G, B), min = min(R, G, B).
   • Светлота: L = (max + min) / 2.
   • Если max == min, оттенок и насыщенность равны 0 (серый цвет).
   • Иначе:
     • Насыщенность: S = (max - min) / (1 - |2L - 1|) (при L > 0.5: S = (max - min) / (2 - max - min); при L ≤ 0.5: S = (max - min) / (max + min)).
     • Оттенок: вычисляется по соотношениям каналов.
       • Если max == R, то H = (G - B) / (max - min) * 60.
       • Если max == G, то H = (B - R) / (max - min) * 60 + 120.
       • Если max == B, то H = (R - G) / (max - min) * 60 + 240.
     • Если H < 0, добавляем 360.

Результат округляется: оттенок до целого градуса, насыщенность и светлота до одного знака после запятой (например, hsl(210°, 78.4%, 54.9%)).

Все эти вычисления не требуют интернета. Вы можете менять HEX-код — все поля (RGB, HSV, CMYK, LAB) обновляются мгновенно.

Дополнительные форматы: RGB, HSV, CMYK, LAB

Кроме HSL, страница показывает один и тот же цвет в четырёх других моделях. Это сделано для того, чтобы вы могли скопировать нужное представление сразу, не переключаясь между инструментами.

• RGB — стандартный для экранов. Значения от 0 до 255. Например, из #4f46e5 → rgb(79, 70, 229).
• HSV (HSB) — Hue, Saturation, Value (Brightness). Похож на HSL, но светлота заменена на яркость (value). Разница: в HSV белый цвет получается при V=100% и S=0%, в HSL белый — при Lightness=100% независимо от насыщенности. HSV часто используют в графических редакторах.
• CMYK — модель для печати. Циановый, пурпурный, жёлтый, чёрный. Страница выводит оценочные значения (на основе преобразования из RGB), которые приблизительны. Важно: CMYK на этой странице — только для справки. Для профессиональной печати требуется калибровка по профилям ICC, поэтому полагаться на эти цифры без проверки на реальном принтере нельзя.
• LAB (CIELAB) — цветовое пространство, разработанное Международной комиссией по освещению (CIE). Оно приближено к человеческому восприятию: L* — светлота (0–100), a* — зелёный/красный, b* — синий/жёлтый. LAB может выходить за пределы видимого RGB-гаммата на экране. Если введённый цвет (через HSL или другой формат) оказывается невоспроизводимым на мониторе, страница автоматически корректирует его до ближайшего отображаемого. При последующем обратном преобразовании такой цвет может немного отличаться от исходного — это нормально.

Кому и зачем нужна эта конвертация

• Фронтенд-разработчики. Макет в Figma или Sketch часто задаёт цвет в HEX. Чтобы в CSS легко менять оттенок при наведении или создавать системные темы, удобнее работать с HSL. Достаточно изменить --color: hsl(...) в одном месте.
• UI/UX дизайнеры, которые мыслят оттенками и светлотой. По HEX трудно на глаз определить, насколько цвет тёплый или холодный. HSL даёт немедленное понимание.
• Специалисты по веб-доступности. Для проверки контрастности по WCAG нужно знать относительную яркость цвета. С HSL легче подобрать тёмный текст на светлом фоне, сохраняя оттенок бренда, — просто уменьшаете светлоту фона на 40–50%. Некоторые аудиторы обращаются к HSL для быстрой оценки.
• Все, кто строит цветовые схемы. HSL-представление позволяет генерировать комплементарные (добавь 180° к оттенку), аналогичные (15–30° в обе стороны) или монохроматические (меняй только светлоту и насыщенность) варианты.

Часто задаваемые вопросы

1. Что произойдёт, если я введу неправильный HEX-код?
Если ввести #GGG (недопустимые символы) или #12345 (пять цифр), страница покажет сообщение: «Введите HEX-код типа #4f46e5 или #abc.» Допустимы только три или шесть шестнадцатеричных цифр, опционально с #.

2. Можно ли использовать трёхзначный код #abc?
Да. Страница автоматически преобразует его в #aabbcc перед вычислениями. Работает для любого допустимого набора из трёх символов (0–9, A–F, a–f).

3. Почему CMYK на этой странице — только оценка?
Потому что преобразование RGB → CMYK без учёта профиля печатного устройства и цветового охвата даёт лишь приближение. Реальные CMYK-значения зависят от типа бумаги, краски, принтера и калибровки. Используйте данные из этого конвертера как отправную точку, но финальные цифры требуют проверки на оборудовании.

4. Почему нет альфа-канала (прозрачности) в HEX и HSL?
Стандартный шестизначный HEX (а также трёхзначный) описывает только непрозрачный цвет. Существует восьмизначный HEX (#RRGGBBAA), но эта страница его не обрабатывает. HSL также не включает альфа-канал в своём определении. Если вам нужна прозрачность, используйте другой инструмент, работающий с HSLA или RGBA.

5. Если я изменю значения HSL и сконвертирую обратно в HEX, результат совпадёт?
В общем случае — да, если итоговый цвет находится внутри RGB-гаммы (т.е. все каналы от 0 до 255). Однако если введённый HSL даёт значения, выходящие за пределы видимого RGB (например, очень высокая насыщенность при крайней светлоте), страница скорректирует цвет к ближайшему воспроизводимому. После этого обратное преобразование может дать HEX, слегка отличающийся от начального. Это особенность цветовых пространств с разными охватами, а не ошибка инструмента.

6. Безопасна ли страница? Отправляются ли мои цвета на сервер?
Все преобразования выполняются непосредственно в вашем браузере (JavaScript). Ни один введённый код не передаётся, не сохраняется и не обрабатывается на сервере. Вы можете использовать страницу даже без подключения к интернету после загрузки.