Что такое конвертер HEX в HSL?
Этот инструмент переводит шестнадцатеричный код цвета (привычная запись #RRGGBB, которую используют в CSS и графических редакторах) в цветовую модель HSL — Hue (тон), Saturation (насыщенность) и Lightness (светлота). Модель HSL часто понятнее, чем HEX или RGB, потому что описывает цвет так, как его воспринимает человек: какой это оттенок (тон), насколько он яркий (насыщенность) и насколько светлый или тёмный (светлота). Конвертер работает с любым цветом на основе RGB и не привязан к какой-либо стране или стандарту, кроме общепринятой записи HEX в пространстве sRGB.
Как пользоваться
Введите HEX-значение цвета, например #3498DB. Символ # в начале можно указать или опустить, а трёхзначную сокращённую запись вроде #0AF конвертер автоматически разворачивает в #00AAFF. На выходе вы получите соответствующую тройку HSL, а также раскодированные значения каналов красного, зелёного и синего (от 0 до 255).
Как работает формула
Сначала HEX-код разбивается на байты красного, зелёного и синего, и каждый из них делится на 255, чтобы привести значение к диапазону от 0 до 1. Обозначим max и min как наибольшее и наименьшее из этих трёх значений. Светлота — это просто их среднее:
$$L = \frac{\max + \min}{2}$$Насыщенность равна 0, когда max совпадает с min (то есть цвет серый). В остальных случаях, если \(L > 0{,}5\), то \(S = \dfrac{\max - \min}{2 - \max - \min}\), иначе \(S = \dfrac{\max - \min}{\max + \min}\). Тон зависит от того, какой канал оказался максимальным, и переводится в градусы умножением на 60.
$$L = \frac{\max + \min}{2}, \quad S = \begin{cases} \dfrac{\max - \min}{2 - \max - \min}, & L > 0.5 \\[0.6em] \dfrac{\max - \min}{\max + \min}, & L \le 0.5 \end{cases}$$$$\text{where}\quad \left\{ \begin{aligned} (R,G,B) &= \frac{\text{RGB from }\text{Hex Color}}{255} \\ \max &= \operatorname{max}(R,G,B),\ \min = \operatorname{min}(R,G,B) \end{aligned} \right.$$$$H = 60^{\circ} \times \begin{cases} \dfrac{G - B}{d} \bmod 6, & \max = R \\[0.6em] \dfrac{B - R}{d} + 2, & \max = G \\[0.6em] \dfrac{R - G}{d} + 4, & \max = B \end{cases} \qquad d = \max - \min$$
Разбор примера
Возьмём #3498DB: \(R = 52\), \(G = 152\), \(B = 219\). После нормализации: \(r \approx 0{,}2039\), \(g \approx 0{,}5961\), \(b \approx 0{,}8588\). \(\max = b = 0{,}8588\), \(\min = r = 0{,}2039\), поэтому \(L = 0{,}5314\) (53,14 %). Так как \(L > 0{,}5\), то
Максимален синий канал, значит
$$H = 60 \times \left(4 + \frac{0{,}2039 - 0{,}5961}{0{,}6549}\right) = 60 \times 3{,}4011 \approx 204{,}07^{\circ}$$Результат: hsl(204, 70%, 53%).
Частые вопросы
Принимает ли конвертер сокращённую запись HEX? Да — трёхзначные коды вроде #F0C разворачиваются автоматически.
Насколько точны значения HSL? Тон, насыщенность и светлота рассчитываются с полной точностью и округляются только для отображения; исходные значения тоже доступны.
Обязателен ли символ #? Нет, конвертер работает со значениями как с ведущим #, так и без него.
