Staaarter Tools

PNG Transparency Maker

Uploads a PNG, decodes its pixels, and keys out every pixel whose color falls within a tolerance of a chosen hex color by setting its alpha channel to zero, so backgrounds like flat white or green screens become transparent while the rest of the image is untouched. A free online tool from Staaarter, right in your browser.

Runs locallyUpdated 2026-07-26
editortransformimagecanvaspng

Overview

Introduction

This tool makes part of a PNG transparent by keying out a chosen background color, all inside your browser with no upload to a server.

It's a fast way to strip a flat-color background (white, green screen, a solid brand color) from a logo or product photo.

What Is PNG Transparency Maker?

A client-side color-key transparency tool: it decodes an uploaded PNG's pixels, compares each one against a target hex color you provide, and zeroes out the alpha channel of any pixel close enough to that color.

The comparison uses a tolerance value so you can control how aggressively similar shades are also removed.

How PNG Transparency Maker Works

For each pixel, the tool computes the largest single-channel difference between that pixel's red, green, and blue values and the target color's red, green, and blue values.

If that difference is at or below the tolerance you set, the pixel's alpha is set to 0 while its color values are left alone; otherwise the pixel is copied through unchanged.

When To Use PNG Transparency Maker

Use it when you have a logo or graphic on a flat white, black, or solid-color background that you need transparent for overlay use.

It also works for rough green-screen-style keying when the background color is fairly uniform.

Often used alongside PNG Transparency Checker and PNG Rotator.

Features

Advantages

  • Runs entirely client-side; nothing you upload leaves your device.
  • The tolerance slider lets you fine-tune how aggressively similar shades are removed.
  • Non-matching pixels, including their original alpha, are never touched.

Limitations

  • Works best on flat, uniform backgrounds; photos with gradients or noisy backgrounds may need a high tolerance that also eats into the subject.
  • There's no edge feathering, so keyed-out edges can look slightly hard rather than smoothly anti-aliased.

Examples

Remove a white background from a logo

Input

A logo PNG on solid #FFFFFF, tolerance 30

Output

The white background becomes fully transparent, the logo artwork is preserved

Pixels within 30 of pure white in every channel are keyed out.

Key out a green screen

Input

A photo shot on a #00FF00 backdrop, tolerance 50

Output

Most of the green backdrop becomes transparent; the subject remains opaque

A higher tolerance catches shading variation across the green backdrop.

Best Practices & Notes

Best Practices

  • Start with a low tolerance and increase it gradually to avoid eating into the subject.
  • Use a color picker to get the exact hex value of the background before entering it.

Developer Notes

The pure function operates on a plain Uint8ClampedArray pixel buffer with a per-pixel max-channel-difference comparison against a parsed target color; only the surrounding component touches canvas APIs to decode/encode the actual PNG file.

PNG Transparency Maker Use Cases

  • Preparing a logo for overlay onto another image
  • Cleaning up a product photo shot on a solid background
  • Removing a flat color backdrop before compositing

Common Mistakes

  • Setting tolerance too high and accidentally removing part of the subject that shares a similar color to the background.
  • Not accounting for anti-aliased edge pixels, which may need a slightly higher tolerance to fully clear.

Tips

  • Zoom into the preview after processing to check edges before downloading.
  • If edges still show a color fringe, try increasing tolerance slightly rather than re-running at a much higher value.

References

Frequently Asked Questions