Colour Palette from an Image

How the colours are chosen

The naive approach is to count identical pixels and report the most common. It works badly on photographs, where a gradient sky contains thousands of slightly different blues and none of them individually wins.

This uses k-means clustering instead. Every pixel is a point in three-dimensional colour space; the algorithm places six centres, assigns each pixel to its nearest, moves each centre to the average of what it caught, and repeats. After a dozen rounds the centres have settled on the six colours that best summarise the image as a whole.

The percentage beside each swatch is how much of the image belongs to that cluster, so the order tells you which colours actually dominate rather than which merely appear.

Why an extracted palette often needs adjusting

Photographs give muddy colours. Real-world light desaturates everything, so the extracted values tend to be greyer than they look, and several may sit at similar lightness — which makes them useless as a text-and-background pair.

That is what the contrast figure beside each swatch is for. If a colour is under 4.5:1 on white it cannot carry body text, whatever it looks like. Take the hues from the image and rebuild the lightness with the shades and tints tool.

Getting a better palette

• Crop first. A photo that is 70 % sky gives you a palette that is mostly sky. Crop to the part you care about with the cropper.
• Avoid heavily filtered images, which give you the filter's palette rather than the subject's.
• Try two or three images from the same source and take the colours that recur.

Common uses

• Building a site palette from a photograph or a piece of artwork.
• Matching a design to a product photo.
• Extracting brand colours from a logo image when you do not have the original values.
• Picking chart colours that suit an accompanying image.

Questions people ask

How are the colours chosen?

By k-means clustering, which groups every pixel into six clusters and reports the average of each. That handles gradients far better than counting identical pixels.

What does the percentage mean?

How much of the image belongs to that cluster, so it tells you which colours actually dominate.

Why do the colours look duller than the photo?

Because they are averages. Real-world light desaturates things, and clustering pulls values towards the middle of each group.

Can I use these directly as a website palette?

Often not without adjustment. Check the contrast figures — extracted colours frequently sit at similar lightness and cannot be paired for text.

Is my image uploaded?

No. It is read into a canvas in your browser and analysed there.

Nothing is uploaded

The colour maths runs in the page. Where a tool takes an image, your browser reads it from your disk and draws it onto a canvas locally — no copy is transmitted, because this site has no server that could receive one. The about page lists every request the site makes, read live from your own browser.