CSS Filter Generator
Recolor black icons with pure CSS — enter a target color and get a filter chain (invert → sepia → saturate → hue-rotate → brightness → contrast). Perfect for black SVG/PNG icons whose fill you can't touch.
≈ archive Sapphire Radiant Pure
Target
Black + filter
★
Icon example
ΔE 0.1
Effectively identical — no observer would tell them apart.
CSS
filter: invert(50%) sepia(25%) saturate(7440%) hue-rotate(190deg) brightness(100%) contrast(100%);
Lands on rgb(32, 144, 254) (the solver is a stochastic approximation — hit "Try another" if ΔE looks high). Works on pure-black sources; prepend brightness(0) saturate(100%) to force non-black elements to black first.
When to recolor with CSS filters
Third-party black icons, SVGs loaded via <img>, sprite sheets — none of them let you touch fill. A filter chain recolors black at render time with zero asset changes. If your SVG is inline, changing fill/currentColor is always the better option.