Wie färbe ich ein schwarzes SVG per CSS ein, ohne die Datei zu ändern?
CSS-Filter-Chain-Generator - tippe eine Zielfarbe ein, das Tool findet eine CSS-Filter-Sequenz (invert + sepia + saturate + hue-rotate + brightness + contrast), die ein schwarzes SVG / IMG in diese Farbe verwandelt.
Der klassische Sosuke-Trick (CodePen 2018). Algorithmus: Simulated Annealing, 5 Zufalls-Restarts × 800 Iterationen.
Ausgabe: eine fertige "filter:"-Regel zum Einsetzen ins CSS. Perfekt, wenn du ein schwarzes SVG-Icon hast und es ohne Dateibearbeitung in einer anderen Farbe brauchst.
So nutzt du das Tool
- Tippe die Zielfarbe ein: HEX, nativer Picker oder Bildschirm-Pipette (Chrome/Edge).
- Klick "Berechnen" - der Generator iteriert durch Parameterkombinationen (~5-10s) und sucht den besten Match. ΔE: <1 = perfekt, 1-3 = gut, >3 = wahrnehmbar.
- Die Demo unten zeigt 3 Kacheln: schwarzes SVG-Quellbild, Zielfarbe, schwarzes SVG mit angewandtem Filter - sollte identisch aussehen.
- Kopiere die `filter: ...`-CSS-Regel und füge sie in dein Stylesheet ein. Anwenden auf `<img>`, `<svg>`, `<i>` (Icons).
- Manuelle Schieberegler darunter erlauben Feinjustierung - wenn "zu hell", zieh an Brightness, wenn "zu rot", zieh an Hue-Rotate.
Wann das hilfreich ist
Wo sich der CSS-Filter-Generator lohnt - typische Szenarien:
- SVG-Icons in Markenfarbe - du hast eine Icon-Library in Schwarz (Heroicons, Phosphor, Lucide) und willst sie in deiner Markenfarbe ohne SVG-Bearbeitung.
- Theme-Switcher - Dark-/Light-Mode: ein schwarzes SVG, zwei Filter-Regeln.
- Material-Icons-Stil-Färbung - die originalen Google Material Icons sind schwarz, mit einem Filter bekommst du jede Farbe.
- Hover-Effekte - Filter beim :hover ändert die Icon-Farbe ohne Inline-SVG- oder ::before-Hacks.
- Web Components - eigene Elemente mit Slot-Icons - Nutzer übergeben beliebige background-color.
- Schulung - merk dir, dass CSS-Filter Matrix-Transformationen sind - hue-rotate + saturate + brightness + contrast decken die meisten Edge Cases ab.
Fragen und Antworten
ΔE 2000 ist ein perzeptuelles Distanzmaß zwischen zwei Farben im Lab-Raum. ΔE < 1 = unsichtbarer Unterschied selbst für ein geschultes Auge. ΔE 1-3 = leicht wahrnehmbar im direkten Vergleich. ΔE > 5 = klar unterschiedlich. Für eine CSS-Filter-Chain: <1 ideal, <3 produktionsreif.