Что такое перевод RGB в HSL?
Модель RGB задаёт цвет, смешивая красный, зелёный и синий свет — каждый канал измеряется по шкале от 0 до 255. Модель HSL описывает тот же самый цвет тремя более наглядными параметрами: тон (Hue — положение цвета на цветовом круге от 0 до 360°), насыщенность (Saturation — насколько цвет яркий, 0–100%) и светлота (Lightness — насколько он светлый или тёмный, 0–100%). Дизайнерам с HSL работать удобнее: меняя светлоту или насыщенность, вы напрямую получаете эффект «светлее», «темнее», «ярче» или «более серый».
Как пользоваться конвертером
Введите значения красного, зелёного и синего каналов вашего цвета — каждое в диапазоне от 0 до 255. Калькулятор моментально выдаст соответствующую тройку HSL, готовую для вставки в CSS в виде hsl(H, S%, L%).
Разбор формулы
Сначала каждый канал нормализуется: его делят на 255, чтобы получить значение от 0 до 1. Обозначим за max и min наибольшее и наименьшее из этих чисел. Светлота вычисляется так: \(L = \frac{max + min}{2}\). Если max равно min, перед нами оттенок серого, поэтому и насыщенность, и тон равны 0. В противном случае насыщенность равна \(\frac{max - min}{2 - max - min}\), когда \(L > 0{,}5\), и \(\frac{max - min}{max + min}\), когда \(L \le 0{,}5\). Тон определяется по тому каналу, который оказался максимальным, и переводится в градусы (0–360).
$$L = \frac{C_{max} + C_{min}}{2}, \quad S = \begin{cases} \dfrac{\Delta}{2 - C_{max} - C_{min}} & L > 0.5 \\[0.6em] \dfrac{\Delta}{C_{max} + C_{min}} & L \le 0.5 \end{cases}$$$$\text{where}\quad \left\{ \begin{aligned} R &= \frac{\text{Red}}{255}, \; G = \frac{\text{Green}}{255}, \; B = \frac{\text{Blue}}{255} \\ C_{max} &= \max(R,G,B), \; C_{min} = \min(R,G,B), \; \Delta = C_{max} - C_{min} \end{aligned} \right.$$$$H = 60^{\circ} \times \begin{cases} \left(\dfrac{G - B}{\Delta}\right) \bmod 6 & C_{max} = R \\[0.7em] \dfrac{B - R}{\Delta} + 2 & C_{max} = G \\[0.7em] \dfrac{R - G}{\Delta} + 4 & C_{max} = B \end{cases}$$
Пример расчёта
Возьмём томатно-красный цвет RGB(255, 99, 71): после нормализации получаем (1,0; 0,388; 0,278). Здесь \(max = 1{,}0\), \(min = 0{,}278\), поэтому \(L = 0{,}639 \to 63{,}9\%\). Так как \(L > 0{,}5\), насыщенность $$S = \frac{1{,}0 - 0{,}278}{2 - 1{,}0 - 0{,}278} = \frac{0{,}722}{0{,}722} = 1{,}0 \to 100\%.$$ Максимальный канал — красный, значит $$H = 60 \times \left(\frac{0{,}388 - 0{,}278}{0{,}722}\right) = 60 \times 0{,}1525 = 9{,}1^{\circ}.$$ Результат: hsl(9, 100%, 64%).
Частые вопросы
Почему у серых цветов тон равен 0? Когда красный, зелёный и синий каналы равны, доминирующего цвета нет, поэтому тон не определён и по соглашению принимается за 0.
HSL и HSV/HSB — это одно и то же? Нет. У HSL и HSV совпадает тон, но насыщенность и третий параметр считаются по-разному. Этот инструмент выдаёт именно HSL.
Можно ли вставить результат прямо в CSS? Да — современные браузеры принимают hsl(9, 100%, 64%) как значение цвета без дополнительных преобразований.
