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