Результат
Все вычисления выполняются локально в браузере: разбор, график, экспорт. Если отключите сеть, страница продолжит работать.
Факты и границы применимости
| Оттенок (H) | Любое число — приводится по модулю 360, отрицательные значения обрабатываются циклически |
|---|---|
| Насыщенность и светлота | Ограничиваются диапазоном от 0% до 100% |
| Формат результата | #RRGGBB — шесть шестнадцатеричных цифр, буквы в верхнем регистре |
| Промежуточный шаг | HSL сначала переводится в RGB, затем RGB — в HEX |
Когда этот метод вводит в заблуждение
- Оттенок вне диапазона 0–360 не считается ошибкой — он приводится по модулю 360 (например, 400° эквивалентно 40°, а −30° эквивалентно 330°), поскольку цветовой круг циклический.
- Насыщенность и светлота вне диапазона 0–100% автоматически ограничиваются этими границами.
- Перевод идёт в два математических шага (HSL → RGB → HEX), и на этапе RGB происходит округление до целых чисел от 0 до 255 — из-за этого обратный перевод получившегося HEX обратно в HSL может дать значения, на доли процента отличающиеся от введённых изначально.
- При насыщенности 0% оттенок не влияет на результат вообще — любое значение H даёт один и тот же серый цвет, определяемый только светлотой.
Как это считается
Оттенок приводится к диапазону 0–360° и переводится в долю от 1 (деление на 360), насыщенность и светлота переводятся из процентов в доли от 0 до 1.
По стандартной формуле HSL → RGB вычисляются три вспомогательных значения на основе светлоты и насыщенности, а затем для каждого из трёх цветовых каналов (red, green, blue) берётся своя точка на цветовом круге со сдвигом на треть оборота.
Каждый из трёх полученных каналов переводится из доли (0–1) обратно в диапазон 0–255 и округляется до целого числа.
Три канала переводятся в шестнадцатеричный формат так же, как в конвертере RGB в HEX, и соединяются в итоговый код с символом «#» впереди.
Вопросы и ответы
Что если ввести оттенок больше 360 или отрицательный?
Он автоматически приводится по модулю 360 — цветовой круг циклический, поэтому 400° и −320° дают тот же результат, что и 40°.
Почему при насыщенности 0% результат всегда серый?
При нулевой насыщенности оттенок математически не влияет на цвет — получается оттенок серого, зависящий только от светлоты.
Результат точно совпадёт при обратном переводе HEX в HSL?
Почти всегда да, но из-за округления на промежуточном шаге в RGB возможны расхождения на доли процента в насыщенности или светлоте.
Мои данные куда-то отправляются?
Нет, весь расчёт выполняется в вашем браузере.