HEX to CSS Filter

What this tool does

This tool converts a HEX colour into a CSS filter chain that recolours a black element to that exact colour. Browsers can transform colours with filter functions — invert, sepia, saturate, hue-rotate, brightness and contrast — but no single function maps black to an arbitrary colour. The right answer is a combination of all six in precise amounts, and finding it by hand is impractical. The tool runs an SPSA optimiser (a well-known stochastic search) that tries thousands of parameter combinations, measures how close each result lands to your target in both RGB and HSL space, and keeps the best one. It then gives you the ready-to-paste filter: declaration and a live preview.

Why you might need it

Sometimes you need a coloured icon but you only have a black one, and you cannot edit the source. A classic case is an SVG referenced through an <img> tag: CSS cannot reach inside it to change fill, so a filter is the only way to recolour it. The same is true for icon fonts, third-party sprite sheets, and any monochrome image you would rather not duplicate in five colours. A single CSS filter declaration solves all of these without touching the asset itself, and it can be swapped per theme or per state (hover, active) just like any other style.

How to use it

1. Type a target HEX colour into the field — for example #3aafff — or pick one with the colour swatch. Shorthand like #f0c works too.
2. Click Generate filter, or press Enter.
3. Check the result quality. If it says Poor, click generate again — the search is randomised and usually improves on a second attempt.
4. Copy the filter: declaration and apply it to a black element.
5. Compare the two preview squares: the filtered black square should match the reference swatch of your target colour.

Common pitfalls

The element you apply the filter to must be black for the result to be accurate, which is exactly why the generated chain starts with brightness(0) saturate(100%) — that forces any starting colour to black before the recolouring begins. If you apply only part of the chain, or apply it to a coloured element, the output will be off. Because the optimiser is stochastic, two runs on the same colour can produce slightly different filter strings; both are valid, and you should simply keep whichever scores better. Very dark or very desaturated targets are the hardest to hit precisely — a small loss there is normal and visually fine.

Tips and advanced use

When a colour matters exactly — a brand colour, say — generate it two or three times and keep the lowest-loss result; the tool already runs multiple internal attempts, but a fresh click reseeds the search entirely. For interactive states, generate one filter per colour and switch them with a class. Keep in mind that filters are applied by the GPU at paint time, so they are cheap to animate but do cost a little on huge elements. And since everything here runs locally, you can match unreleased brand colours without sending them anywhere.