Color palette from image

The most common colour is rarely the most useful one

An image is mostly its background. A photograph is mostly sky, wall or skin; a screenshot is mostly white. So colours ranked by area spend their first slots describing the ground the subject stands on, and the colour that made you save the picture — the jacket, the neon sign — arrives last, at two per cent. That is why every swatch carries its share, and why the share is not a ranking of importance: it tells you which colours are fields and which are accents, and a palette you can build with usually takes one of each. Transparent pixels hold no usable colour and are skipped, so on a cut-out logo the share is measured over the visible pixels rather than over the whole canvas — the swatch labels say which of the two you are reading.

How the colours are chosen

The method is median cut. Put every distinct colour in the image into one box in three-dimensional space, with red, green and blue as the axes. Find the axis the box is widest along, sort the colours down it, and cut it in two where half the pixels fall on each side. Repeat on whichever box is now widest until there are as many boxes as colours you asked for. Each box averages to one swatch, and a few rounds of refinement slide that swatch onto the centre of the colours nearest it.

The split runs over distinct colours rather than over pixels, and that detail is what makes it work: over pixels, a large flat area swallows the palette, because the median pixel of any box containing a white ground is itself white, so every cut peels off more white and the subject never separates. The cut is still placed by pixel count, which keeps the split where the image actually is rather than in the middle of a thin tail of colours only a handful of pixels use. Which box gets cut next is a separate decision, and it goes by how wide that box’s range of colour is rather than by how many pixels sit in it — so a small accent far from everything else is reached early instead of being swallowed by the background, and it can take a swatch on a fraction of a per cent of the picture.

Median cut is also why this page gives the same answer twice: clustering that starts from random points returns a different palette every run, which is fine in a photo editor and useless on a page you want to cite.

Why it reads a sample, and when that matters

A 24-megapixel photograph holds far more pixels than the question needs, so it is reduced to roughly 150,000 of them and everything after reads that sample. For dominant colours this changes nothing: an area covering thirty per cent of a picture covers thirty per cent of any regular sample of it.

The reduction deliberately does not blur, because an ordinary downscale averages neighbouring pixels and the average of two real colours is a colour that was never in the file. On a screenshot, black text against white manufactures a band of greys along every letter, and there is easily enough of it to win a swatch. The cost lands at the other end: a hairline one pixel wide can fall between samples and never reach the palette. When the accent you want is that thin, crop to it and run the crop.

Six extracted colours are raw material, not a design system

What comes back describes an image, not an interface, and the gap between the two is contrast. The pair that dominates a photograph is very often two mid-tones a stop apart: pleasant together, unreadable as text on a background.

Treat the extraction as a direction. Take one dark, one light and one accent from it, then build around them — a near-black and a near-white for type, a few tints of the accent for states, a neutral that is not simply grey. Check every text-and-background pair before you commit; the hex converter reports the ratio against black and white.

Screenshots read more cleanly than photographs

A screenshot of a website is made of flat fills, so its colours are already discrete and what comes back is close to the values someone typed into a stylesheet. A photograph has no flat regions: every surface is a gradient under a light and compression scatters noise around each edge, so the tool averages a cloud rather than reading a value. To recover the colours a site really uses, screenshot it rather than photographing your monitor, and crop the browser furniture out first — a toolbar is a large grey rectangle and it will take a swatch that belonged to the design.

Why nothing is uploaded

The image is decoded by the browser, drawn into a small canvas, and read back as pixels in this tab. There is no server in that path, no queue, and no copy of a client’s unreleased artwork on a stranger’s disk. Turn the network off once this page has loaded and the tool still works.