Image Color Extractor
Choose an image
Pick a file above and its palette appears here. Nothing is uploaded. The image is read and processed in this page.
The extractor analyses an image and returns its dominant colours, each with the share of the picture it accounts for. It uses median cut quantisation rather than counting the most frequent values, because in a photograph almost every pixel is unique and frequency counting returns a dozen indistinguishable shades of the same thing.
How it works
Median cut treats every pixel as a point in three-dimensional RGB space, starting with one box containing all of them. The box with the widest spread along any single channel is split in two at that channel's median value. Repeat until there are as many boxes as colours wanted, then average each box.
- Put every pixel into one box.
- Find the box with the largest range in red, green or blue.
- Sort that box along the widest channel and split it at the median, giving two boxes with equal pixel counts.
- Repeat until the requested number of boxes exists.
- The average colour of each box is a palette entry.
- Finally, every pixel is assigned to whichever palette colour it is nearest, and those counts give the shares.
- Splitting at the median rather than the midpoint means each box holds the same number of pixels, so a colour covering a small but distinct area still earns a slot in the palette.
- That equalising is also why the shares cannot come from box sizes. The boxes are deliberately the same size. The final assignment pass is what makes the percentage mean something.
- The image is sampled down to 240 pixels on its longest side first. A twelve-megapixel photograph would otherwise mean sorting twelve million points repeatedly.
- Pixels that are more than half transparent are ignored, so a logo on a transparent background returns the logo's colours rather than a wash of whatever is behind it.
Examples
A landscape photograph
Colours
6
Result
Sky blues and foliage greens, with their shares
The shares tell you which colours dominate, useful when building a palette that matches the image's balance rather than just its hues.
Why not count frequencies
Method
Most common exact colours
Result
Six near-identical shades of one colour
In a photograph almost every pixel value is unique. Frequency counting picks whichever near-duplicates happen to repeat, which describes nothing.
A logo on transparency
Image
PNG with a transparent background
Result
The logo colours only
Transparent pixels are skipped. Including them would return a palette dominated by whatever the canvas happened to be.
Frequently asked questions
Why is median cut better than just counting the most common colours?
Because in a photograph almost every pixel is a slightly different value, so the "most common" colours are near-identical shades that happen to repeat. Median cut divides the colour space itself, which finds genuinely distinct colours rather than accidental duplicates.
What does the percentage next to each colour mean?
The share of sampled pixels that are closer to that colour than to any other in the palette. A colour at 40% covers roughly 40% of the image. Note this cannot be read off the quantisation itself: median cut splits boxes at the median, so every box ends up with the same pixel count regardless of how much of the picture it represents. The percentages come from a separate pass that assigns each pixel to its nearest palette colour.
Why does the image get sampled down first?
Because median cut sorts the pixel list repeatedly, and a twelve-megapixel photograph means twelve million points sorted several times over, enough to freeze the tab. Reducing to 240 pixels on the long side keeps tens of thousands of samples, which is statistically plenty for a palette.
How many colours should I extract?
Five or six for a design palette, which is about as many as a layout can use coherently. Go to 12 or 16 when you are analysing an image rather than building from it, such as checking how many distinct colours a logo actually contains.
Are these colours accessible to use together?
Not necessarily. Extraction says nothing about contrast, and colours pulled from a photograph are often close in luminance, which looks harmonious and fails accessibility checks. Run any text-and-background pair through the contrast checker before using it.