Extract Object By Color from Image
Pick a color (or click on the image) and extract pixels matching it - Chebyshev or Euclidean tolerance, transparent or solid background. Free, offline, client-side, instant, secure.
Isolate everything in an image that matches a target colour. Pick the colour with the picker or click directly on the image, choose Chebyshev (per-channel) or Euclidean (3-D distance) tolerance, keep the background transparent or fill it with a chosen colour, and download a PNG.
How to Use Extract Object By Color from Image
- Upload an image. Click "Choose image" and pick a PNG, JPEG, WebP, or GIF. The file is decoded locally - nothing is uploaded.
- Pick the target colour. Use the colour picker, or - easier - click directly on the image at the pixel whose colour you want to extract. The picker updates to the clicked pixel's hex value.
- Tune the tolerance. 0 = exact match; higher = wider colour range. Pick the metric: Chebyshev requires every channel's |Δ| to be ≤ tolerance (cube around target - fast, slightly biased toward axis-aligned colours). Euclidean measures 3-D distance in RGB space (sphere around target - more uniform).
- Pick the mode. "Keep matching" extracts the colour (mask everything else). "Invert" does the opposite - useful for removing a known background like a green screen.
- Choose the background. By default non-kept pixels become transparent (PNG alpha = 0). Untick "Keep background transparent" to fill them with a chosen colour instead.
- Read the stats line. Image dimensions, matched/total pixel count and percentage, the metric and mode currently active.
- Download. Click "Download PNG" or press Ctrl/Cmd + Enter. The output is named
<original>-extracted.png.
Frequently Asked Questions
How does click-to-pick work?
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.
What’s the difference between Chebyshev and Euclidean tolerance?
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.
What does Invert mode do?
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.
What about the alpha channel?
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.
Can I extract more than one colour at once?
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).
What image formats are supported?
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.
How accurate is the match for photos?
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.
Is my image uploaded?
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.
Is this tool free?
Yes – free, unlimited, no signup, no watermark. The extracted image is yours to use anywhere. Attribution to is appreciated but not required.