Replace Color

Swap one colour in an image for another, with a tolerance range and the original shading carried across.

Runs on your deviceImagesWorkingNo account needed

What this tool does

Replace Color measures the distance between every pixel and the colour you nominate, then rewrites the ones that fall inside the tolerance. Distance is straight RGB geometry, reported as a percentage of the widest gap two colours can have, which is black against white, so nought demands an exact byte-for-byte match and larger numbers sweep in progressively more of the surrounding shades. The arithmetic gives red, green and blue equal weight rather than following the eye, so two shades that look alike to you can sit further apart in the sum than two that plainly do not.

Keep the shading decides what the replacement looks like. Left on, every matching pixel moves by the same difference between the two colours, so a gradient, a cast shadow or the sheen along a folded sleeve survives into the new colour. Switched off, each match is painted one solid value, which is what a logo or a chart usually wants and what a photograph almost never does. The shift has a hard edge: channels stop at 0 and 255, so wherever the move pushes one past either end the gradient flattens anyway — swapping a saturated red for a saturated blue pins the red channel at zero and the blue at full across the brightest and darkest matches alike.

Three limits are worth naming before you start. The match is global and understands nothing about the picture, so a red jumper and a red exit sign in the same frame change together, and there is no way to confine the work to one region. Next is fringing: an anti-aliased edge is a blend of the target colour with whatever it sits against, and those in-between pixels fall outside the tolerance, leaving a thin rim of the original colour around the recoloured shape. Widening the tolerance closes that rim but starts claiming the neighbouring colours as well, and that trade is what the slider is really controlling. Last, a run that matches nothing at all still reports success: the picture is decoded, redrawn and encoded again, and a file comes back with no warning that not a pixel changed.

How to use it

  1. Choose the pictures to recolour. Whatever this browser can decode is fair game: JPG, PNG, WebP, GIF, BMP and SVG, plus AVIF on recent versions. Queue several and each is processed in turn under the same settings.
  2. Name the two colours. Each is a swatch with a hex box beside it, and shorthand like #f30 is understood. Nothing here samples a colour out of the picture itself, so read the exact value from a photograph with Image Color Picker first.
  3. Widen or narrow the tolerance. Twelve per cent is the default. A flat graphic can often drop to nought or two, while a JPEG photograph, where compression scatters the values across an evenly painted surface, needs considerably more.
  4. Choose whether to keep the shading. On shifts the matched pixels and preserves the light and shade within them. Off replaces them with a single flat value.
  5. Choose how it is written out. Keep the input's format, or write JPG, PNG, WebP or AVIF. The quality slider governs the three lossy ones and is ignored for PNG, which is always lossless. A lossy format is recompressed in full, not only where the colour changed.

Processing & privacy

Runs on your device. Your file is processed directly in this browser.

Common use cases

Recolouring a flat logo or icon set

One brand colour swapped for another across a folder of exported PNGs, with shading turned off so every mark comes out as one solid value.

Changing a product colour for a listing

Keep the shading and the folds, creases and highlights of the garment come through the swap, so the photograph still reads as a photograph.

Fixing a chart whose source file is gone

A series drawn in the wrong colour can be corrected in the exported image when the spreadsheet or the design file that produced it is no longer to hand.

Fitting a screenshot to a slide deck

Interface chrome is rendered as a flat, even colour, so it matches at a very low tolerance and swaps to the deck's background without touching the text.

Questions

Where does the recolouring happen?
Entirely on your own machine. The picture is decoded onto a canvas in this tab, the pixels are rewritten there, and the result is re-encoded locally. Nothing is transmitted, which is why the page still works with the network switched off.
Why is there still a rim of the old colour?
Edges are anti-aliased, meaning the pixels along them are a mixture of your target colour and whatever lies behind it. Those mixtures sit outside the tolerance and keep their old values. Raise the tolerance until the rim closes, and check what else changed at that setting before you download.
What tolerance should I choose?
Start low and climb. Flat vector-derived artwork usually matches at nought to five per cent. A photograph rarely does, because compression and lighting spread one apparent colour over a wide range, so twenty per cent upward is normal there.
Why did other parts of the picture change as well?
Matching is on colour alone, across the whole frame. Anything sharing that shade is swapped too, and there is no selection or brush to restrict it. Narrowing the tolerance is the only control over what gets caught.
Can it make a colour transparent instead?
No. Only the red, green and blue values are rewritten and the alpha channel is left exactly as it was. Transparent Background is the tool that clears a colour to transparency; choosing JPG output here does the opposite, flattening any existing transparency onto white.
What happens to a GIF or an SVG?
Both are rasterised. A GIF is not written back as a GIF, so "same as the input" resolves to PNG and an animated one keeps only its first frame. An SVG is flattened to pixels at the size the browser draws it — if you still hold the source, editing the fill there keeps it scalable.
Does it touch pixels that are already transparent?
Fully transparent pixels are skipped entirely. Partly transparent ones are recoloured when they match, and their level of transparency is left unchanged.
How is this different from Hue & Saturation?
That tool shifts hue, saturation and lightness across every pixel at once. This one rewrites only the pixels near a shade you name and leaves everything outside the tolerance identical to the original.

Related tools