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