Colour palette extractor

Pull the dominant colours out of any image.

How to use Colour palette extractor

  1. Drop an image onto the upload area.
  2. Choose how many colours to extract: 4, 6, 8 or 10.
  3. Click any swatch to copy its hex code. Each one shows its RGB value and how much of the image it covers.
  4. Click Copy as CSS variables to copy the whole palette in one go.

A photo is made of millions of subtly different pixel values, so a raw count of exact colours never tells you anything useful — it just finds thousands of near-duplicates. This groups similar pixels together with k-means clustering (the same technique used for this kind of colour analysis generally) and returns however many genuinely distinct, dominant colours you ask for.

Each swatch shows its hex code, RGB value and what share of the image it covers. Click a swatch to copy its hex code, or copy the whole palette at once as CSS custom properties.

Useful for pulling a colour scheme from a photo, a logo, or a screenshot of a design you like — match brand colours to a reference image, or just see what a photo is actually made of.

Questions

How many colours should I extract?

6 is a good default for most photos. Fewer (4) gives a punchier, simplified palette; more (8-10) captures subtler secondary tones — useful for busier or more colourful images.

Why don't the swatches exactly match colours I can see in the image?

Each swatch is the average colour of a whole cluster of similar pixels, not a single sampled pixel — that's what makes it representative of a region rather than one arbitrary point. For an exact single-pixel colour, use the colour picker tool instead.

Does transparency affect the result?

Fully transparent pixels are excluded from the analysis, so a logo on a transparent background won't have its palette diluted by the empty background.

Is my image uploaded anywhere?

No. The whole analysis runs directly in your browser — the file never leaves your device.

Guides

Related tools