Colour Palette Extractor

How the Palette Extractor works

Colour palette extractor: how it works

An average photograph contains tens of thousands of distinct colours, so "the colours in this image" is not something you can simply read off. It has to be computed: the full set of pixels gets reduced to a handful of representative colours that between them account for everything in the frame. That reduction is called colour quantisation, and the classic algorithm for it is median cut.

How median cut works. Imagine every pixel plotted as a point in a three-dimensional cube whose axes are red, green and blue. Median cut starts with one box containing all the points. It finds the axis along which that box is widest — the channel with the most variation — sorts the points along it and splits the box at the median, so each half holds the same number of pixels. It then repeats on whichever box now has the largest spread, until there are as many boxes as colours you asked for. Each box contributes one palette entry: the average of the pixels inside it.

Why split at the median rather than the midpoint. Splitting by position would carve the cube into equal volumes, and most of those volumes would be empty. Splitting by pixel count follows the image instead. A photo of a forest is overwhelmingly green, so median cut keeps subdividing the green region and returns six useful greens rather than one green and five colours nobody can see. That is precisely the behaviour you want from a palette.

Sampling, and why it does not hurt accuracy. The image is scaled down to fit within 200 pixels before the pixels are read. This is not a shortcut with a cost — quantisation is a statistical operation, and tens of thousands of samples describe the colour distribution of a picture just as faithfully as ten million do, while running in a fraction of the time. Fully transparent and near-transparent pixels are skipped entirely, so a logo on a transparent background yields the logo's colours rather than a palette dominated by nothing.

Reading the percentages. Each entry reports the share of sampled pixels that landed in its box. Because median cut splits by count, a freshly cut palette starts out fairly even and then diverges as the algorithm concentrates on busy regions. A colour at 40 per cent is a genuine background or dominant subject; one at 2 per cent is an accent, which is often the interesting one — it is where the logo, the highlight or the single red object lives.

Sort order changes what you see, not what was found. Dominance puts the biggest areas first, which is the right order for picking a background and a body colour. Lightness runs from bright to dark, which turns the palette into a usable ramp for shading, borders and hover states. Cut order leaves the boxes in the order the algorithm produced them, which roughly groups related hues together.

Nothing leaves your browser. The image is decoded to a canvas, the pixel buffer is read directly, and the quantisation runs in JavaScript on your machine. No upload, which matters when the image is an unreleased design, a client's photograph or a screenshot of something private.

Related tools