Инструменты › CSS Filter для SVG

CSS filter для
перекраски SVG-иконок

Введи любой HEX-цвет — получи готовый CSS filter для перекраски SVG-иконок и изображений прямо в браузере, без редактора кода.

Целевой цвет
Предпросмотр
fill
info
star
check
На разных фонах:
CSS Filter
Пример использования
Только filter значение

Зачем это нужно

SVG-иконки часто имеют фиксированный чёрный цвет. Чтобы перекрасить их через CSS без редактирования SVG-файла, используется свойство filter с набором функций invert, sepia, saturate, hue-rotate и brightness.

Как работает алгоритм

Инструмент использует метод бинарного поиска для подбора оптимальной комбинации CSS-фильтров. Алгоритм перебирает тысячи вариантов и выбирает тот, при котором результирующий цвет максимально близок к целевому.

Ограничения метода

CSS filter работает только для элементов с исходным чёрным цветом (#000000). Если иконка другого цвета — сначала добавь invert(1) или покрась её в чёрный через fill в CSS. Точность обычно составляет ±5 единиц RGB.

Часто задаваемые вопросы
Для каких элементов работает CSS filter?
CSS filter для перекраски работает с любыми HTML-элементами — img, svg, div. Особенно удобно для перекраски SVG-иконок подключённых через img тег, когда нельзя менять fill напрямую.
Почему иконка должна быть чёрной изначально?
Алгоритм фильтров работает от чёрного цвета как от нуля. Если иконка белая — добавь invert(1) в начало фильтра. Если другого цвета — лучше изменить fill в самом SVG.
Насколько точен результат?
Точность обычно составляет ±3-8 единиц по каждому каналу RGB. Для большинства задач этого достаточно — на экране разница практически незаметна. Карточка точности показывает насколько близок результат.
Инструмент бесплатный?
Да, полностью бесплатно и без ограничений. Без регистрации, всё работает прямо в браузере.