Color palette from image

What is a colour palette extractor?

It takes an image and gives you back a handful of colours that represent it, as hex codes you can paste into a stylesheet or a design file. People use it to build a scheme around a photograph, to match brand colours to an existing asset, or just to name the colours in something they like.

This one clusters the colours rather than counting them, which is a different algorithm with a visibly different result. It also lets you switch to the counting method on your own image and shows you what changes, because the comparison is the reason the page exists.

Your image is decoded by your own browser and never leaves the machine. There is no upload, no server and no account — which matters more here than on most tools, since the file you are handing over is usually a photograph.

How to use the colour palette extractor

1. Choose or drop an image. Anything your browser can display works — JPEG, PNG, WebP, GIF. It is read locally and downscaled before sampling, so a large photo is no slower than a small one.
2. Set how many swatches you want. Between two and ten. Five is the usual answer for a design palette; more than about eight and the colours start to be genuinely close together in most photographs.
3. Copy the colours, and try the other method. Each swatch copies on its own or all at once. The method switch is worth pressing at least once — the panel underneath reports how far apart the closest two swatches are under each approach, on your image rather than in the abstract.

Counting the colours is the wrong algorithm

The obvious way to find the dominant colours in an image is to count them and take the most common. Almost every tool does this. It has a problem that only shows up on real photographs.

You cannot count colours directly, because a photograph contains almost no exactly repeated pixels — sensor noise and gradients see to that. So you first quantise: round every pixel into a coarse bin, then count the bins. And after that step, the most populated bins are all neighbours of whatever tone fills most of the frame. A landscape returns five greens. A portrait returns five skin tones. You get five samples of one region rather than five regions.

Clustering asks a different question. Instead of “which colours appear most”, it asks “where are the groups”, and it puts one swatch in each. The colours that matter to how an image looks — the orange of a sunset that occupies four percent of the frame, the one red object against a grey street — are exactly the ones counting discards and clustering keeps.

We measured how much difference that makes before building the page, because if the gap had been small the honest thing would have been not to ship it. Over twenty ordinary photographs, taking the distance in Oklab between the two most similar swatches as the measure of whether a palette is usable at all: the counting method's median was 0.0308 and clustering's was 0.1410, a median improvement of 4.6 times. Clustering won on all twenty, from 1.4 times to 7.2 times.

One correction to what we expected, because it is the sort of thing that gets repeated once someone writes it down. The prediction was that counting produces near-identical muddy tones. It usually does not, quite: taking 0.02 as roughly the point where two colours stop being distinguishable, only one palette in twenty had two swatches that close. What counting actually produces is clustered swatches — four to five times less separated than they could be, but not literally the same colour. The tool reports the real number rather than the memorable claim.

Honest limitations

The image is downscaled and sampled on a grid before anything is clustered. That is deliberate — a twenty-four megapixel photograph does not need every pixel examined to find five colours, and clustering all of them would measure your patience rather than the picture. It does mean a single very small but very saturated detail can be missed if it survives neither the downscale nor the grid.

Sampling is deterministic, so the same image always gives the same palette. That is worth more than it sounds: a tool that returned different colours on every run would be useless for picking something you then paste into a stylesheet. The cost is that the result depends on the grid, and an image with a strong repeating pattern aligned to that grid could in principle be sampled unrepresentatively.

Every swatch is snapped to a colour that actually occurs in the image rather than reported as a cluster average. An average of a cluster is a colour that may appear nowhere in the picture, which is a strange thing to hand someone as “a colour from this image”. The trade is that the swatch is a real pixel, not the mathematical centre of its group.

Fully transparent pixels are skipped. Including them would drag every swatch toward whatever the canvas background happened to be, which is a colour from your browser rather than from your image. Partially transparent pixels are counted as drawn, which is what you see.

Clustering does not know what the subject is. It finds groups of colour, not the thing you care about, so a photograph with a large uninteresting background will spend swatches on it in proportion to its size. If you want the colours of one object, crop to it first — the crop tool on this site does that without uploading anything either. The engine carries 31 assertions, including a synthetic image whose correct five-colour answer is known by construction.

Why is it free?

Decoding an image and clustering a few thousand pixels is work your own machine does in a moment, and it is the only machine involved. Nothing is uploaded, so there is nothing to pay for and nothing to put an account in front of.

If you want one colour rather than a palette, the image colour picker on this site lets you click a point and read it off. And if you want to work with the colours afterwards, the colour converter and the gradient generator take hex codes straight from here.