Does transparency survive the replacement?

Yes. The tool changes only the red, green and blue values of matched pixels and leaves every alpha value as it was, so transparent, translucent and opaque areas stay exactly as transparent as before. The output is a PNG so that alpha is kept.

Can I change the color of a transparent icon?

Yes, and it is the common case: drop the icon, set From to its color and To to the new one, and download. The edge pixels of an icon are partly transparent; their alpha stays as it was, so the icon sits on its background as cleanly as before.

Does replacing a color lower the quality?

No. PNG is lossless and the tool writes the pixels back without any lossy step, so the unmatched pixels are bit-for-bit the same. The output is a 32-bit PNG with an alpha channel; if the source was a palette PNG-8, the file may grow, and a PNG compressor brings it down again.

Does it work on animated PNG?

Only the first frame. Animated PNGs are decoded as their first frame by the browser, so the output is a still image. Extract the frames, recolor each and reassemble them in an animation tool.

Why is the output larger than the input?

PNG size depends on how well the rows compress, not on the dimensions alone, and the tool writes a 32-bit PNG with the browser's default compression. A compressor pass afterwards usually makes it smaller than the source.

What does the tolerance setting do?

Tolerance decides how far a pixel's color may be from the From color and still be replaced, as a percentage of the distance between black and white in RGB. At 0 only exact matches change; at 10 to 20, shades around it change as well, which is what a photo or a JPG needs. The replacement is strongest at the exact color and fades toward the tolerance limit.

How does edge smoothing work?

Smooth edges blends the replacement into its surroundings over the chosen radius, so the boundary between changed and unchanged pixels is anti-aliased rather than stepped. A radius of 1 suits icons and logos; 2 to 4 suits photos. It changes only pixels next to a match, never the rest of the image.

What does Keep shades do?

With Keep shades on, each matched pixel takes the hue and saturation of the To color but keeps its own lightness, so a shaded red shirt becomes a shaded blue shirt instead of a flat blue cutout. Leave it off for flat graphics where every matched pixel should become exactly the new color.

Can I replace several colors?

One color at a time, with its tolerance. For a second color, download the result, drop it back in and pick the next From color; each pass builds on the last. Keep the original file so you can start over.

Is my image uploaded anywhere?

No. Your browser decodes the file and does the pixel work with its Canvas API, and the page makes no request with it. You can load the page, go offline and keep working; the download is written from memory on your device.

Replace a color in a PNG.

Replace a color in a PNG and keep its alpha channel exactly as it was. Only the red, green and blue of matched pixels change; transparent edges, lossless quality and the image size stay the same.RGB changedAlpha untouchedPNG output0 bytes uploaded

Get Pro Replace a color

Add shadcn.io to your AI agent. · Pro It installs blocks, icons and templates in your design system from a prompt, with Pro.

Set up MCP

Loading the tool…

Need the UI around it? With Pro, your AI agent builds the form, the result card and the rest of the page from a prompt.

Get Pro

How it works

4 steps, no account. It runs in your browser and nothing is uploaded.

Drop the PNG
Drop the PNG; its transparency shows on the checkerboard and will be kept.
Pick the colors
Set From to the color to replace and To to the new one, by picker or hex code.
Keep the edges clean
Keep Smooth edges on at a small radius so anti-aliased edges carry the new color cleanly.
Download
Download the PNG, alpha channel untouched.

Nearby in the png tools. Every one free, in the browser.

Pricing

Build it with Pro

The tool is free. Pro adds 6,000+ blocks, premium templates and the MCP server, so your AI editor builds the product around it.

See full pricing

4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.

Billing

Billed once a year in USD. Cancel anytime.

Yearly-33%MonthlyLifetimePay once

How many people can use the license.
Client work, SaaS products and anything you charge for.
Production-ready React sections: hero, pricing, features, dashboards and more.
Complete multi-page sites you can ship as they are.
React icons from every major library, installable with one command.
Presets that restyle every block, in light and dark.
Lets your AI editor search, preview and install blocks for you.
Priority requests are answered first.

Individual

For personal projects & open source

$32instead of $49/mo

$389 billed yearly

Seats: 1 seat
Commercial use: Personal & open source only
Pro blocks: 6,000+ blocks
Templates: All 14 templates
React icons: 294k+ icons
Themes: All 59 themes
MCP server: Basic usage
Support: Standard

Team

Organization

For companies with larger teams

$132instead of $199/mo

$1,589 billed yearly

Seats: Unlimited seats
Commercial use: Included
Pro blocks: 6,000+ blocks
Templates: All 14 templates
React icons: 294k+ icons
Themes: All 59 themes
MCP server: Unlimited usage
Support: Priority

Billed once a year in USD. Cancel anytime.

Individual

For personal projects & open source

$32instead of $49/mo

$389 billed yearly

How many people can use the license.Seats: 1 seat
Client work, SaaS products and anything you charge for.Commercial use: Personal & open source only
Production-ready React sections: hero, pricing, features, dashboards and more.Pro blocks: 6,000+ blocks
Complete multi-page sites you can ship as they are.Templates: All 14 templates
React icons from every major library, installable with one command.React icons: 294k+ icons
Presets that restyle every block, in light and dark.Themes: All 59 themes
Lets your AI editor search, preview and install blocks for you.MCP server: Basic usage
Priority requests are answered first.Support: Standard

Team

Organization

For companies with larger teams

$132instead of $199/mo

$1,589 billed yearly

Everything in Team, plus

How many people can use the license.Seats: Unlimited seats
Lets your AI editor search, preview and install blocks for you.MCP server: Unlimited usage

Secure checkout via Stripe
Code lives in your repo
Keep what you've shipped if you cancel
License terms

Questions and answers

Before you trust the result: what to know about the format, the limits and your data.

Build the product around it

Every block, template and icon, installed by your AI agent in your theme. The tools stay free.

Get Pro

Cancel anytimeKeep what you've shipped if you cancel

Explore UI

Popular

Frameworks

Built On

Explore Blocks

Marketing

Application

Explore Charts

Popular

Frameworks

Explore Examples

More Galleries

Explore Icons

More Libraries

Browse

Explore Templates

Categories

Community

Explore Design Systems

Categories

More

Explore Tools

Categories

Explore MCP

Set Up In

Help

Explore Pro

Resources

Legal

Replace a color in a PNG.