How to use it
- Open an image.
- Choose how many colours you want.
- Click a swatch to copy it, copy the whole set as HEX or CSS, or download a swatch strip.
How the colours are chosen
The image is shrunk to a small working copy, then its pixels are grouped with a method called k-means clustering. It starts with a handful of well-spread colours, assigns every pixel to the nearest one, moves each group's colour to the average of its members, and repeats until the groups settle. Each swatch is the average colour of one group, and the percentage shows how much of the image it covers.
Because it averages, the palette reflects the colours that fill the picture, not the most eye-catching ones. A small bright red flower in a green field may not get its own swatch with five colours, but will appear once you ask for eight or ten.
Turning a palette into a design
A common approach is 60-30-10: the most common, usually quiet colour for backgrounds, a second for large surfaces, and a small, strong accent for buttons and highlights. The accent is often one of the smaller swatches. Check text contrast before using any pair of colours for reading: light text on a mid-tone swatch is a frequent readability problem.
Questions people ask
How many colours should I extract?
Five or six for a design palette. Go higher if a small but important colour is missing.
Does it give the same result every time?
Yes. The starting colours are chosen in a fixed way, so the same image and count give the same palette.
Are transparent areas counted?
No. Mostly transparent pixels are ignored.