Measured, not guessed
Generators of this kind usually print a chain and a “loss” score with no unit. This one evaluates the chain with the same colour matrices the browser uses, rounds each value exactly as it will be pasted, and reports the gap between what you asked for and what the line delivers in ΔE_OK. The search is seeded, so the same colour always gives the same line.
Where filters fall short
- Filters act on every pixel, so a multi-colour icon changes in every colour, not just one.
- Anti-aliased edges and semi-transparent pixels follow the same matrices and can look slightly different from a flat fill.
- Very dark, saturated targets are the hardest; if the verdict says “closest found”, an SVG fill is the exact route.
Questions people bring to this page
How does a CSS filter change an icon's colour?
CSS has no property that sets an image's colour, but each filter function — invert, sepia, saturate, hue-rotate, brightness, contrast — moves every pixel through a fixed colour matrix. Starting from black, a chain of six of them can reach almost any colour. This page searches for the chain that lands on your hex.
How exact is it?
The page computes the colour the printed chain really produces, with every value rounded as you will paste it, and prints the difference from your hex as ΔE_OK (the distance in OKLab used everywhere on this site) and as CIEDE2000, labelled. Under ΔE_OK 0.01 it says exact to the eye; above that it says “the closest chain found” and does not call it exact.
My icon is white or coloured, not black. Does it still work?
Choose “White or any colour”. The chain then begins with brightness(0) saturate(100%), which first turns any icon black, and the solve continues from there.
Should I use this instead of an SVG fill?
If you control the SVG, setting its fill is simpler and exact. A filter is for when you can only style the <img> — a third-party icon, a CMS image, or a PNG.
Next door
- Recolour an SVGEvery fill, stroke and gradient stop in one colour table, rewritten without touching any other character.
- Change a logo's colourFlat-art selection by one ΔE radius, exact hex replacement and the indexed-PNG table path.
- Match a brand colourType the hex, see what the selection can carry, and solve as close as sRGB allows.
- The colour you asked forWhy the delivered colour differs from the typed one, shown on three receipts.
Image data is never posted anywhere: decode, mask, remap and encode all happen inside this tab's memory, and that memory is released when you leave.