Overview
Introduction
This tool isolates a single color from a multi-color logo, hiding everything else, entirely in your browser.
It's a fast way to pull out one element of a logo (a wordmark, an icon accent, a specific brand color) for separate use.
What Is Logo Colors Separator?
A client-side color-isolation tool that keeps any pixel within a chosen tolerance of a target hex color and makes every other pixel fully transparent.
The result is a PNG containing just that one color layer of the original logo, on an otherwise transparent background.
How Logo Colors Separator Works
Each pixel's RGB distance from the target color is measured (squared Euclidean distance in RGB space) and compared against the tolerance you set, squared the same way for an efficient comparison.
Pixels within tolerance keep their original color and alpha unchanged; pixels outside tolerance have their alpha forced to zero.
When To Use Logo Colors Separator
Use it to pull just one brand color's elements out of a multi-color logo for spot-color printing or a single-color variant.
It's also useful for inspecting exactly which pixels in a logo are a specific shade, for quality-checking exported artwork.
Often used alongside Logo to White Color Converter, Logo to Black Color Converter and Logo Outline Adder.
Features
Advantages
- Runs entirely client-side; your logo file is never uploaded anywhere.
- Tolerance lets you catch anti-aliased or slightly-varied shades of the target color, not just an exact match.
- Produces a clean, transparent-background layer ready for further editing.
Limitations
- A high tolerance on a logo with closely related colors can accidentally include pixels from an unintended nearby color.
- It isolates by color alone, with no shape or region awareness, so a color that appears in multiple unrelated parts of the logo will all be kept together.
Examples
Best Practices & Notes
Best Practices
- Start with a small tolerance and increase it gradually until anti-aliased edges are fully captured without pulling in unrelated colors.
- Use the exact hex value from your brand guidelines as the target color for the most reliable isolation.
Developer Notes
The lib function is a thin re-export of the already-shipped separatePngColor from the base colors-separator tool, since a logo is just a PNG once it's uploaded — the distance-based color matching math isn't duplicated here.
Logo Colors Separator Use Cases
- Extracting a single brand color layer for spot-color printing
- Auditing which exact pixels in an exported logo match a specific brand hex value
- Isolating an icon accent color from a combined logo lockup
Common Mistakes
- Setting tolerance too high and accidentally including pixels from a visually similar but distinct color.
- Expecting region-aware separation — this tool isolates by color value alone, not by which shape a color belongs to.
Tips
- Use the eyedropper in your browser's color picker to get the exact target hex value straight from the logo image.
- Run the tool once per color to fully decompose a multi-color logo into its individual color layers.