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

Что делает эта страница и чем она отличается

Эта страница — специализированный конвертер цвета из модели HSL (Hue, Saturation, Lightness) в шестнадцатеричный код (HEX). Вы вводите hue (оттенок) в градусах от 0 до 360, saturation (насыщенность) в процентах и lightness (светлоту) в процентах — и мгновенно получаете эквивалент в формате #RRGGBB (например, #1E90FF). Результат обновляется по мере ввода или выбора цвета.

Главное отличие от обычных универсальных конвертеров в том, что страница полностью посвящена именно паре HSL → HEX. HSL была разработана как модель, удобная для человеческого восприятия: изменение только светлоты сохраняет оттенок, что делает её незаменимой при генерации палитр и тем. HEX, в свою очередь, представляет цвет как шестизначную (или трёхзначную сокращённую) запись RGB, без альфа-канала в стандартной форме. Преобразование между HSL и HEX происходит прямо, без потерь, в пределах цветового охвата sRGB, в отличие от конверсий через LAB или CMYK, которые могут потребовать отсечения цветов, выходящих за границы гаммы.

Как работает преобразование: от HSL к RGB и затем к HEX

В основе конвертации лежит математически строгий алгоритм, описанный в спецификациях CSS (CSS Color Module Level 4) и стандартах W3C. HSL не является самостоятельным цветовым пространством в физическом смысле — это цилиндрическое представление RGB. То есть любой цвет, заданный в HSL, сначала пересчитывается в трёхканальную RGB-модель, а уже из неё — в HEX.

Формула преобразования для сегментов hue (h от 0 до 360) с учётом насыщенности s (0–1) и светлоты l (0–1) выглядит так:

1. Вычисляется промежуточная величина c = (1 - |2l - 1|) * s — хрома, насыщенность с учётом светлоты.
2. Определяется x = c * (1 - |(h / 60) % 2 - 1|).
3. Находится m = l - c / 2.
4. В зависимости от диапазона h (0–60, 60–120, …) выбираются (R', G', B') без учёта сдвига:
   • h ∈ [0, 60): (c, x, 0)
   • h ∈ [60, 120): (x, c, 0)
   • h ∈ [120, 180): (0, c, x)
   • h ∈ [180, 240): (0, x, c)
   • h ∈ [240, 300): (x, 0, c)
   • h ∈ [300, 360): (c, 0, x)
5. Финальные значения R, G, B = (R'+m)*255, (G'+m)*255, (B'+m)*255, округлённые до целого.

Затем каждое из трёх чисел (0–255) переводится в двузначную шестнадцатеричную форму с ведущим нулём. Например, R=79 → 0x4F → 4F. Полные три пары дают шестизначный код. Если все три числа кратны 17 (то есть могут быть представлены одним шестнадцатеричным разрядом от 0 до 15), возможно сокращение до трёх символов: #4f46e5 → R=79=0x4F, G=70=0x46, B=229=0xE5 — здесь 70 не кратно 17, поэтому сокращённая форма недоступна. А вот цвет #aabbcc можно записать как #abc.

Входные данные: как правильно вводить HSL и какие ошибки возникают

Ввод состоит из трёх чисел: hue (0–360), saturation (0–100%) и lightness (0–100%). Пример корректного ввода: 243, 75%, 59%. Регистр символов и пробелы не имеют значения, но знак процента обязателен для насыщенности и светлоты — иначе парсер не сможет корректно интерпретировать значения.

Если вы введёте данные вне допустимого диапазона или с нарушением формата, на странице появится сообщение об ошибке: «Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%». Типичные ошибки:

• Указание насыщенности без знака %, например 50 вместо 50%.
• Hue меньше 0 или больше 360 (допустимы дробные значения, например 243.5, но они должны быть в пределах).
• Пропуск запятой или неправильный порядок.
• Смешивание градусов и процентов без явного указания единиц для hue (градусы не пишутся, просто число).

Инструмент не пытается угадать — он строго проверяет формат. При любом нарушении вы увидите ту же ошибку, и HEX-код обновится только после исправления. Все проверки выполняются на вашем устройстве, данные никуда не отправляются.

Выходные данные: HEX-код и сопутствующие цветовые модели

Основной результат — шестизначный HEX-код с решёткой (например, #4f46e5). Если цвет допускает трёхзначную запись, она отображается дополнительно (например, #abc). Это удобно для компактного CSS — браузеры поддерживают обе формы как эквивалентные.

Одновременно обновляются все остальные цветовые поля: RGB (каналы от 0 до 255), HSV, CMYK и LAB. Важно понимать:

• RGB — промежуточное представление, из которого собран HEX.
• HSV — близкая к HSL модель, но с Brightness вместо Lightness.
• CMYK — приводится как оценка для экрана и не является точным индикатором для печати. Профессиональные типографии используют другие профили и ICC-профиля.
• LAB — аппаратно-независимое пространство, вычисляемое через XYZ. Оно показывается для справки, но преобразование HSL → LAB может давать цвета, которые при обратном переводе в sRGB не совпадут из-за гаммы; для HSL → HEX такого не происходит.

Редактирование любого из этих полей (если страница это позволяет) также мгновенно пересчитывает все остальные. Функциональность завязана на целостность данных: вы можете «ударить» по полю LAB, но начальное значение было строго получено из HSL, поэтому замкнутая цепочка остаётся точной.

Для кого создан этот инструмент и как его применять

Основные группы пользователей:

1. Дизайнеры, которые работают с палитрами в HSL (например, в Figma, Sketch, Adobe XD). Собирая цветовую схему через изменение светлоты, они получают HEX-коды для вёрстки или кода.
2. Фронтенд-разработчики, получающие из дизайн-макетов HSL-значения и нуждающиеся в корректном HEX для CSS-свойств background-color, color, border-color и т.д.
3. Все, кто подбирает темы или проверяет контрастность (accessibility). Изменяя только lightness в HSL (например, с 50% на 70%), можно сохранить оттенок и управлять яркостью фона, а затем получить точный HEX для вставки в код. Это прямое применение WCAG 2.1, где контраст считается между двумя цветами по относительной яркости — HSL даёт удобный способ варьировать светлоту, не меняя цвет.

Ограничения и нюансы

• HEX без альфа-канала. Стандартный шестизначный HEX не содержит прозрачности. Если требуется прозрачность, используют восьмизначный HEX (#RRGGBBAA) или CSS-функцию rgba(). Данная страница выводит только шестизначную форму; альфа-сведения не обрабатываются.
• CMYK – оценочный. Указано в факт-шите: CMYK на экране — это приблизительный пересчёт по стандартным формулам без учёта конкретного профиля принтера и бумаги. Для профессиональной печати всегда используйте управление цветом и ICC-профили.
• Всё происходит локально. Код полностью выполняется в браузере; никакие данные не покидают ваше устройство. Это гарантирует конфиденциальность, но и означает, что для работы не требуется интернет после загрузки страницы.
• Никакого выхода за гамму. Преобразование HSL → HEX остаётся в пределах sRGB — цвета, которые в HSL выглядят как чистые, могут быть вне гаммы sRGB? Нет, потому что HSL определяется через лежащее в основе sRGB. Любое допустимое значение HSL (0–360 / 0–100% / 0–100%) даёт корректный RGB-цвет в sRGB. Поэтому никакого отсечения не происходит, в отличие от конвертации, скажем, из LAB.

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

1. Почему мой HEX-код перестал обновляться?
Проверьте правильность ввода. Скорее всего, вы пропустили знак процента у насыщенности или светлоты (например, написали 243, 75, 59 вместо 243, 75%, 59%). Также убедитесь, что hue лежит в диапазоне 0…360.

2. Могу ли я использовать сокращённый трёхзначный HEX из этого инструмента в CSS?
Да, если он отображается. Трёхзначная форма (#abc) распознаётся всеми современными браузерами как #aabbcc. Она используется, когда каждый канал кратен 17 (например, 0x00, 0x11, …, 0xFF). Страница показывает сокращённую запись только в этом случае.

3. Почему CMYK-значения на экране не совпадают с тем, что даёт мой принтер?
Потому что CMYK-вывод на странице — упрощённая математическая модель (например, пересчёт по формулам Нойгебауэра или подобным). Она не учитывает ICC-профиль вашего принтера, тип бумаги, чернила и другие факторы. Для точной печати нужно использовать профессиональный софт и калиброванные профили.

4. Поддерживает ли инструмент углы Hue больше 360?
Нет. Диапазон строго 0–360. Значение 400, например, недопустимо. Если вам нужно повторить оттенок, используйте модуль 360.

5. Как перевести обратно, из HEX в HSL?
Этот инструмент предназначен только для прямого преобразования (HSL → HEX). Для обратного используйте соответствующую страницу сайта (HEX to HSL). Вручную можно перевести HEX → RGB (подставить пары в десятичную систему), а затем применить формулу преобразования RGB → HSL.

6. Что произойдёт, если я введу hue дробным числом, например 243.7?
Это валидное значение. Hue может быть дробным. Страница корректно пересчитает его в RGB, округлив каналы до целых (0–255). Разница между 243 и 243.7 незаметна глазу, но может быть технически значима при точной настройке.

---

Статья написана по материалам факт-шита и описывает только функционал страницы hsl-to-hex. Все примеры, числа и правила взяты из него.