Онлайн-инструмент HSL-фильтров изображения

Что именно делают фильтры

Инструмент применяет к целому изображению три глобальных CSS-фильтра в строгом порядке: hue-rotate, затем saturate, затем brightness. Это не перекодирование изображения в модель HSL: несмотря на название инструмента, третий параметр управляет CSS-яркостью brightness, а не светлотой HSL.

На странице доступны три числовых поля: оттенок (-360..360°, по умолчанию 0), насыщенность (0..200%, по умолчанию 100%) и яркость (0..200%, по умолчанию 100%). Пустое или нечисловое поле считается нейтральным, а введённые числа автоматически ограничиваются рабочим диапазоном.

Порядок обработки и рабочий пример

Из значений собирается цепочка фильтров. Если заданы оттенок 45, насыщенность 150 и яркость 80, браузер получит hue-rotate(45deg) saturate(150%) brightness(80%). Для кадра с нейтральным серым, тканью и кожей это даст заметный сдвиг по цветовому кругу, плотный цвет и некоторое затемнение.

Граничные случаи проверены на реализации: оттенок 500 будет ограничен до 360, насыщенность -20% — до 0%, яркость 250% — до 200%. При насыщенности 0% изображение становится чёрно-белым; при яркости 0% пиксели становятся чёрными RGB-значениями, но размеры кадра сохраняются.

Ограничения инструмента

• Живого автоматического предпросмотра нет: после изменения параметров обязательно нажимайте «Сгенерировать изображение».
• Фильтры применяются только ко всему изображению целиком. Канальные кривые, гистограмма, локальные маски, кисть и выделение областей не предусмотрены.
• Нет автоматического баланса белого, работы с ICC-профилями или RAW-файлами.
• Сильное повышение насыщенности или яркости может обрезать цветовые детали в светах и тенях.
• Готовый файл сохраняется только в формате PNG; размеры изображения не изменяются.

Проверка результата

Перед заменой оригинала откройте скачанный PNG и сравните его с исходником. Практический чек-лист:

• Посмотрите нейтральные объекты: светлая стена или серый фон могут получить цветной оттенок после hue-rotate.
• Оцените кожу и узнаваемые цвета бренда — они первыми показывают сильное смещение.
• Если светлые участки выглядят «выбитыми», уменьшите насыщенность или яркость.
• Проверьте резкость и границы объектов: сам фильтр не меняет резкость, но пересвет может скрыть мелкие детали.
• Помните, что точный RGB-результат зависит от реализации CSS-фильтров браузера.

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

Почему при яркости 0% картинка становится полностью чёрной?

CSS-фильтр brightness(0%) приводит все пиксели к чёрному RGB-значению, сохраняя ширину и высоту изображения. Это не то же самое, что обнуление светлоты в модели HSL, при котором изображение осталось бы видимым, но очень тёмным.

Как получить чёрно-белое изображение?

Установите насыщенность на 0%, оставьте оттенок любым и нажмите «Сгенерировать изображение». После применения saturate(0%) хроматическая информация обнуляется, и оттенок практически не влияет на итог.

Что произойдёт при вводе значений за пределами диапазонов?

Числа будут ограничены допустимыми границами: оттенок от -360 до 360, насыщенность и яркость от 0 до 200. Пустые или нечисловые поля получит нейтральные значения — 0, 100%, 100% — без предупреждения.