Image Color Replacer
Replace one color with another anywhere it appears in an image, with an adjustable match tolerance. 100% client-side.
How the color replacer works
The tool reads the uploaded image onto an offscreen canvas and inspects its raw pixel data via the Canvas ImageDataAPI. For every pixel, it measures the Euclidean distance between that pixel's RGB value and your chosen source color. Pixels within the tolerance radius are swapped for the target color, and pixels just outside it are blended proportionally so edges stay smooth instead of jagged.
Use the eyedropper to click directly on the preview and sample an exact source color from the image, rather than guessing a hex value. Raising the tolerance slider widens the net to also catch anti-aliased pixels and close shades around the source color — useful for photos where a "solid" color actually varies slightly pixel to pixel.
Everything runs locally in your browser with the Canvas API — the image is never uploaded to a server. For extracting a palette instead of replacing a color, try the Color Palette from Image tool, or use the Color Converter to translate the hex values you find into RGB, HSL, and more.
Built and maintained by Meet Shah · Last updated
What this tool is used for
- Recolouring a logo or an icon to match a different palette.
- Swapping a background colour on a flat graphic without redrawing it.
- Changing a single accent colour across a simple illustration.
- Adjusting a screenshot's highlight colour for a document's theme.
- Producing a variant asset without going back to the source file.
Frequently Asked Questions
- Why does replacing a colour leave a fringe?
- Because of anti-aliasing. Edge pixels are blends of the target colour and its neighbour, so an exact match misses them and leaves a halo. A tolerance setting catches near-matches, at the risk of eating into adjacent colours.
- How does tolerance work?
- It defines a distance in colour space within which pixels count as matching. Distance measured in RGB does not match perception — two colours the same RGB distance apart can look very different — which is why some tools use Lab instead.
- Why does it fail on a JPEG?
- Because JPEG compression alters pixel values, so a region that looks like one flat colour is actually many similar ones. Flat-colour work belongs in PNG; on a JPEG you need a much wider tolerance and still get artefacts.
- How is this different from removing a colour?
- Replacement swaps one colour for another and keeps the pixels opaque; removal makes them TRANSPARENT, which requires an alpha channel and therefore a format that supports one.
- Can I replace a colour across a gradient?
- Not cleanly with a single swap, since every pixel in a gradient is a different colour. Hue shifting preserves the gradient's structure and is the right operation there.
Common errors and gotchas
- Setting the tolerance too tight, which leaves a fringe of near-matching pixels around every edge.
- Setting it too loose, which catches parts of the image you meant to keep.
- Working on a lossy source, where compression has already smeared the colour you are matching.
- Ignoring anti-aliased edges, which are blends and will not match the target colour exactly.
- Expecting a photograph to work like a flat graphic, where lighting means one colour spans a wide range.