Результат
Все вычисления выполняются локально в браузере: разбор, график, экспорт. Если отключите сеть, страница продолжит работать.
Факты и границы применимости
| Диапазон каждого канала | От 0 до 255 включительно |
|---|---|
| Оттенок (H) | От 0 до 360 градусов |
| Насыщенность и светлота | От 0% до 100% |
| Округление | Все значения RGB и результата округляются до целого |
Когда этот метод вводит в заблуждение
- Значения вне диапазона 0–255 автоматически ограничиваются этими границами, а не отклоняются с ошибкой.
- У чисто серых цветов (R=G=B) насыщенность равна нулю, а оттенок математически не определён — конвертер в этом случае показывает 0°, что является условностью, а не содержательным значением.
- Округление входных RGB-значений до целого перед расчётом может привести к тому, что очень близкие, но не идентичные оттенки серого дадут одинаковый результат HSL.
- Результат — это просто другая запись тех же чисел, а не другое цветовое пространство: HSL не содержит дополнительной информации о цветовом профиле по сравнению с RGB.
Как это считается
Значения R, G и B нормализуются к диапазону от 0 до 1 делением на 255.
Светлота вычисляется как среднее между максимальным и минимальным из трёх каналов.
Если максимум и минимум равны, насыщенность и оттенок равны нулю (серый цвет); иначе насыщенность вычисляется через разницу между максимумом и минимумом относительно светлоты, а оттенок — через то, какой канал оказался максимальным.
Полученные доли переводятся в градусы (0–360) и проценты (0–100) и округляются до целого числа.
Вопросы и ответы
Почему у серого цвета оттенок 0°?
При нулевой насыщенности оттенок математически не определён — 0° это просто условность, любое значение при такой насыщенности выглядит одинаково.
HSL точнее RGB?
Нет, это просто другой способ описать тот же самый цвет — оба формата задают одну и ту же точку в цветовом пространстве.
Можно вводить дробные значения RGB?
Да, но перед расчётом они округляются до ближайшего целого в диапазоне 0–255.
Мои данные куда-то отправляются?
Нет, весь расчёт выполняется в вашем браузере.