How Image Colour Palette Extraction Works
Colour palette extraction takes an image that may contain tens of thousands of distinct colours and reduces it to a small set of representative ones by grouping similar colours together — a process called colour quantisation, usually done with a clustering algorithm. The palette you get isn’t a list of the literal pixel values; it’s a summary of the image’s colour, chosen so a few swatches stand in for the whole picture. Here’s how that works.
This guide explains the method behind palette extraction and how to pull a palette from any image with the colour palette extractor.
Why you can’t just “list the colours”
An image is a grid of pixels, each with a red, green and blue value. A photo commonly contains tens of thousands of distinct RGB values — every subtle gradient in a sky is a different colour. Listing them all would be useless. What you actually want is a handful of colours that represent the image: the dominant tones a person would name if asked “what colours is this?”. Getting there means grouping the thousands of near-identical colours into a few buckets.
The core idea: clustering in colour space
Think of every pixel as a point in a 3D space whose axes are red, green and blue. Similar colours sit close together; a photo of a forest forms dense clouds of points in the greens and browns. Palette extraction finds the centres of those clouds — each centre becomes one swatch in the palette. Two common approaches:
- K-means clustering. You ask for k colours (say 5). The algorithm places 5 points, assigns every pixel to its nearest one, moves each point to the average of its assigned pixels, and repeats until they settle. The final 5 positions are your palette.
- Median cut. The colour space is repeatedly split in half along its widest axis until you have the number of boxes you want; the average colour of each box becomes a swatch. This is the classic method used to shrink images to a fixed palette.
Both answer the same question — “which few colours best summarise this image?” — and both depend on the number of colours you ask for.
Dominant vs representative colours
There’s a subtle distinction worth knowing. The most dominant colour is simply the one covering the most pixels — often a background. A good representative palette also surfaces the smaller but characterful colours (a bright accent that’s only 3% of the image) that define its look. A useful extractor reports the proportion each swatch covers, so you can tell a 60%-of-the-image sky-blue from a 2% accent red.
How to extract a palette
Drop an image into the colour palette extractor: it clusters the pixels, returns the dominant colours as swatches with their hex codes, and does it all in your browser, so the image is never uploaded. Choose how many colours you want — fewer for a broad summary, more for a detailed palette. The hex codes drop straight into a design tool, CSS, or a brand style guide.
Frequently asked questions
How does colour palette extraction work?
It groups the image’s thousands of pixel colours into a few clusters in RGB colour space (using k-means or median cut) and takes the centre of each cluster as a representative swatch.
What is colour quantisation?
Reducing the many distinct colours in an image to a small representative set — exactly what palette extraction does.
What’s the difference between dominant and representative colours?
The dominant colour covers the most pixels (often a background); a representative palette also includes smaller but characterful accent colours that define the image’s look.
Can I choose how many colours the palette has?
Yes. You set the number — fewer swatches give a broad summary, more give a detailed palette.
Do I get hex codes I can use in design?
Yes. The colour palette extractor returns each swatch’s hex code, ready for CSS or a design tool, without uploading your image.
Related reading
Last updated: 16 August 2026.