Image Palette Extractor
Extract an image's dominant colors as HEX with share percentages, plus a ready-to-paste CSS variables block and the average color — all locally in your browser.
About Image Palette Extractor
A plain RGB channel average of an image almost always collapses into a muddy grey that has nothing to do with the color you actually perceive as dominant. Instead of averaging, this tool samples the pixels in your browser and splits them into 6 to 10 color clusters with a median-cut algorithm, showing each color's share percentage next to its HEX code. Everything runs on your own device and no image is uploaded.
How to use Image Palette Extractor
- 1
Drop an image into the box, or click it to choose a file.
- 2
Use the slider to set how many colors to extract, from 6 to 10.
- 3
Click any swatch to copy its HEX code.
- 4
Copy the CSS variables block or the average color for your design.
Frequently asked questions
Is my image uploaded to a server?
No. The image is read with FileReader and processed on a canvas entirely inside your browser, and nothing is sent to any server — which is why the tool keeps working even with no internet connection.
What is the difference between the dominant color and the average color?
A dominant color is the center of a large pixel cluster and is what you want for a palette, while the average color is the mathematical mean of every pixel and usually comes out dull and washed out; use the dominant colors for design work, not the average.
Why do I sometimes get fewer than 10 colors?
If the image lacks enough color variety — a two-color logo, for example — the algorithm cannot find more meaningful clusters to split, so it shows only the colors that are actually present.
What exactly do the percentages mean?
Each is the share of that cluster's pixels out of all opaque pixels, measured after the image is downsampled to at most 160 pixels on its longest side; transparent and semi-transparent pixels are excluded.