Когда тебе нужно перекрасить иконку в определённый цвет, но у тебя только чёрно-белое PNG или SVG изображение — CSS-фильтры приходят на помощь. Но подбирать вручную нужную комбинацию filter: brightness(), sepia(), hue-rotate() и других — это как гадать по звёздам.

Хорошая новость: есть удобный инструмент — CSS Filter Generator от Bennett Feely, который решает эту проблему за пару секунд.

🔧 Что делает CSS Filter Generator?

Он позволяет подобрать максимально близкое значение CSS-фильтра (filter:), которое визуально превратит чёрную иконку в заданный цвет — например, в #16653F или #FF5722.

Ты просто:

1. Вводишь нужный hex-цвет.
2. Получаешь готовый CSS filter.
3. Вставляешь его в свой стиль — и всё работает.

👉 Ссылка: CSS Filter Generator

---

💡 Когда это полезно?

• Хочешь использовать одну чёрную иконку и менять её цвет под тему (светлая/тёмная).
• У тебя нет SVG или доступа к исходному файлу.
• Нужно окрасить иконку при :hover, :active или другом состоянии.
• Ты хочешь уменьшить количество файлов и не хранить по 5 цветных версий каждой иконки.

Пример использования

Допустим, у тебя есть чёрная иконка:

<img src="icon.png" class="icon" />

Ты хочешь перекрасить её в #16653F. Вводишь этот цвет в CSS Filter Generator и получаешь, например:

.icon {
filter: brightness(0) saturate(100%) invert(20%) sepia(90%) saturate(600%) hue-rotate(100deg);
}

Цвет будет похож, но не 100% точный — это ограничение CSS-фильтров.

Ограничения

• Цвет получается примерный, особенно при сложных оттенках.
• Работает лучше с монохромными иконками (чёрными на прозрачном фоне).
• Лучше избегать при работе с фото или многоцветными изображениями.

---

🚀 Альтернатива — использовать SVG

Если ты можешь использовать inline SVG, то лучше менять цвет через fill:

<svg width="24" height="24" fill="#16653F" xmlns="http://www.w3.org/2000/svg">
  <!-- контуры сюда -->
</svg>

📄 Вывод

CSS Filter Generator — это быстрый и удобный способ перекрашивать PNG/SVG-иконки в CSS. Он снижает количество файлов, ускоряет разработку и отлично подходит для UI с динамическими темами.

Если ещё не пробовал — обязательно закладывай в закладки!