How many colors can I extract?

Between 1 and 32, ranked from most to least common by pixel count.

Why does the extracted hex not exactly match a pixel I sampled?

Each pixel's color is bucketed down to 4 bits per channel (16 levels) before counting, which merges visually-identical anti-aliased shades into the same bucket. The reported hex is that bucket's center value, so it can differ slightly from any single sampled pixel.

Are transparent pixels counted?

No. Fully transparent pixels (alpha 0) are skipped entirely, so the palette and percentages reflect only the icon's visible, opaque pixels.

What does the percentage next to each color mean?

It's that color bucket's share of all opaque pixels in the icon, so you can see at a glance which color is most dominant versus a minor accent.

Icon Colors Extractor - List an Icon's Dominant Colors

Overview

Introduction

This tool analyzes an uploaded icon and lists its most common colors as a ranked hex-code palette, entirely in your browser.

It's built for quickly identifying an icon's dominant colors, for example to match a brand palette or set up a recoloring pass.

What Is Icon Colors Extractor?

A client-side color palette extractor: it reads an icon's pixel data, groups similar colors together, and counts how often each group appears among the icon's visible pixels.

The result is a ranked list of hex colors, each with a pixel count and percentage share of the total.

How Icon Colors Extractor Works

For every opaque pixel, the tool reduces each RGB channel from its full 8-bit value down to 4 bits (16 levels), which merges near-identical anti-aliased shades into a single bucket rather than reporting hundreds of near-duplicate colors.

Buckets are then sorted by pixel count, and the top N (your requested count) are returned as hex colors with their occurrence count and percentage of all opaque pixels.

When To Use Icon Colors Extractor

Use it to quickly identify an icon's dominant color before feeding that hex value into the Icon Colors Changer tool for a recolor pass.

It's also useful for checking whether an icon actually matches your intended brand palette.

Often used alongside Icon Colors Changer and Icon to Grayscale Converter.

Features

Advantages

Runs entirely client-side; your icon is never uploaded to a server.
Bucketing merges anti-aliased near-duplicate shades into clean, meaningful color groups.
Reports both pixel count and percentage share, so you can judge each color's actual visual weight.

Limitations

Bucketing to 16 levels per channel means very close but visually distinct shades can be merged into a single reported color.
Fully transparent pixels are excluded from the count entirely, so an icon that's mostly transparent will report percentages based only on its small visible area.

Examples

Two-color badge icon

Input

A 3-pixel-wide test icon: two red pixels, one blue pixel, count 2

Output

#ff0000 at 2 px (66.67%), then the blue bucket at 1 px (33.33%)

The more frequent red bucket is ranked first, with an accurate pixel count and percentage.

Icon with a transparent background

Input

An icon with mostly transparent pixels and a small colored logo

Output

A short palette reflecting only the logo's colors

Transparent pixels are skipped during counting, so the extracted percentages describe only the visible artwork.

Best Practices & Notes

Best Practices

Request a higher color count for detailed, multi-tone icons and a lower count for simple flat-color icons.
Pair with the Icon Colors Changer tool to recolor using the exact hex values this tool reports.

Developer Notes

extractIconColors is a thin wrap around the existing extractPngColorPalette function from png-color-palette-extractor.ts — the same 4-bit-per-channel bucketing and ranking math, just re-exported under an icon-focused name, since an icon is simply a PNG once decoded into a PixelBuffer.

Icon Colors Extractor Use Cases

Identifying an icon's dominant brand color before a recolor pass
Auditing whether an icon set matches an intended color palette
Generating a quick color reference list from an existing icon

Common Mistakes

Expecting the reported hex to exactly match a color picker sample from the original image — bucketing rounds nearby shades together.
Forgetting that transparent pixels are excluded, which can make a mostly-empty icon's percentages look higher than expected for its visible colors.

Tips

Request more colors than you think you need, then discard the smallest percentages if they're not visually significant.
Use the reported hex values directly as input to the Icon Colors Changer tool for a precise recolor.

Icon Colors Extractor