BYTETOOLS

Hex to CSS Filter Converter

Find the CSS filter chain that turns a black element into any hex colour, with the residual delta E reported so you can see exactly how close the match got.

Target colour

Target

Working

Searching for a filter chain…

What is the Hex to CSS Filter Converter?

Sometimes you need to recolour something you cannot edit — a black SVG sprite, an icon font, an img element.

  • Implements the real Filter Effects colour matrices
  • Seeded search, so the same colour always gives the same chain
  • Reports residual delta E 2000 and the largest channel error
  • Plain-English match quality verdict from excellent to approximate
  • Side-by-side preview of the filtered result and the exact target
  • Optional prefix that forces a non-black element to black first

How to use the Hex to CSS Filter Converter

  1. 1

    Enter your target colour as a hex value or pick it with the swatch.

  2. 2

    Leave the brightness and saturate prefix on unless your element is already pure black.

  3. 3

    Compare the filtered preview square against the exact target beside it.

  4. 4

    Check the delta E residual and the match quality verdict.

  5. 5

    Copy the filter declaration or the whole CSS rule.

About the Hex to CSS Filter Converter

Sometimes you need to recolour something you cannot edit — a black SVG sprite, an icon font, an img element. CSS filters can do it, but only through an awkward chain of invert, sepia, saturate, hue-rotate, brightness and contrast. There is no formula that inverts that chain, so the only way to find it is to search.

This tool re-implements the colour matrices those six functions expand to, exactly as the Filter Effects specification defines them, then runs an SPSA search over the six parameters to minimise the combined sRGB and HSL error. It is an approximation, and it will not always land exactly — so it reports the residual delta E rather than hiding it.

Crucially, the error is measured on the rounded values you actually copy, not on the internal full-precision result, so the number you see is the accuracy you get. Everything runs locally in your browser with nothing uploaded.

Frequently asked questions

How do I change the colour of an SVG with CSS filters?

Apply a filter chain that starts by forcing the element to black with brightness(0) saturate(100%), then walks it to your target colour through invert, sepia, saturate, hue-rotate, brightness and contrast. This tool searches for the parameters that get closest to the colour you want.

Why is the CSS filter colour not exactly right?

Because the six filter functions cannot reach every colour in sRGB. Each one clips its output to the 0 to 255 range, which loses information, and the combination is not invertible. Highly saturated colours are the hardest. The delta E figure here tells you how far off it landed so you can judge whether it matters.

What does the delta E number mean?

Delta E 2000 measures perceptual colour difference. Below 1 means the eye cannot tell the two apart, below about 2.3 is only visible side by side, and anything above 5 is a difference people notice at a glance. The tool labels the result for you rather than leaving you to interpret the number.

Is there a better way to recolour an icon?

Yes, when you control the asset. Inline the SVG and set fill to currentColor, or use a CSS mask-image with a background colour — both give an exact colour with no search involved. Filters are the fallback for when the markup is out of your hands.

Do I always need the brightness and saturate prefix?

Only if your element is not already pure black. Those two functions crush any starting colour down to black, which is the state the rest of the chain is calculated from. If your icon is genuinely black you can leave them off and save a little work.

Related tools