Extract Object By Color from Image

When you click the canvas, the browser gives us screen-pixel coordinates. We scale them to canvas-image pixel coordinates using the canvas’s width / height versus its rendered size (getBoundingClientRect). Then we draw the source image (not the currently-filtered preview) to an off-screen canvas and call getImageData(x, y, 1, 1) on the picked pixel. The retrieved RGB is converted to #RRGGBB and dropped into the colour picker, which immediately re-runs the filter.

Both measure how close two RGB triples are. Chebyshev takes the maximum |Δ| across the three channels – a tolerance of 30 means R, G, and B each differ by at most 30. Geometrically, this is a cube around the target colour. Euclidean measures the straight-line distance in 3-D RGB space – geometrically a sphere. Euclidean is more uniform (a colour 30 units away in one channel and 30 in another counts as further), Chebyshev is faster. Use Chebyshev for most cases; switch to Euclidean if you’re seeing axis-aligned bias in the matches.

It flips the test: pixels that don’t match the target colour are kept, and pixels that do match are made transparent (or replaced with the background colour). Useful for removing a green screen, a sky, or any other uniform background – pick the background colour, switch to Invert, and the foreground stays.

For input images with their own alpha channel (PNG with transparency, WebP, etc.), the tool preserves the original alpha on kept pixels. Non-kept pixels get alpha=0 (transparent) or are replaced with a solid background colour, depending on the “Keep background transparent” toggle. The output is always PNG so the alpha channel survives.

Not directly – the tool runs one filter pass per execution. To combine two colour ranges, save the first extraction, change the target colour, save the second, then layer them in any image editor (or just run two browser-tab instances).

Anything the browser can decode through the File API and Image element – PNG, JPEG, WebP, GIF, BMP, and (in modern browsers) AVIF. The output is always PNG so the alpha channel survives. Large images (over ~16K pixels per side) hit the browser canvas size cap; downscale them first.

Photos have lots of natural colour variation from lighting and JPEG compression, so even a “uniform” red shirt isn’t pure red – it’s hundreds of slightly different reds. You’ll typically need tolerance around 30-60 to capture most of an object. The colour picker is precise enough that clicking the lightest and the darkest part of the object and using the average tolerance usually gives a clean result.

No. The page loads three static files (HTML, CSS, JS) and then runs entirely in your browser via the File API and Canvas. Your image bytes never leave the device – no fetch, no XHR, no analytics, no cookies. You can disconnect from the internet after the page loads and the tool still works.

Yes – free, unlimited, no signup, no watermark. The extracted image is yours to use anywhere. Attribution to is appreciated but not required.