Color to CSS Filter
Convert a HEX color to a CSS filter string for tinting SVGs and images.
filter: invert(1) sepia(1) saturate(455) hue-rotate(217deg) brightness(120);
This is an approximation — exact pixel matching requires an iterative solver. The filter works best for solid-color SVG icons.
A black circle with the CSS filter applied, shown on white and dark backgrounds.
How CSS filter color tinting works
CSS filters were designed for visual effects, but they also work as a workaround to tint monochrome SVGs and PNG images when you can't change the fill color directly (e.g., third-party icons, img tags). The algorithm first drives the element to a known starting state — fully inverted — then applies sepia, saturate, hue-rotate, and brightness transforms to shift the hue toward the target. Because each filter function has non-linear interactions, an exact match requires iterative minimisation; this tool uses a fast heuristic approximation based on the HSL representation of the target color. For production use, consider the feColorMatrix SVG filter for pixel-perfect results.
Related tools: Color Converter · CSS Filter Generator · Color Palette Generator
Built and maintained by Meet Shah · Last updated
What this tool is used for
- Tinting a monochrome SVG or an icon to a target colour with filters.
- Recolouring an image where you cannot edit the asset.
- Producing a filter chain to match a brand colour approximately.
- Tinting a sprite without producing a second file.
- Comparing a filter approximation against the intended colour.
Frequently Asked Questions
- Why would anyone recolour with filters?
- To tint a black PNG or an icon font that cannot be restyled otherwise. An `<img>` has no fill property, so a chain of `invert`, `sepia`, `saturate` and `hue-rotate` is the only pure-CSS way to change its colour without editing the asset.
- How is the filter chain found?
- By numerical search. There is no closed-form inverse for the filter matrix stack, so a solver adjusts the parameters until the result is within tolerance of the target — which is why running it twice can produce two different chains for the same colour.
- Is it exact?
- Approximate, and the tool reports how close. `hue-rotate` in CSS is a fixed matrix approximation rather than a true rotation, so some targets are unreachable and the best chain lands a few units away — usually imperceptibly, sometimes not.
- Is there a better way?
- Almost always. Inline SVG with `fill: currentColor` recolours exactly and for free. `mask-image` with a background colour works for any shape. The filter chain is the fallback for a raster asset you cannot change, not a first choice.
- What does it cost to render?
- More than it looks — each function in the chain is a separate pass, applied on every paint. One icon is fine; a grid of fifty filtered images, animated, is where the frame rate collapses on a mid-range device.
Common errors and gotchas
- Expecting an exact match, since the technique is a numerical approximation and rarely lands precisely.
- Applying it to a multi-colour image, where the result is unpredictable.
- Using a long filter chain on a large element, which is expensive to composite.
- Reaching for filters when `currentColor` on an inline SVG would be exact and cheaper.
- Applying it to an image with its own colours, where the approximation has nothing to tint.