Color & CSS
CSS Filter Generator
Loading the tool…
Find the CSS filter that recolors a black icon to a color you choose, or adjust blur, brightness, contrast and more with sliders and copy the result.
How to use this tool
Choose Match a color to turn a black icon into a color you pick, or Adjust filters to build a filter with sliders.
To match a color, enter a hex, rgb or hsl value, use the picker, or choose an example. Keep Work on any color of icon on unless your icon is already black. For sliders, start from a look such as Vintage and move them while watching the sample.
Check how close the color is, then press Copy CSS and paste the filter line into your stylesheet.
How to use this tool
Choose Match a color to turn a black icon into a color you pick, or Adjust filters to build a filter with sliders.
To match a color, enter a hex, rgb or hsl value, use the picker, or choose an example. Keep Work on any color of icon on unless your icon is already black. For sliders, start from a look such as Vintage and move them while watching the sample.
Check how close the color is, then press Copy CSS and paste the filter line into your stylesheet.
Was this tool helpful?
Suggest an improvementHelp keep ConduitTools free
Every tool here is free, private and built by a solo developer. If this one saved you time, a small tip keeps the site running and new tools coming.
Recolor an icon without editing the file.
A CSS filter cannot set a color directly, but a chain of filters can turn black into almost any color. This finds the chain for you, and also builds ordinary filters by eye.
- Match a color
- Enter a hex code, an rgb or hsl value or a color name and get a filter that turns a black shape into that color. It shows the color the filter really makes, and how far off it is.
- Adjust filters
- Nine sliders, from blur to sepia, with a sample beside the original. Start from a look such as Vintage or Grayscale, and only the filters you change appear in the CSS.
- Works with any icon
- The match starts with brightness(0) saturate(100%), which turns whatever the icon was into black first. Turn it off if your icon is already black.
Frequently asked questions
Why is the color only close, not exact?
A filter chain has six numbers to reach three color values, and the browser rounds them. Most colors come out within a few points of the target, which is hard to see. If it says noticeably different, use an SVG with fill, or a CSS mask, for an exact match.
Will it work on a white or colored icon?
Yes, if you keep the first option on. It adds brightness(0) saturate(100%) at the start, which turns any color into black before the rest of the filter runs.
Does it give the same filter every time?
In the same browser, yes. The search starts from the color you enter and uses no randomness, so the same color always gives the same filter. Browsers can differ in the last decimal of some calculations, so a different browser may write slightly different numbers that make the same color.
Does a filter change the size or layout of an element?
No, it only changes how the element is painted. Blur can soften the edges beyond the element's box, but nothing around it moves.
Can I use it on backgrounds and images?
Yes. filter works on any element, including images, SVG and text. It applies to the whole element and everything inside it, so put it on the icon itself rather than a container.