Результат
У этой страницы вообще нет серверной части. Вставленная таблица разбирается кодом JavaScript внутри вашего же браузера, график рисуется на элементе canvas на вашей машине, файл экспорта собирается локально. Ничего не загружается, не хранится и не пишется ни в какие логи. После загрузки страницы можно отключить сеть — всё продолжит работать, и это самый простой способ проверить обещание самостоятельно.
Факты и границы применимости
| Оттенок (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?
Нет, это просто другой способ записи того же самого цвета — оба формата описывают одну и ту же точку в цветовом пространстве, просто разными координатами.
Мои данные куда-то отправляются?
Нет, весь расчёт выполняется в вашем браузере.