Overview
Introduction
This tool swaps two colors in a PNG simultaneously, entirely in your browser, in a single pixel pass.
It's the right tool whenever you want two colors to trade places rather than one color to simply disappear or change into another.
What Is PNG Colors Swapper?
A client-side two-way color exchange tool: it reads an uploaded PNG's pixel data, and for every pixel checks its distance to two target colors, swapping it to the other color if it matches one of them.
Matching is always evaluated against the original pixel data, so the swap is stable and doesn't cascade.
How PNG Colors Swapper Works
For each pixel, the tool computes its Euclidean distance to color A and to color B (both from the original, unmodified image). If it's within tolerance of A, it's written as B; if within tolerance of B, it's written as A; otherwise it's left unchanged.
Because both distance checks read from the original data rather than the in-progress output, a pixel that becomes color B is never mistakenly re-matched against 'near B' and swapped a second time.
When To Use PNG Colors Swapper
Use it to preview a two-tone logo or icon with its colors reversed, to test an alternate light/dark theme variant, or to fix a case where two colors were accidentally used backwards in an export.
It's also a fast way to explore color pairings for a design without editing the source file.
Often used alongside PNG Colors Changer, PNG Color Remover and PNG Colors Separator.
Features
Advantages
- Performs a true two-way swap in one pass, avoiding the cascading-overwrite bug a naive two-step replace could hit.
- Leaves all unrelated pixels completely untouched.
- Runs entirely client-side; your image never leaves your device.
Limitations
- It swaps exactly two colors per run; a multi-color reshuffle needs multiple carefully-planned passes.
- If the two target colors are close to each other, an overlapping tolerance range can produce ambiguous, less predictable results.
Examples
Best Practices & Notes
Best Practices
- Keep tolerance modest (10-30) when the two target colors are visually distinct, to avoid ambiguous matches.
- Use the Color Picker tool to grab exact hex values for both colors before swapping.
Developer Notes
The two-way swap reads both distance comparisons from image.data (the original) while writing results into a separate out.data buffer, which is what prevents the cascading double-swap bug a single-buffer, sequential replace would have; it's a pure function with no DOM dependency.
PNG Colors Swapper Use Cases
- Previewing a logo or icon with its two main colors reversed
- Testing an alternate color-theme variant of a two-tone graphic
- Correcting two colors that were accidentally used in swapped positions
Common Mistakes
- Setting a very high tolerance when the two target colors are close together, causing overlapping, unpredictable matches.
- Expecting more than two colors to be affected — colors that don't match either target are always left alone.
Tips
- If you only want one color to change (not a true swap), use the Colors Changer tool instead.
- Combine with the Hue Changer to explore even more dramatic recoloring beyond a simple two-color trade.