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

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

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

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

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

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

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

Инструмент использует метод численной оптимизации (SPSA) для подбора оптимальной комбинации 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. Для большинства задач этого достаточно — на экране разница практически незаметна. Карточка точности показывает насколько близок результат.
Инструмент бесплатный?
Да, полностью бесплатно и без ограничений. Без регистрации, всё работает прямо в браузере.

Другие инструменты

Цвет по фотоЗагрузи фото и кликни в любую точку — получи HEX, RGB, HSL и название Палитра из фотоИзвлекаем 5–8 доминирующих цветов из любого изображения Палитра для проектаПодбери N цветов с гарантированной читаемостью текста Сочетания цветовКомплементарные, аналоговые, триадные и сплит-комплементарные Вариации цветаСветлее, темнее, насыщеннее, бледнее, теплее, холоднее Генератор градиентовСоздавай красивые градиенты и копируй готовый CSS-код Контраст WCAGПроверка доступности AA и AAA — бесплатно Симулятор дальтонизмаКак цвета видят люди с протанопией, дейтеранопией и другими типами Tailwind-конвертерБлижайший Tailwind-класс для любого HEX-цвета Конвертер цветовHEX ↔ RGB ↔ HSL ↔ CMYK мгновенно, с копированием кода Цвет по названиюНайди HEX по названию — «терракота», «индиго», «лазурный» Палитры цветовГотовые палитры по темам — клик по цвету копирует HEX