Конвертер цвета HSL в RGB

Введите расчет

Тон (0–360°)

Насыщенность (0–100%)

Светлота (0–100%)

Результатов

Цвет RGB

rgb(102, 153, 204)

Красный	102
Зелёный	153
Синий	204

Что такое конвертер HSL в RGB?

HSL расшифровывается как Hue, Saturation, Lightness — тон, насыщенность и светлота. Это интуитивно понятный способ описания цвета: тон задаётся как угол на цветовом круге (0–360°), насыщенность отражает интенсивность (0–100%), а светлота показывает, насколько цвет светлый или тёмный (0–100%). RGB описывает тот же цвет через три канала — красный, зелёный и синий, каждый со значением от 0 до 255. Именно этот формат используют экраны, CSS и графические файлы. Наш конвертер переводит цвет из HSL в точное соответствие в RGB.

Цветовая модель HSL: тон как угол, насыщенность как расстояние от оси, светлота по вертикальной оси.

Как пользоваться конвертером

Введите тон в градусах, насыщенность в процентах и светлоту в процентах. Калькулятор сразу выдаст соответствующую тройку rgb(r, g, b) и покажет образец цвета, чтобы вы могли убедиться в результате визуально.

Разбор формулы

Сначала переведите S и L в доли (0–1). Цветность определяет, насколько цвет «сочный»: $$C = (1 - |2L - 1|)\cdot S$$ Промежуточная составляющая равна $$X = C\cdot\left(1 - \left|\left(H/60 \bmod 2\right) - 1\right|\right)$$ а корректирующее значение \(m = L - C/2\) сдвигает всё к нужной светлоте. Тон делится на шесть секторов по 60°; в каждом секторе значения C, X и 0 распределяются по каналам R, G и B в определённом порядке. В конце к каждому компоненту прибавляется m, результат умножается на 255 и округляется до ближайшего целого.

Пример расчёта

Для HSL(210°, 50%, 60%): \(S = 0{,}5\), \(L = 0{,}6\). $$C = (1 - |1{,}2 - 1|)\times 0{,}5 = (1 - 0{,}2)\times 0{,}5 = 0{,}4$$ \(H/60 = 3{,}5\), поэтому $$X = 0{,}4\times\left(1 - |3{,}5 \bmod 2 - 1|\right) = 0{,}4\times(1 - 0{,}5) = 0{,}2$$ \(m = 0{,}6 - 0{,}2 = 0{,}4\). Сектор 3 (\(3 \le H/60 < 4\)) даёт \((R', G', B') = (0,\ X,\ C) = (0;\ 0{,}2;\ 0{,}4)\). Прибавляем m: $$(0{,}4;\ 0{,}6;\ 0{,}8)\times 255 = (102,\ 153,\ 204)$$

Пример преобразования показывает исходное значение HSL и полученный образец цвета RGB.

Частые вопросы

Почему значения RGB округлены? Каналы RGB — это целые числа от 0 до 255, поэтому полученные после масштабирования значения округляются до ближайшего целого.

Что получится при насыщенности 0%? Полностью обесцвеченный цвет превращается в оттенок серого, который зависит только от светлоты — все три канала RGB будут равны между собой.

Что будет, если тон больше 360? Тон берётся по модулю 360, поэтому 370° ведёт себя так же, как 10°.