Overview
Introduction
This tool scans every visible pixel of a PNG and reports its most common colors as a ranked list, entirely in your browser.
It's a fast way to pull a usable color palette out of a logo, illustration, or photo without manually sampling pixels.
What Is PNG Color Palette Extractor?
A client-side color-frequency analyzer: it decodes an uploaded PNG's pixel data, groups similar colors into buckets, counts how many pixels fall in each bucket, and returns the top N buckets as hex colors with pixel counts and percentages.
Bucketing (reducing each channel to 16 levels) keeps the result readable by merging near-duplicate anti-aliased shades instead of listing hundreds of nearly identical colors.
How PNG Color Palette Extractor Works
Each pixel's red, green, and blue values are right-shifted down to 4 bits, combined into a single bucket key, and tallied in a frequency map, skipping any pixel that's fully transparent.
The buckets are sorted by count, the top N are kept, and each bucket's key is expanded back into a representative hex color (the bucket's center value) alongside its pixel count and percentage of the total.
When To Use PNG Color Palette Extractor
Use it to pull a starter palette from an illustration or brand asset, to check whether a graphic mostly uses on-brand colors, or to find outlier stray colors worth cleaning up.
It's also handy before using the Custom Palette Setter, since it tells you which colors are actually present to remap.
Often used alongside PNG Color Extractor, Average Color Calculator and PNG Color Count Reducer.
Features
Advantages
- Runs entirely client-side; the image is never uploaded anywhere.
- Bucketing keeps results meaningful instead of drowning in near-duplicate shades from anti-aliasing.
- Reports both pixel count and percentage, so you know how dominant each color really is.
Limitations
- Bucketing at 16 levels per channel is a simplification, not true k-means color quantization, so very subtle gradients can be slightly misrepresented.
- Photos with continuous tones will still return dozens of visually-similar buckets rather than a handful of clean, distinct colors.
Examples
Best Practices & Notes
Best Practices
- Extract more colors than you need and discard low-percentage entries, since they're often noise rather than meaningful palette colors.
- For flat-design assets, a count of 4-8 usually captures the real palette cleanly.
Developer Notes
The bucketing and counting logic is a pure function over a Uint8ClampedArray pixel buffer using a Map for frequency counting, with no DOM dependency, so it's fully unit-testable independent of the canvas decode step in the component.
PNG Color Palette Extractor Use Cases
- Pulling a starter color palette out of an existing logo or illustration
- Auditing whether a graphic sticks to an approved brand palette
- Finding the dominant tones in a photo before designing a matching UI
Common Mistakes
- Requesting a very high color count on a photo and expecting a clean palette rather than dozens of similar shades.
- Forgetting that transparent pixels are excluded, which can make a mostly-transparent sprite's palette look different from what a full-canvas screenshot would show.
Tips
- Pair this with the Custom Palette Setter to remap an image to only its own top colors, effectively simplifying it.
- Sort or scan the result for outlier low-percentage colors — they're often compression artifacts or stray pixels worth cleaning up.