Skip to main content

change-png-colors

Changing PNG colours means replacing one colour with another while preserving transparency and the rest of the image. Useful for re-tinting a logo, swapping a brand colour across icon sets, or correcting a colour mistake without re-exporting. The ZTools Change PNG Colors tool lets you click any pixel to pick the source colour, set a tolerance (so near-matches also swap), and pick the replacement. All processing on the browser canvas; nothing leaves your device.

Use cases​

Recolour a logo without source files​

You have a PNG of a logo in red; need it in blue for a partner deck. No source file, no Adobe. Pick red, replace with blue.

Brand-colour migration across icons​

Old brand was teal; new brand is navy. Run all icons through the recolouriser; saves re-exporting from Figma.

Correct an off-brand colour mistake​

Designer used #2563EB instead of #1D4ED8. Fix the PNG without re-rendering the asset.

Make a watermark less obtrusive​

Replace a black watermark with a 30%-opacity grey. One pass, no Photoshop.

How it works​

  1. Open PNG — Loaded into canvas. Eyedropper enabled on hover.
  2. Pick source colour — Click any pixel to set the source. Or paste a hex value.
  3. Set tolerance — Slider 0-100. Higher tolerance catches anti-aliased edges; too high catches unrelated colours.
  4. Pick replacement — Hex picker or pick another pixel in the image.
  5. Replace + download — Walks every pixel, swaps matches (within tolerance), preserves alpha. New PNG ready.

Examples​

Input: Red logo (#FF0000) → blue (#0000FF), tolerance 0

Output: Only pure red pixels swap. Anti-aliased edges (e.g. #FF1A1A) stay red — visible halo.

Input: Same swap, tolerance 30

Output: Anti-aliased edges also catch — clean swap. But unrelated reddish pixels might also swap.

Input: Black watermark → 50%-grey

Output: All pure-black pixels become grey at 50% alpha. Watermark is much subtler.

Frequently asked questions​

Why do the edges look bad after a swap?

Anti-aliasing — edges are not pure source colour. Use higher tolerance (15-30) to catch them, or feather your replacement.

Does it preserve transparency?

Yes — alpha is unchanged. Only RGB channels swap when a pixel matches.

Can I swap multiple colours?

Run multiple passes. Each pass picks one source / replacement pair.

What about gradients?

Gradient pixels span many colours. Tolerance can help but won't recolour a full gradient cleanly. For gradients, re-export from source or use a hue-shift tool.

Privacy?

All recolouring in browser.

Tips​

  • Start tolerance at 10-20; bump up if edges look pixelated, down if unrelated colours swap.
  • For brand-colour swaps across many icons, save the source/target hex pair and re-use across sessions.
  • For complex swaps (gradients, photographic content), use a hue-rotation filter instead — colour replacement is best for flat-colour graphics.
  • Always keep the original PNG — recolouring is destructive in the saved output.

Try it now​

The full change-png-colors runs in your browser at https://ztools.zaions.com/change-png-colors — no signup, no upload, no data leaves your device.

Open the tool ↗

Last updated: 2026-05-06 · Author: Ahsan Mahmood · Edit this page on GitHub