Overview
Introduction
This tool masks a PNG down to only the pixels that are close to any of several target colors you specify, entirely in your browser.
It's a flexible multi-color chroma-key-style tool for extracting several distinct colored regions in one pass.
What Is Multi-color Mask Creator?
A tolerance-based multi-color mask generator: you provide a list of hex target colors and a tolerance, and it keeps any pixel that's close enough to at least one of them.
Unlike a single-color chroma key, this can isolate several unrelated colors — for example both the red and blue elements of a logo — in a single operation.
How Multi-color Mask Creator Works
Each target hex color is parsed into RGB. For every pixel in the image, the tool computes the maximum absolute channel difference (Chebyshev distance) against each target color in turn.
If that distance is at or below the tolerance for any one target, the pixel survives with its original color; otherwise it becomes fully transparent.
When To Use Multi-color Mask Creator
Use it to extract multiple distinct colored elements from a graphic — for example pulling out both a logo's brand red and brand blue at once.
It's also useful for isolating several similarly-colored regions of a photo that a single-color threshold can't capture together.
Often used alongside HSL Mask Generator, Unique Color Mask Creator and Popular Color Mask Creator.
Features
Advantages
- Runs entirely client-side; nothing is uploaded to a server.
- Supports any number of target colors in a single mask pass, not just one.
- The tolerance is adjustable per request, letting you trade precision for coverage.
Limitations
- Chebyshev (max-channel) distance is a simple approximation of color similarity and doesn't account for human perceptual color differences the way a Lab-space distance would.
- Overlapping tolerance ranges between target colors that are close to each other can make it hard to isolate them individually.
Examples
Best Practices & Notes
Best Practices
- Start with a low tolerance (5-15) and increase it gradually if too few pixels match.
- List target colors that are visually distinct from each other to avoid overlapping matches muddying the result.
Developer Notes
The color parsing and distance check are pure functions over a plain Uint8ClampedArray PixelBuffer and a string array of hex colors, using Math.max(Math.abs(...)) per channel for Chebyshev distance, with no DOM/canvas dependency, so it's fully unit-testable in Node.
Multi-color Mask Creator Use Cases
- Pulling multiple brand colors out of a logo for a color audit
- Isolating several distinct paint colors in a product photo
- Building a chroma-key mask for two or more background screen colors
Common Mistakes
- Entering hex colors without checking each one is a valid 6-digit value — a typo anywhere in the list rejects the whole request.
- Setting the tolerance too high and accidentally matching unrelated colors that happen to sit within range of a target.
Tips
- Use the hex color picker in your OS or design tool to sample exact colors before entering them here.
- If two target colors are visually close, consider merging them into one target with a slightly higher tolerance instead.