Что конвертирует RGB в HSL
RGB в HSL конвертер переводит CSS-цвет между форматами RGB/RGBA и HSL/HSLA. Страница рассчитана на сценарий, где исходным чаще бывает RGB-значение, но нужно сразу получить HSL-запись, каналы цвета и CSS-строку без ручного пересчета.
Инструмент работает двусторонне: RGB/RGBA можно перевести в HSL/HSLA, а HSL/HSLA — обратно в RGB/RGBA. Если во входной строке есть alpha-канал, он сохраняется при конвертации и выводится как RGBA или HSLA без потери прозрачности.
Когда полезен HSL
HSL представляет цветовую модель RGB через оттенок, насыщенность и светлоту.
$$ \operatorname{HSL} = (H,S,L) $$
Оттенок H задается углом на цветовом круге, насыщенность S и светлота L задаются процентами. Такой формат удобен, когда цвет уже задан для CSS, но нужно отдельно управлять оттенком, чистотой цвета или количеством света.
Поддерживаемый ввод
Страница принимает классические CSS-записи с запятыми и современный CSS Color 4-синтаксис с пробелами и slash для alpha-канала:
- rgb(255, 87, 51);
- rgba(255, 87, 51, 0.5);
- rgb(255 87 51 / 50%);
- hsl(11, 100%, 60%);
- hsla(11, 100%, 60%, 0.5);
- hsl(11 100% 60% / 50%).
Для записи со slash нужен alpha-канал после slash. Например, 50% alpha соответствует половинной непрозрачности.
$$ \alpha = 50\% = 0.5 $$
Как RGB переводится в HSL
RGB-каналы сначала нормализуются в диапазон от 0 до 1.
$$ 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 равна нулю, цвет лежит на серой шкале, а оттенок и насыщенность равны нулю. Иначе насыщенность считается через светлоту.
$$ S=\frac{\Delta}{1-|2L-1|} $$
Оттенок выбирается по каналу, который оказался максимальным, и нормализуется в диапазон от 0 до 360 градусов.
Что возвращает конвертер
- готовую CSS-строку HSL или HSLA при вводе RGB/RGBA;
- готовую CSS-строку RGB или RGBA при вводе HSL/HSLA;
- синхронизированные каналы RGB, HSL и alpha.
Ограничения
Конвертер проверяет диапазоны и неполные записи. Если используется slash-синтаксис, но alpha-канал не указан, ввод нужно исправить. Для HEX, LAB, CMYK, XYZ, OKLCH и других цветовых пространств эта страница не обещает расчет: нужны отдельные инструменты с собственными правилами преобразования.