Replace WebP Colors — Free Online, Browser-Only
Replace one color with another in any WebP image. Eyedropper, tolerance, transparency support. Browser-only.
About 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
- Drop WebP. Loaded into canvas.
- Pick source color. Eyedropper or hex value.
- Pick replacement. Color picker.
- Set tolerance. Higher tolerance catches anti-aliased edges; too high catches unrelated colors.
- 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.
Pro 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.
Reviewed by Ahsan Mahmood · Last updated 2026-05-06 · Part of ZTools.
For the full,
formatted version of this page, please enable JavaScript and reload
https://ztools.zaions.com/replace-webp-colors.