Background Remover -- Chroma Key, Color to Alpha, Despill

Remove image backgrounds in your browser with chroma key and color-to-alpha

Upload Image

Drop image here or click to select
PNG, JPEG, WebP, GIF, BMP, SVG. Processed locally -- nothing uploads.
Click anywhere on the original image to sample a key color.
Original -
Result -

Key Colors (remove)

Protect Colors (keep)

Preview Background

Sliders

Algorithm

Chroma Key: hard tolerance + soft ramp, good for uniform screens. Color to Alpha: per-pixel unpremultiply, good for gradients and semi-transparent edges.
ready

How It Works

Background Remover is a browser-native tool that turns a flat or near-flat background into transparency. It uses two classic image-processing algorithms, both running on the Canvas API in plain JavaScript.

Chroma Key (default)

For every pixel, the tool computes the Euclidean RGB distance to each key color. If the distance is at or below the tolerance, the pixel becomes fully transparent. Between tolerance and tolerance+softness, alpha ramps linearly from 0 to 1. Beyond that, the pixel is kept. Despill then subtracts the key color's contribution from retained pixels to kill green or blue fringe. Protect colors override removal when a pixel is closer to a protect color than to any key.

Color to Alpha

A per-channel unpremultiply: for each channel, the tool calculates the alpha required to make that channel produce the observed value when composited over the key color, then keeps the highest alpha across channels. The RGB is then re-solved without the key contribution. This is the GIMP color-to-alpha algorithm and is very effective for soft edges, glass, hair, and smoke. Tolerance and softness map to transparency and opacity thresholds.

Edge Feather

A separable box blur applied only to the alpha channel. Small values (1 to 2 pixels) smooth aliased edges without eating detail. The RGB stays sharp.

Recommended Settings

ScenarioToleranceSoftnessDespillFeather
Studio green screen, even light40-6030-5060-90%0-1
Studio blue screen40-6030-5050-80%0-1
White seamless background30-4520-400-20%0
Flat solid logo on color10-250-100%0
Sky with gradient50-8060-12030-60%1-2
Hair / fine detail on green30-4580-14070-95%0-1

Start with Auto Detect, then nudge tolerance down until the subject's edges come back, then raise despill until fringe color disappears.

Tips for Clean Cutouts

  • Pick from the worst spot. Sample near the subject's edge where spill is strongest -- not in the cleanest corner.
  • Add multiple keys. A green screen often has two shades: bright center and dimmer corners. Add both.
  • Use protect colors. If the subject wears a color close to the key (classic "green jacket on green screen"), add that shade as a protect color.
  • Despill before feather. Feathering smooths edges but does not remove color -- run despill first.
  • Keep tolerance low, softness high. This keeps the core of the subject solid while letting thin hair and motion blur fade naturally.
  • Test on a contrasting background. Switch the preview to white and black -- fringe that hides on checker will jump out.

Privacy

Every calculation runs in your browser. The image, the pixel data, and the downloaded PNG never touch any server. Closing the tab deletes all state. No cookies, no trackers, no account.

Frequently Asked Questions

How does this background remover work?
The tool measures the RGB distance from each pixel to the key colors you pick. Pixels inside the tolerance radius become transparent, pixels in the softness band fade linearly, and pixels outside stay opaque. Despill then subtracts the key color's contribution from retained pixels so green or blue tint near the edges disappears.
Does my image get uploaded to a server?
No. All processing happens locally using the browser Canvas API. The image never leaves your device.
Can I remove more than one background color?
Yes. Add multiple key colors and the tool removes any pixel within tolerance of any key. You can also add protect colors to preserve areas that would otherwise be removed.
What is despill and when do I need it?
Despill neutralizes spill light -- the green or blue tint that bounces onto hair, skin, and clothing edges when shooting on a chroma screen. Increase despill until the fringe looks natural. Too much flattens saturated foreground colors.
Why do I get a halo around the subject?
A green or blue halo means despill is too low. A dark halo means tolerance is too high and is eating into the subject. Lower tolerance, raise softness, then increase despill to remove the fringe color.
What image formats work?
Any format the browser can decode -- PNG, JPEG, WebP, GIF, BMP, SVG. The output is always PNG with a real alpha channel.
Is this the same as AI background removal?
No. This is a classic chroma key and color-to-alpha tool. It needs a relatively uniform background color to work. It is fast, predictable, and private, but for cluttered backgrounds a neural segmentation tool will give better results.
Can I feather the cutout edges?
Yes. The feather slider blurs the alpha mask in pixels. Small values (1 to 2 pixels) soften aliased edges. Larger values create a soft vignette style matte.
How do I pick the background color?
Click the Pick From Image button, then click anywhere on the original image to sample that color. Auto Detect samples the four corners and averages them, which works well for studio green or blue screens.

Related Tools

Related Tools

View all tools

Background Remover FAQ

How does this background remover work?

The tool measures the RGB distance from each pixel to the key colors you pick. Pixels inside the tolerance radius become transparent, pixels in the softness band fade linearly, and pixels outside stay opaque. Despill then subtracts the key color's contribution from retained pixels so green or blue tint near the edges disappears.

Does my image get uploaded to a server?

No. All processing happens locally using the browser Canvas API. The image never leaves your device.

Can I remove more than one background color?

Yes. Add multiple key colors and the tool removes any pixel within tolerance of any key. You can also add protect colors to preserve areas that would otherwise be removed.

What is despill and when do I need it?

Despill neutralizes spill light -- the green or blue tint that bounces onto hair, skin, and clothing edges when shooting on a chroma screen. Increase despill until the fringe looks natural. Too much flattens saturated foreground colors.

Why do I get a halo around the subject?

A green or blue halo means despill is too low. A dark halo means tolerance is too high and is eating into the subject. Lower tolerance, raise softness, then increase despill to remove the fringe color.

What image formats work?

Any format the browser can decode -- PNG, JPEG, WebP, GIF, BMP, SVG. The output is always PNG with a real alpha channel.

Is this the same as AI background removal?

No. This is a classic chroma key and color-to-alpha tool. It needs a relatively uniform background color to work. It is fast, predictable, and private, but for cluttered backgrounds a neural segmentation tool will give better results.

Can I feather the cutout edges?

Yes. The feather slider blurs the alpha mask in pixels. Small values (1 to 2 pixels) soften aliased edges. Larger values create a soft vignette style matte.

Will the output be the original resolution?

Yes. The preview is scaled to fit the screen but the full resolution image is processed and downloaded.

How do I pick the background color?

Click the Pick From Image button, then click anywhere on the original image to sample that color. Auto Detect samples the four corners and averages them, which works well for studio green or blue screens.

Request a New Tool
Improve This Tool