Jak pokolorować czarny SVG przez CSS bez edycji pliku?
Generator CSS filter chain - wpisujesz docelowy kolor, tool znajduje sekwencję filtrów CSS (invert + sepia + saturate + hue-rotate + brightness + contrast), która zamienia czarny SVG / IMG na ten kolor.
Klasyczna technika od Sosuke (CodePen 2018). Algorytm: simulated annealing z 5 random restarts × 800 iteracji.
Wynik: gotowy "filter:" rule do wklejenia do CSS. Idealny, gdy masz czarny SVG icon i potrzebujesz go w innym kolorze bez edycji pliku.
Jak korzystać
- Wpisz docelowy kolor: HEX, color-picker, lub pipeta z ekranu (Chrome/Edge).
- Klik "Wylicz" - generator iteruje przez kombinacje parametrów (~5-10s) szukając najlepszej. ΔE: <1 = doskonale, 1-3 = dobrze, >3 = zauważalna różnica.
- Demo u dołu pokazuje 3 kafelki: czarny SVG źródło, target-color, czarny SVG z filterem - powinny wyglądać identycznie.
- CSS rule "filter: ..." kopiujesz i wklejasz do CSS. Zastosuj do `<img>`, `<svg>`, `<i>` (ikony).
- Manual slidery na dole pozwalają na ręczne tweakowanie - jeśli wynik jest "zbyt jasny", przesuń brightness; "zbyt czerwony", hue-rotate.
Do czego się przydaje
Gdzie generator filtrów CSS się przydaje - typowe sytuacje:
- Brand-color SVG icons - masz bibliotekę ikon w czerni (Heroicons, Phosphor, Lucide), chcesz pokolorować bez edycji SVG.
- Theme switcher - dark/light mode: jeden czarny SVG, dwie filter rules.
- Material-icons-style coloring - oryginalne Google Material Icons są czarne, z filterem otrzymasz dowolny kolor.
- Hover effects - z filtrem na hover, ikona zmienia kolor bez SVG inline lub ::before tricks.
- Web components - custom elements ze slot-icons, user może podać dowolny background-color.
- Edukacja - zrozum, że CSS filtry to tak naprawdę matrix transforms - hue-rotate + saturate + brightness + contrast = większość edge cases.
Pytania i odpowiedzi
ΔE 2000 to perceptualna miara odległości między dwoma kolorami w przestrzeni Lab. ΔE < 1 = niewidoczna różnica nawet dla wytrenowanego oka. ΔE 1-3 = lekko zauważalna przy zestawieniu obok siebie. ΔE > 5 = wyraźnie różne. Dla CSS filter chain: <1 ideal, <3 produkcyjnie dobre.