Tools › CSS Filter for SVG

CSS filter for recoloring SVG icons

Enter any HEX color — get a ready CSS filter to recolor SVG icons and images right in your browser, without a code editor.

Target color
Preview
fill
info
star
check
On different backgrounds:
CSS Filter
Usage example
Filter value only

Why you need this

SVG icons often have a fixed black color. To recolor them via CSS without editing the SVG file, the filter property is used with a combination of invert, sepia, saturate, hue-rotate and brightness functions.

How the algorithm works

The tool uses a numerical optimization method (SPSA) to find the optimal CSS filter combination. The algorithm tries thousands of variants and selects the one where the resulting color is closest to the target.

Limitations

CSS filter only works for elements with an original black color (#000000). If the icon is a different color — first add invert(1) or set it to black via fill in CSS. Accuracy is usually ±5 RGB units.

FAQ
What elements does CSS filter work with?
CSS filter for recoloring works with any HTML elements — img, svg, div. Especially useful for recoloring SVG icons loaded via img tag, when you can't change fill directly.
Why must the icon be black originally?
The filter algorithm works from black as the zero point. If the icon is white — add invert(1) to the beginning of the filter. If another color — it's better to change fill in the SVG itself.
How accurate is the result?
Accuracy is usually ±3-8 units per RGB channel. For most tasks this is sufficient — the difference is barely noticeable on screen. The accuracy card shows how close the result is.
Is this tool free?
Yes, completely free with no limits. No registration required, everything runs in your browser.

More color tools

Color PickerUpload a photo and click anywhere — get HEX, RGB, HSL and color name Palette from ImageExtract 5–8 dominant colors from any image Palette BuilderGenerate N colors with guaranteed text readability Color HarmoniesComplementary, analogous, triadic and split-complementary Color VariationsLighter, darker, more saturated, paler, warmer, cooler Gradient GeneratorCreate beautiful gradients and copy the CSS code WCAG ContrastCheck AA and AAA accessibility — free Color Blindness SimulatorHow colors look to people with protanopia, deuteranopia and other types Tailwind ConverterNearest Tailwind class for any HEX color Color ConverterHEX ↔ RGB ↔ HSL ↔ CMYK instantly, with one-click copy Color by NameFind HEX by name — "terracotta", "indigo", "azure" Color PalettesCurated palettes by theme — click a color to copy HEX