Что такое конвертер HSL в HEX?
Этот инструмент переводит цвет из модели HSL — тон (Hue), насыщенность (Saturation) и яркость (Lightness) — в шестнадцатеричную запись, которая используется в CSS, графических редакторах и веб-разработке. Модель HSL удобна для человека: тон выбирает цвет на цветовом круге, насыщенность отвечает за сочность, а яркость — за то, насколько цвет тёмный или светлый. HEX (например, #3F7FBF) — это формат, который реально «понимают» браузеры и инструменты.
Как пользоваться
Укажите тон от 0 до 360 градусов, насыщенность от 0 до 100 процентов и яркость от 0 до 100 процентов — и сразу получите готовый HEX-код, значения каналов RGB и живой образец цвета. Преобразование универсально, подходит для любого цвета и не требует установки программ.
Разбор формулы
Сначала вычисляется цветность (chroma) \(C = (1 - |2L - 1|)\cdot S\), где S и L заданы как доли от 0 до 1. Вспомогательная величина \(X = C\left(1 - \left|\left(\tfrac{H}{60}\bmod 2\right) - 1\right|\right)\) отвечает за плавный переход между основными цветами, а смещение яркости \(m = L - \tfrac{C}{2}\) «приподнимает» результат до нужного уровня светлоты. В зависимости от того, в какой из секторов по 60° попадает тон, каналам (R′,G′,B′) присваиваются значения из C, X и 0. Каждый итоговый канал считается как \(\text{round}((c' + m)\cdot 255)\), а HEX-строка — это просто двузначные шестнадцатеричные значения R, G и B, записанные подряд.
$$\text{Hex} = \texttt{\#}\,\text{HH}_{R}\,\text{HH}_{G}\,\text{HH}_{B}$$
Пример расчёта
Для HSL(210, 50%, 50%): S = 0,5, L = 0,5, поэтому \(C = (1 - |0|)\cdot 0{,}5 = 0{,}5\). H/60 = 3,5, значит (3,5 mod 2) = 1,5 и \(X = 0{,}5\cdot(1 - |0{,}5|) = 0{,}25\). \(m = 0{,}5 - 0{,}25 = 0{,}25\). Тон 210 попадает в сектор 3 (180–240), что даёт (R′,G′,B′) = (0, X, C). Тогда \(R = \text{round}(0{,}25\cdot 255) = 64\), \(G = \text{round}(0{,}5\cdot 255) = 128\), \(B = \text{round}(0{,}75\cdot 255) = 191\) → #4080BF.
Частые вопросы
Замыкается ли тон по кругу? Да — тон 360 — это тот же красный, что и 0, и инструмент приводит любое значение к диапазону 0–360.
Почему канал иногда отличается на единицу? Округление до ближайшего целого может изменить значение канала на ±1 по сравнению с инструментами, которые просто отбрасывают дробную часть. Округление точнее.
Можно ли получить серый? Да — поставьте насыщенность 0 при любом тоне, и все три канала станут равны \(\text{round}(L\cdot 255)\), что даёт нейтральный серый.
