PNG Color Replacer

Online PNG Maker. Change the color of your image instantly in your browser.

100% Client-Side Processing • No Uploads • 100% Private

1. Upload PNG Image

2. From Color and To Color Click canvas to pick

For example, 10% white will match white and a little bit of gray.

3. Refine Edges

4. Preview Mask

Live Preview

Upload an image to start.
Click here to pick colors!

Source Info

Dimensions: 0 × 0

Color Picking: Active

Processing Status

Total Pixels: 0

Pixels Replaced: 0

PNG Color Replacer Examples — Click to try!

Example buttons will load a demo image and automatically apply the preset options.

What Is a PNG Color Replacer?

This browser-based utility replaces any color in a PNG (Portable Network Graphics) picture with a new color. For example, you can quickly swap red with blue, or yellow with white. You can also match similar color tones. For example, you can match 10% of possible green colors, which include sea green, jungle green, and forest green.

The color for the replacement can be specified in the options as a color name, color code, or rgb(r,g,b) function, or you can select it directly from the input image by clicking on a color pixel in the input PNG. All pixels of the selected color are immediately replaced with the new color and you can see the effect in the output preview field.

Match Similarity Options

If the similar color match option is set to a value that's greater than 0%, then not only the indicated color is replaced, but also its relative shade boundaries. Setting it to 10-15% helps naturally substitute tones that are rendered with aliasing or subtle shadows instead of strict hex boundaries.

Preserve Color Shades

To preserve tints, shadows, and gradients in the output PNG, you can activate the "Preserve Color Shades" option. It looks at the lightness parameter (geek note: that's "L" in "HSL") of the original pixels and sets the exact same mathematical lightness for the generated pixels of the new color.

Smooth Edges

Often, pixels of the original color still remain on the border or at the edge of old and new colors due to compression anomalies. To get rid of these pixels, you can use the edge smoothing option, which mixes the colors of the old and new pixels, making a flawless smooth transition between color maps.

Preview Alpha Mask

Also, for your convenience, we've added the preview mask checkbox! If enabled, it will interrupt the coloring process and show exactly which pixels in the input PNG are getting matched by the tolerance. This allows you to visually debug and adjust similarity to catch everything. Png-abulous!

Share this tool:

Frequently Asked Questions

While you can type the name or hex code into the box, the easiest method is to simply click on the uploaded image's preview canvas! The tool provides an eyedropper ability inside the browser, extracting the exact rgba() value upon click.
The inputs support standardized HTML/CSS color strings. You can use hexadecimal (#ff0000), rgb strings (rgb(255, 0, 0)), rgba strings (rgba(255, 0, 0, 255)), or standard web color names (like red, blue, turquoise).
No! Like all media tools entirely produced by Cubbbix, this tool is 100% powered by your own browser. The replacement processing engine runs inside a secure local sandbox so no image bytes are ever transferred to any database.
When you turn this on, the algorithm strips the original lightness from the "To Color" and replaces it frame-by-frame with the original picture's lightness map. If you input a dark-blue but the source pixel is sunlit white, it will render as a brightly lit sky-blue to preserve realistic depth and volume!
Your image may contain heavy compression or anti-aliasing artifacts on its borders. Try increasing the "Match % of similar colors" value, or enable the "Make Edges Smooth" option up to a 2 to 3-pixel radius to blend through these tricky edges.
Photos natively contain thousands of shades describing a single object (e.g. skin tones or the moon's surface). A 0% match only replaces the mathematically identical hex code. Expanding it to 15% catches the entire umbrella of related gradients.
Since it operates purely in your browser's local memory, the limit depends on your device's available RAM. You can typically process high-resolution 4K or 8K images quickly without crashing your environment!

Was this tool helpful?

Comments

Loading comments...

Check Out Other Popular Tools