Skip to content
I Hate Online Tools

Color replace

Swap one color range for another.

This runs in your browser. Nothing is uploaded.

About Color replace

Swaps one colour for another across an image by matching every pixel within a tolerance you set, running the comparison in your browser rather than on someone's server.

Recolouring flat artwork is the job this does well: a logo that needs to be the client's blue rather than the agency's, an icon set in the wrong accent, a chart with one series that clashes, a screenshot with a background swatch you'd rather change. You pick the colour to find, the colour to put in its place, and how fussy the match should be.

Each pixel is compared to your From colour as a straight-line distance through RGB space, and any pixel closer than the Tolerance value is overwritten with your To colour exactly. Tolerance runs from 5 to 150, on a scale where the two most distant colours possible sit roughly 441 apart — so even the maximum setting stays selective rather than sweeping.

Matched pixels are replaced with a flat colour rather than shifted by the same amount, which wipes out any shading or gradient inside the region. Harmless on an icon, glaring on a photograph of a red car. The other artefact is edges: anti-aliased pixels around a shape are blends of two colours, fall outside the tolerance, and survive as a thin fringe of the original.

How to use Color replace

  1. 1Add the artwork by dropping it on the panel or clicking to find it.
  2. 2Set From to the colour you want to find, and To to its replacement.
  3. 3Raise Tolerance until the region is fully caught without spilling into neighbouring colours.
  4. 4Click Apply preview, then Download once the edges look clean.

What it won't do

  • Replaced areas become a flat colour, losing whatever gradient or shading they had.
  • Anti-aliased edges keep a fringe of the original colour.
  • One colour per pass, matched by RGB distance rather than perceived similarity.

Common questions

Why is there a fringe of the old colour around the edges?

Anti-aliasing. Pixels at the border of any shape are blends between the shape and its background, so they sit outside the tolerance around your From colour and are left alone. Raising Tolerance catches more of them but risks grabbing colours you meant to keep. Artwork exported without anti-aliasing doesn't have the problem at all.

Can I use it to change the colour of something in a photo?

Rarely with good results. A real object spans hundreds of distinct values across its shading, and flattening them all to one colour removes the shading that made it look three-dimensional. Set tolerance low and you catch a patch; set it high and you catch half the picture. This is a tool for flat-colour graphics.

How do I find the exact colour to replace?

Open the colour picker tool on the same image — it reports the hex value under your cursor, which you can then enter in the From swatch. Guessing from memory tends to fail, because what looks like one flat colour on screen often varies slightly, and a wrong starting point forces the tolerance much wider than it should be.

What does the Tolerance number mean?

It's a distance in RGB space where red, green and blue count equally. Around 30 catches near-identical shades; 100 catches a broad family. Because the measure is geometric rather than perceptual, it doesn't always match what your eye groups together — dark navy and dark purple can fall inside one radius while two obvious shades of the same blue don't.

Related tools

Why this one doesn't upload your file

There is no server to upload to. This page is a static file, and the work happens in your browser using the same graphics and WebAssembly code that renders every other site you visit. Your file is read from disk into memory, processed, and handed back as a download. Once the page has loaded you can disconnect from the network entirely and it keeps working. The longer explanation

Install the app