Hex Color to CSS Filter Converter
Turn a hex color into a CSS filter chain that tints black monochrome SVGs and icons to that color — with a live before/after preview.
Finds a CSS filter that tints a black element to your color. Apply it to a black/monochrome SVG or icon. Re-run for a closer match (the solver is stochastic).
About this tool
Sometimes you have a black SVG icon or PNG and want to recolor it with CSS, without editing the asset. CSS filters can do this, but no single filter sets an arbitrary color — you need a specific chain of invert, sepia, saturate, hue-rotate, brightness, and contrast that, applied to black, produces your target color. Finding those values by hand is impractical, so this tool uses a numerical optimizer (the SPSA algorithm) to search for a filter chain that best matches your chosen hex color, showing the loss (how close the match is) and a live before/after swatch. Apply the generated filter to any black or monochrome element. Because the search is stochastic, re-running can yield a slightly closer match; a loss under about 5 is an excellent result.
How to use it
- Pick or type your target hex color.
- Click Compute filter.
- Check the before/after swatches and the loss value.
- Re-run for a closer match if needed, then copy the CSS filter onto your black SVG/icon.
Frequently asked questions
- How can CSS filters recolor an icon?
- A chain of filters — invert, sepia, saturate, hue-rotate, brightness, contrast — applied to a black element shifts it through color space to a target hue. No single filter sets an arbitrary color, so a computed combination is required, which this tool finds for you.
- Why does the tool use an optimizer?
- There is no closed-form formula mapping a target color to filter values, so the tool searches numerically with the SPSA algorithm, minimizing the difference between the filtered result and your target in both RGB and HSL space.
- What does the loss value mean?
- Loss measures how far the filtered result is from your target color (lower is better). Under ~5 is an excellent, near-exact match; 5–15 is good; higher means you should re-run the solver for a closer result.
- Why do I get a different result each run?
- The SPSA optimizer is stochastic — it uses random perturbations to search — so each run can land on a slightly different filter chain. Re-running and keeping the lowest-loss result is the intended workflow.
- What element should I apply the filter to?
- A black (or it will be normalized to black first) monochrome image, SVG, or icon. The filter starts with brightness(0) saturate(100%) to force the source to black, then tints it, so it works regardless of the source’s original color.
- Are there limits to this technique?
- It tints solid monochrome graphics well but cannot recolor multi-color images meaningfully, and very saturated or unusual targets may not match perfectly. For precise brand colors on important assets, editing the SVG fill is more reliable.