Enter a target HEX color and get a CSS filter chain that turns a black icon, SVG or PNG into that color. Each result shows the color it really produces and an accuracy score, so you know how close the match is.
Last updated:
3- or 6-digit HEX code, e.g. #E91E63
Keeps it working on icons that are not pure black
Change to get a different (equally valid) filter chain
Enter your values to see the result.
Advertisement
Advertisement
How to use the CSS Color Filter Generator
Enter your target color as a HEX code.
Keep the prefix on unless your icon is guaranteed pure black.
Click Generate and check the accuracy score and the icon preview.
Try a higher effort or another variation if the score is below 95%.
Copy the CSS and apply it to your img, SVG or icon element.
How the CSS filter chain works
Starting from black (0, 0, 0), each function changes the color in a predictable way:
Function
What it does to the color
Range used
invert(x%)
Moves black toward white: each channel becomes x (as a fraction)
0-100%
sepia(x%)
Blends toward a warm brown tone, giving the gray some color
0-100%
saturate(x%)
Multiplies color intensity; large values push toward a vivid hue
0-7500%
hue-rotate(xdeg)
Rotates the hue around the color wheel
0-359deg
brightness(x%)
Scales all channels up or down
0-200%
contrast(x%)
Pushes channels away from or toward middle gray
0-200%
The search uses SPSA (simultaneous perturbation stochastic approximation), a gradient-free optimizer that nudges all six values at once, then polishes the rounded whole numbers so the chain you copy is the one that was scored.
Reading the accuracy score
ΔE2000
Accuracy
What you see
0-1
98-100%
No visible difference
1-2
96-98%
Visible only side by side, to a trained eye
2-5
90-96%
Close; fine for most icons
5-10
80-90%
Noticeably different: try Thorough mode
10+
below 80%
Poor: use another variation
Tips
Filters render in the browser per pixel; anti-aliased edges are colored too, so icons stay smooth.
For hover states, put a second filter on :hover and add transition: filter .2s.
Very light pastels and near-whites are the hardest to hit exactly; Thorough mode usually helps.
Frequently asked questions
How do I change the color of an SVG with a CSS filter?
Apply a filter chain to the element, for example filter: brightness(0) saturate(100%) invert(31%) sepia(...) ... The first two functions make the icon black, and the remaining ones shift black to your target color. This works for SVGs loaded with img tags and for PNG icons, where fill and color cannot be changed.
Why do I need brightness(0) saturate(100%) first?
The chain is calculated starting from pure black. brightness(0) turns any color into black, so adding it first makes the same filter work on gray, colored or white icons. If your icon is already #000000 you can drop it.
Why isn't the color 100% exact?
CSS filters are a chain of fixed math operations and can't reach every color precisely, and the values are rounded to whole numbers. The tool searches for the closest combination and reports the color difference: below ΔE 1 the difference is invisible, below 2 it is barely perceptible.
How is the accuracy score calculated?
The tool simulates the filter chain using the matrices from the W3C Filter Effects specification, converts the result and the target to CIELAB and measures the CIEDE2000 color difference. Accuracy = 100 − 2 × ΔE, capped between 0 and 100%.
Should I use a filter or change the SVG fill?
If you control the SVG markup, setting fill or using fill: currentColor is simpler, exact and cheaper to render. Filters are best when the icon is an img, a background image or a PNG you can't edit.
Does the filter work on colored or transparent parts?
Transparent areas stay transparent, because filters only change color, not alpha. With the prefix every visible pixel becomes the target color, so multi-color icons turn into a single color.
Why do I get a different chain each time I change the variation?
Many different chains produce almost the same color. The search starts from random points, so another variation number can return a different but equally valid filter.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.