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

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

Тон (0–360°)

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

Яркость (0–100%)

Результатов

Цвет в RGB

rgb(64, 128, 191)

Красный	64
Зелёный	128
Синий	191

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

Этот инструмент переводит цвет из цветовой модели HSL — тон (Hue), насыщенность (Saturation) и яркость (Lightness) — в модель RGB, которую используют экраны, CSS и графические файлы. Модель HSL удобна дизайнерам, потому что она отделяет сам «цвет» (тон) от того, насколько он сочный (насыщенность) и светлый (яркость). RGB же описывает тот же самый цвет как сочетание долей красного, зелёного и синего света. Перевод выполняется точно и работает для любого корректного значения HSL.

The HSL color model: hue (angle), saturation (radius) and lightness (height).

Как пользоваться

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

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

Сначала насыщенность и яркость приводятся к диапазону 0–1. Цветность (хрома) вычисляется так: $$C = (1 - |2L - 1|)\,S$$ — это насыщенность итогового цвета. Вспомогательная величина $$X = C\left(1 - \left|\left(\tfrac{H}{60}\bmod 2\right) - 1\right|\right)$$ отвечает за промежуточный переход внутри каждого 60-градусного сектора тона, а $$m = L - \tfrac{C}{2}$$ сдвигает всё так, чтобы получилась нужная яркость. В зависимости от того, в какой 60-градусный сектор попадает тон, значения C, X и 0 распределяются между R, G и B в определённом порядке. Затем к каждому каналу прибавляется m, результат умножается на 255 и округляется.

How the intermediate values C, X and m build each RGB channel.

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

Возьмём HSL(210°, 50%, 50%): \(S = 0{,}5\), \(L = 0{,}5\).

$$C = (1 - |0|)\cdot 0{,}5 = 0{,}5$$

\(H/60 = 3{,}5\), значит \((3{,}5 \bmod 2) = 1{,}5\), и

$$X = 0{,}5\cdot(1 - |1{,}5 - 1|) = 0{,}25$$$$m = 0{,}5 - 0{,}25 = 0{,}25$$

Тон 210° попадает в сектор 3 (180–240°), поэтому \((R', G', B') = (0,\ X,\ C) = (0;\ 0{,}25;\ 0{,}5)\). Прибавляем m и умножаем на 255: \(R = 64\), \(G = 128\), \(B = 191\) → rgb(64, 128, 191).

A single color shown as its HSL inputs and the resulting RGB output.

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

Какие диапазоны у входных значений? Тон — от 0 до 360 градусов; насыщенность и яркость — от 0 до 100 процентов.

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

Можно ли получить серый цвет? Да — задайте насыщенность 0 и любой тон, и тогда R, G и B окажутся равны значению яркости, приведённому к диапазону 0–255.