How does the tool decide which pixels match my chosen color?

It compares each pixel's RGB value to the target color using Euclidean distance in RGB space, and keeps pixels whose distance is within the tolerance you set (0 means an exact match only, up to a maximum of 441 for the full color-space diagonal).

What happens to pixels that don't match?

They become fully transparent (alpha 0), so only the isolated color layer remains visible, useful for inspecting or exporting a single element of a multi-color icon.

Can I isolate more than one color at once?

This tool isolates a single target color per run. Run it again with a different target color to extract another layer, or use the Icon Color Picker first to sample the exact color you want to isolate.

Does this work on icons with anti-aliased edges?

Yes, but partially-blended edge pixels near a color boundary might fall just outside your tolerance and get dropped; raise the tolerance slightly if edges look incomplete.

Icon Colors Separator - Isolate One Color from an Icon

Overview

Introduction

This tool isolates a single color from a multi-color icon, entirely in your browser, so you can inspect or export just one element of a layered graphic.

It's the same color-isolation operation used by the site's general PNG color separator, applied here to icon-sized assets.

What Is Icon Colors Separator?

A client-side color isolator that reads an uploaded icon's pixel data, compares every pixel's color to a target hex value, and clears any pixel that falls outside the chosen tolerance to full transparency.

It's the mirror image of removing a color: instead of deleting matches, it keeps only the matches and deletes everything else.

How Icon Colors Separator Works

For each pixel, the tool computes the squared Euclidean distance between its RGB value and the target color's RGB value, then compares that against the squared tolerance.

Pixels within tolerance keep their original color and alpha; pixels outside it are set to alpha 0, leaving a clean single-color layer.

When To Use Icon Colors Separator

Use it when you need to export just one color from a multi-color icon, such as pulling the accent color out of a logo mark for reuse elsewhere.

It's also useful for debugging a color palette by visualizing exactly which pixels in an icon use a particular shade.

Often used alongside Icon Color Picker and Icon Outline Adder.

Features

Advantages

Runs entirely client-side; the uploaded icon is never sent to a server.
Adjustable tolerance handles anti-aliased and near-matching colors gracefully.
Produces a transparent-background layer ready to composite elsewhere.

Limitations

A single run isolates only one target color; multi-color extraction requires running the tool once per color.
Very low tolerance values can miss anti-aliased edge pixels that blend slightly toward a neighboring color.

Examples

Isolate the red accent from a two-color icon

Input

A red-and-black icon PNG, target #ff0000, tolerance 20

Output

A PNG with only the red pixels visible, black pixels made transparent

Pixels within 20 units of pure red in RGB space are kept; everything else is cleared.

Extract an exact-match layer

Input

A flat-color icon, target matching its exact hex, tolerance 0

Output

A PNG identical to the input, since every pixel matches exactly

A tolerance of 0 only keeps pixels that are byte-for-byte identical to the target color.

Best Practices & Notes

Best Practices

Sample the exact hex code with the Icon Color Picker first for a precise target.
Start with a small tolerance and increase it gradually if edge pixels are missing.

Developer Notes

The pure separation math lives in a lib function that thinly re-exports the shared color-isolation function (also used by the general-purpose PNG colors separator) under this icon-specific name, since an icon is just a PNG once uploaded and the underlying pixel comparison is identical.

Icon Colors Separator Use Cases

Pulling a single brand color layer out of a multi-color logo icon
Auditing which pixels in an icon use a specific shade
Preparing a single-color stencil layer from a colorful icon

Common Mistakes

Setting tolerance too high, which can accidentally include unrelated colors that happen to be numerically close in RGB space.
Forgetting that RGB distance doesn't perfectly match human color perception, so visually similar colors can sometimes fall outside a low tolerance.

Tips

Use the Icon Color Picker to grab an exact hex value before separating.
If the result looks too sparse, nudge the tolerance up in small increments rather than jumping to a high value.

Icon Colors Separator