HEX to CSS Filter Generator

About the HEX to CSS Filter Generator

An icon in an <img> tag, a PNG or an SVG file you cannot edit ignores the CSS color and fill properties — but it follows filter. This tool finds the chain of CSS filter functions — invert(), sepia(), saturate(), hue-rotate(), brightness() and contrast() — that turns a black icon (or a white one, or one of any colour) into the exact colour you want, and tells you how close it gets.

The filters are computed exactly as the W3C Filter Effects specification defines them, and the chain is found by a search (simultaneous perturbation stochastic approximation, SPSA) from several starting points, then simplified and rounded to whole percents and degrees, so the error shown is the error of the CSS you use. The page shows the icon before and after, and, with a pass, applies the real filter in your browser and measures the colour it gives. It also gives the chain as one Tailwind class and the two exact ways to colour an icon when you can change its markup.

Common uses

• Recolouring icons from an icon font or a set of SVG files used as images, to match a theme or a hover state.
• Tinting a logo or a UI sprite on a dark mode or a brand page without exporting new files.
• Matching third-party widget icons to your palette when you cannot change their markup.

How the filter is found

Each filter function is a fixed operation on the red, green and blue values of every pixel, and the specification defines them exactly: invert() and brightness() and contrast() are linear transfers, sepia(), saturate() and hue-rotate() are colour matrices. CSS applies filter functions in the sRGB colour space, one after another in the order written, clamping each result to the displayable range. Starting from your icon’s colour, the tool computes what any chain makes of it and searches for the chain whose result is closest to the target, measured as ΔE OK (the distance in OKLab, where CSS Color 4 treats 0.02 as one just-noticeable difference).

The search is SPSA, which estimates which way to change all six values at once from two trials per step, run from several starting points; a final pattern search polishes the best one. The values are then rounded to whole percents and degrees (trying both roundings of each), functions that change nothing are left out, and the error is measured on the 8-bit colour a screen shows.

Why the starting colour matters

Filters transform the colours already there, so a chain made for a black icon gives a different colour on a white one. Most icon sets are black, which is the default. For an icon of another colour, choose Another colour and enter it; for icons of mixed or unknown colour choose Any colour: brightness(0) turns every pixel black first (keeping transparency), and the rest of the chain works from black.

Filters recolour everything in the element the same way. An icon with several colours, shading or anti-aliased edges keeps its shape but every shade is shifted, so a multi-colour image will not end up in one flat colour; use the mask method for that.

Tailwind CSS

Tailwind’s own filter utilities (invert, sepia, saturate …) always combine in a fixed order of their own (blur, brightness, contrast, grayscale, hue-rotate, invert, saturate, sepia), which is not the order this chain needs, and the order changes the result. The page therefore gives the chain as one arbitrary property, [filter:invert(41%)_sepia(65%)_…], which keeps it exactly as written; underscores stand for the spaces.

The exact alternatives

• Inline SVG: put the SVG markup in the page, give its shapes fill="currentColor" and set color on the element. Exact, and it follows hover and dark-mode colours without any extra CSS.
• Mask: show the icon file as a mask over a box with background-color set to your colour (mask: url(icon.svg) center / contain no-repeat;, with the -webkit-mask form for older Safari). Exact for any single-colour icon, SVG or PNG.

A filter is the right choice only when you cannot change the markup, such as an <img> you do not control.

Limitations

• A few colours cannot be reached exactly by these six functions from a given start, most often pale tints; the error then shows how close the chain gets, and the exact alternatives are better.
• Browsers may compute filters at slightly different precision than the specification’s arithmetic, which is why the page, with a pass, also measures the result in your own browser.
• Filters recolour the whole element, including anti-aliased edges and any other colours in it, and they create a stacking context, which can change how the element layers with others.
• In the free preview the error and a computed, watermarked icon are shown in full and the CSS only in part; copying stays locked.

Privacy

Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.