Extract the Dominant Colours from an Image
Pull a usable palette out of a photograph, a screenshot or a piece of artwork. Each colour is shown with the percentage of the image it accounts for, ranked most-used first, so you can tell a dominant background from an accent that occupies 2% of the frame.
Drop images here
Multiple files allowed
How the colours are chosen
Median cut treats every pixel as a point in the RGB cube, then repeatedly splits the cube along its widest axis until there are as many boxes as you asked for. Each box contributes the average of the pixels inside it. The advantage over simply counting the most frequent exact values is that it groups near-identical colours together — a photograph of a blue sky has thousands of slightly different blues, and you want one blue, not the top eight almost-identical ones.
Coverage is then computed by assigning every visible pixel to its nearest palette entry, so the percentages account for the whole image and sum to 100. Fully transparent pixels are excluded, which means a logo on a transparent background gives you the logo's colours rather than a large share of nothing.
Choosing the count, and using the result
3 to 5 gives you the broad strokes — useful for picking a background and a text colour that suit a hero image. 8 is a good general default. 16 or more starts returning subtle variations that are accurate but not decisions you'd design with.
Click any swatch to copy its hex. The Copy CSS button gives you the whole palette as custom properties, ranked, with each colour's coverage in a comment — paste it into a stylesheet and you have a starting theme.
One caveat worth stating: the most common colour is not always the most useful. A photo that's 70% grey pavement will report grey first, while the interesting colour is the 4% red jacket. Read the percentages as information rather than a ranking of importance. And for text on a background, check the contrast ratio separately — an extracted pair can be beautiful and still fail accessibility.
Related: Color picker grabs the exact hex of one pixel you choose, Average colour reduces the whole image to a single value, and the harmony generators build a full scheme from one base colour.
FAQ
Why don't the colours match what I see in the image?
Each swatch is the average of a group of similar colours, so it can be slightly duller than any individual pixel — averaging pulls toward the middle. Use Color picker when you need an exact pixel value.
Is the whole image analysed?
It's sampled from a copy scaled to 400 px on the long side, which is statistically ample for a palette and keeps it instant. Coverage percentages come from that same sample.
Can I get the palette as JSON or a PNG swatch sheet?
CSS custom properties only, from the copy button. The hex values are easy enough to reshape from there.
Do the percentages always add up to 100?
Yes, within rounding — every visible pixel is assigned to exactly one palette entry.