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.
Color & CSS
CSS Filter Generator
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.
Quick guide
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.
Loading the tool…
What it handles
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.
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.
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.