Median-cut quantisation, briefly
Every sampled pixel is treated as a point in colour space. The set is repeatedly split along whichever of red, green or blue it spreads across most, and each final group contributes its average as one palette colour.
It is the same family of method used to reduce an image to a limited palette — the technique behind GIF colour tables. The result reflects what is actually in the image rather than a fixed set of guesses.
The [msm_tool slug="palette-extractor"] samples from a copy scaled to fit within a hundred and sixty pixels, which is ample for colour analysis. A palette does not become more accurate for having examined ten million pixels instead of twenty thousand; it only becomes slower.
Frequency drives the result, not importance
This is the thing to understand before being disappointed by the output.
A photograph that is mostly sky returns mostly blues, however striking the small red subject is. The extraction has no concept of what the image is about — it counts area.
A dominant palette and a designer's palette are different things. The first tells you what the image is made of; the second is a set of colours chosen for a purpose. Extraction gives you the first, and the second is a judgement built on top of it.
Ask for fewer colours
Five or six describe most images well. Twenty produces near-duplicates that split the same region between them — three barely distinguishable blues where one would do.
If you want more colours because the palette feels thin, the problem is usually that the image is genuinely low in colour variety, and asking for more will not create variety that is not there.
Averages can land between colours
Each palette entry is the average of a group of similar pixels. Across a gradient, that average can be a shade sitting between the values actually present — a colour that does not visibly appear anywhere in the image.
That is correct behaviour for a quantisation algorithm and occasionally surprising as a result. If a swatch looks wrong, it is usually this.
Extracted colours are a starting point
Nothing here checks contrast or accessibility. Two colours pulled from the same photograph may be entirely unusable together as text and background — they came from adjacent areas of a picture, which is a completely different requirement from being legible against one another.
The sequence that works: extract to find the image's actual colours, choose one or two, then build the interface roles from those and check every pair you intend to ship.
Where it is genuinely useful
- Matching a page to a hero image — pulling a background or accent colour from the photograph that sits at the top of it.
- Product pages, where the surrounding interface should not fight the product's own colours.
- Deriving a theme from artwork — album covers, book jackets, film posters.
- Checking whether a set of images is visually coherent before putting them in the same gallery.
A note on dominant-colour backgrounds
Using the extracted dominant colour as a placeholder background while an image loads is a well-established technique and a good one — the page does not flash white and the transition is far less jarring.
Do it with the single most dominant colour rather than an average of the palette. An average of several distinct colours is usually a muddy brown that matches nothing in the image.