Color Palette Extractor
Pulling a palette from a photograph is useful when you are building a theme around an image, matching UI chrome to a hero shot, or checking what a brand asset actually contains rather than what the brand guidelines claim. This returns the five most prevalent colours as hex values in JSON.
How to use it
- Drop in a PNG, JPG, WebP, or BMP.
- The image is downsampled and its colours are counted and grouped in the page.
- Download a JSON file listing the dominant colours as hex.
How the extraction works
The image is first drawn to a 100 by 100 canvas. Downsampling this aggressively is deliberate: it makes the analysis fast regardless of source resolution, and it averages away sensor noise and JPEG artefacts that would otherwise register as thousands of distinct near-identical colours.
Each of the resulting 10,000 pixels is then quantized by rounding its red, green, and blue channels to the nearest multiple of ten. This collapses imperceptibly different shades into shared buckets, so a sky that technically contains four thousand blues resolves into a handful. The buckets are counted, sorted by frequency, and the top five are returned as hex.
Dominant is not the same as representative
The method reports what covers the most area, which is not always what the image is about. A product photograph on a white backdrop returns white, off-white, and shadow grey before it gets anywhere near the product colour. A landscape returns sky.
Accent colours are systematically under-represented for the same reason. The single vivid element that gives an image its character may occupy two percent of the frame and never enter the top five. If that is what you are after, crop to the region of interest before extracting.
Why the results are not perceptually tuned
Rounding in RGB space treats all channels as equally important, which does not match human vision. Our eyes are far more sensitive to differences in green than in blue, so two greens that look clearly distinct may land in the same bucket while two blues that look identical land in different ones.
Perceptually accurate palette extraction works in a space such as CIELAB and clusters with an algorithm like k-means. That is meaningfully better and considerably slower. The approach here is chosen to be instant and predictable, which suits picking a starting palette; treat the output as a first draft to refine by eye rather than as a colour-science result.
At a glance
| Accepted input | .png, .jpg, .jpeg, .webp, .bmp |
|---|---|
| Output | JSON array of hex colour strings |
| Colours returned | Top five by pixel frequency |
| Method | 100 by 100 downsample, RGB rounded to nearest 10 |
Frequently asked questions
Why is white the top colour in my product photo?
Because it covers the most pixels. The method measures area, not visual interest. Crop to the subject before extracting if the backdrop is dominating.
Can I get more than five colours?
The output is fixed at five, which is a practical size for a palette. Extracting from separate crops of the same image is an effective way to surface accent colours the whole-frame analysis misses.
Are the colours perceptually accurate?
They are frequency-accurate rather than perceptually weighted. Grouping happens in RGB space, which does not match human sensitivity. Use the result as a starting point and adjust by eye.
Does transparency affect the result?
Transparent pixels are composited during the canvas draw, so they contribute the colour they are blended to rather than being excluded from the count.
Read more
Choosing an image format — Why the same photograph can be 40 KB or 4 MB depending on a single dropdown, and how to choose deliberately.