How do I color a black SVG via CSS without editing the file?
CSS filter chain generator - type a target color, the tool finds a CSS filter sequence (invert + sepia + saturate + hue-rotate + brightness + contrast) that turns a black SVG / IMG into that color.
The classic Sosuke trick (CodePen 2018). Algorithm: simulated annealing, 5 random restarts × 800 iterations.
Output: a ready "filter:" rule to drop into CSS. Perfect when you have a black SVG icon and need it in another color without editing the file.
How to use it
- Type the target color: HEX, native picker, or screen eyedropper (Chrome/Edge).
- Click "Compute" - generator iterates through parameter combinations (~5-10s) looking for the best match. ΔE: <1 = perfect, 1-3 = good, >3 = noticeable.
- The demo at the bottom shows 3 tiles: black SVG source, target color, black SVG with filter applied - should look identical.
- Copy the `filter: ...` CSS rule and paste into your stylesheet. Apply to `<img>`, `<svg>`, `<i>` (icons).
- Manual sliders below let you fine-tune - if "too bright" nudge brightness, if "too red" nudge hue-rotate.
When this is useful
Where the CSS filter generator pays off - typical scenarios:
- Brand-color SVG icons - you have an icon library in black (Heroicons, Phosphor, Lucide) and want them in your brand color without editing the SVG.
- Theme switcher - dark/light mode: one black SVG, two filter rules.
- Material-icons-style coloring - original Google Material Icons are black, with a filter you get any color.
- Hover effects - filter on :hover changes icon color without inline SVG or ::before hacks.
- Web components - custom elements with slot icons - users pass any background-color.
- Education - realize CSS filters are matrix transforms - hue-rotate + saturate + brightness + contrast covers most edge cases.
Questions and answers
ΔE 2000 is a perceptual distance measure between two colors in Lab space. ΔE < 1 = invisible difference even to a trained eye. ΔE 1-3 = slightly noticeable side by side. ΔE > 5 = clearly different. For a CSS filter chain: <1 ideal, <3 production-grade.