Skip to main content

replace-webp-colors

Replacing colors in a WebP swaps one specific color (and similar shades) for another. Useful for re-tinting brand assets, swapping colors across icon sets, and recolouring graphics without re-exporting from source. The ZTools Replace WebP Colors tool decodes the WebP, lets you eyedropper the source color, picks a replacement, sets a tolerance for anti-aliased edges, and re-encodes preserving alpha.

Use cases​

Re-tint a brand asset​

Logo in red WebP; partner needs blue. Replace red with blue.

Brand color migration across icons​

Old brand teal → new brand navy. Run all WebP icons through the recolouriser.

Generate variants​

One source asset, multiple color variants. Replace core color for each variant.

How it works​

  1. Drop WebP — Loaded into canvas.
  2. Pick source color — Eyedropper or hex value.
  3. Pick replacement — Color picker.
  4. Set tolerance — Higher tolerance catches anti-aliased edges; too high catches unrelated colors.
  5. Save WebP — Lossless preserves alpha exactly. Lossy mode for smaller files.

Examples​

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

Output: Reds (including anti-aliased reds) replaced. Other colors preserved.

Frequently asked questions​

How is this different from change-png-colors?

Same operation, WebP format. WebP files are smaller; alpha handling is the same.

Privacy?

All in browser.

Tips​

  • For brand-color migrations, save your source/target hex pair and re-use across batches.
  • For complex multi-color assets, run multiple passes (one source/target pair per pass).
  • For gradients, color replacement is poor — re-export from source or use hue-rotation.

Try it now​

The full replace-webp-colors runs in your browser at https://ztools.zaions.com/replace-webp-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