Что конвертирует инструмент
HSL ↔ RGB конвертер переводит CSS-цвет между форматами \(HSL/HSLA\) и \(RGB/RGBA\). Он подходит для работы с CSS, дизайн-токенами, UI-kit и макетами, когда один и тот же цвет нужно записать в другой цветовой модели без ручного пересчёта.
Инструмент поддерживает классическую запись с запятыми, современный CSS Color 4-синтаксис с пробелами, slash для alpha-канала и единицы оттенка \(deg\), \(rad\), \(grad\), \(turn\). Если прозрачность задана на входе, она сохраняется в результате.
Форматы входа и результата
Для HSL принимаются строки вида:
- \(hsl(220,\ 80\%,\ 56\%)\);
- \(hsla(220,\ 80\%,\ 56\%,\ 0{,}5)\);
- \(hsl(220\ 80\%\ 56\% / 50\%)\).
Для RGB принимаются строки вида:
- \(rgb(64,\ 128,\ 255)\);
- \(rgba(64,\ 128,\ 255,\ 0{,}5)\);
- \(rgb(64\ 128\ 255 / 50\%)\).
Результат выводится как готовая CSS-строка и как разбор каналов: \(R\), \(G\), \(B\), \(H\), \(S\), \(L\), \(alpha\).
Как HSL переводится в RGB
В HSL оттенок \(H\) задаётся углом на цветовом круге, насыщенность \(S\) и светлота \(L\) задаются в процентах. Для расчёта значения переводятся в доли:
$$ s = \frac{S}{100} $$
$$ l = \frac{L}{100} $$
Хрома:
$$ C = \left(1 - |2l - 1|\right)s $$
Промежуточный компонент:
$$ X = C\left(1 - \left|\left(\frac{H}{60} \bmod 2\right) - 1\right|\right) $$
Смещение светлоты:
$$ m = l - \frac{C}{2} $$
По сектору оттенка выбираются промежуточные \(R'\), \(G'\), \(B'\), затем каналы переводятся в диапазон от \(0\) до \(255\):
$$ R = \operatorname{round}\left((R' + m) \cdot 255\right) $$
$$ G = \operatorname{round}\left((G' + m) \cdot 255\right) $$
$$ B = \operatorname{round}\left((B' + m) \cdot 255\right) $$
Как RGB переводится в HSL
RGB-каналы сначала нормализуются:
$$ r = \frac{R}{255}, \quad g = \frac{G}{255}, \quad b = \frac{B}{255} $$
Затем находятся максимум и минимум каналов:
$$ M = \max(r,g,b), \quad m = \min(r,g,b) $$
Светлота:
$$ L = \frac{M + m}{2} $$
Разница каналов:
$$ \Delta = M - m $$
Если \(\Delta = 0\), оттенок и насыщенность равны нулю: цвет находится на серой шкале. Иначе насыщенность считается так:
$$ S = \frac{\Delta}{1 - |2L - 1|} $$
Оттенок выбирается по каналу, который оказался максимальным, и нормализуется в диапазон от \(0^\circ\) до \(360^\circ\).
Alpha-канал
Alpha описывает прозрачность. В CSS обычно используется диапазон:
$$ 0 \leq \alpha \leq 1 $$
Значение \(\alpha = 0\) означает полностью прозрачный цвет, \(\alpha = 1\) — полностью непрозрачный. Если alpha задан в процентах, он переводится в долю:
$$ \alpha = \frac{p}{100} $$
Ограничения
Страница работает только с \(HSL/HSLA\) и \(RGB/RGBA\). Она не конвертирует HEX, HSV/HSB, CMYK, XYZ или LAB: для таких моделей нужны отдельные инструменты.
Результат округляет RGB-каналы до целых значений от \(0\) до \(255\), поэтому обратная конвертация может дать небольшое отличие в десятых долях процента для \(HSL\)-каналов.