Overview
Introduction
This tool finds and replaces a specific color across an entire PNG, entirely in your browser, without touching any pixel that doesn't match.
It's a fast way to recolor a flat-color logo, icon, or illustration without opening a full image editor.
What Is PNG Colors Changer?
A client-side color find-and-replace tool: it reads an uploaded PNG's pixel data, compares every pixel's color against a source color you pick, and swaps matches for a target color.
An adjustable tolerance controls how close a pixel's color needs to be to count as a match, which handles anti-aliasing and minor shade variation gracefully.
How PNG Colors Changer Works
For every pixel, the tool computes the straight-line distance between its RGB value and the source color in 3D color space. If that distance is within your tolerance, the pixel's RGB is overwritten with the target color while its original alpha value is kept.
A tolerance of 0 only matches the exact source color; larger values catch a wider range of similar shades.
When To Use PNG Colors Changer
Use it to swap a brand color across a flat-design icon set, change a single background color, or update a logo's accent color without re-exporting from your design tool.
It also works well for quick mockups where you want to preview a graphic in a different color scheme.
Often used alongside PNG Color Remover, PNG Colors Swapper and Custom PNG Color Palette Setter.
Features
Advantages
- Runs entirely client-side; nothing you upload leaves your device.
- Tolerance control handles anti-aliased edges instead of leaving jagged, half-changed outlines.
- Alpha is always preserved, so transparency isn't disturbed by a color change.
Limitations
- Only one source/target color pair can be changed per run; multi-color images need multiple passes or the custom palette tool.
- A very high tolerance can accidentally sweep up unrelated colors that happen to sit close in RGB space.
Examples
Best Practices & Notes
Best Practices
- Start with a tolerance of 0 and increase gradually until edges look clean, rather than guessing a high value up front.
- Use the color picker tool first to read the exact source hex value straight from your image.
Developer Notes
The color-matching math lives in a pure lib function operating on a Uint8ClampedArray pixel buffer with no DOM dependency, so it's fully unit-testable; the surrounding component only handles decoding the upload and painting/downloading the result via canvas.
PNG Colors Changer Use Cases
- Recoloring a flat-design icon to match a new brand palette
- Swapping a single background color in a simple illustration
- Previewing a logo in an alternate accent color before committing to a redesign
Common Mistakes
- Setting tolerance too high and accidentally recoloring unrelated dark or light pixels that happen to be numerically close.
- Expecting gradients or photos to change cleanly — this tool suits flat, limited-palette artwork best.
Tips
- Pair this with the Color Picker tool to grab an exact source hex value from the image itself.
- For images with soft, anti-aliased edges, a tolerance around 20-40 usually gives the smoothest result.