How to Extract a Color Palette from an Image

Key takeaways

Palette extraction clusters an image's colours (typically k-means or median-cut over quantised pixels) and reports the dominant groups with their real proportions.
The dominant colour is rarely the subject — count pixels, not importance; a 70% sky will lead the palette and you may want the 3% jacket.
Apply extracted colours with the 60-30-10 rule: dominant surface, secondary structure, accent energy — and pull a neutral out for text.
Extract from the mood reference, not the subject reference: film stills, album covers and travel photos yield the most usable schemes.
The output codes are RGB and HEX; a palette tool's job ends at the swatch, so check contrast against white and black before adopting any of them.

How the Extraction Works

A photo contains tens of millions of colour values — noise around a few dozen real ideas. The algorithm's job is clustering: quantise or sample the pixels, group similar colours, and rank the groups by how much of the image they explain. The common approaches — k-means iterating toward representative centroids, median-cut splitting the colour cube along its widest axis (the same lineage as GIF's own palettes), octree merging in octant trees — differ in speed and in how they treat rare-but-important colours, and all answer the honest question: which colours are there, and how much of each?

The consequence users are surprised by: results are weighted by area, not meaning. A portrait against a grey wall produces a grey-dominated palette because grey is most of the file. If you want the subject's colours, crop to the subject first — the crop is the question you are actually asking.

Reading the Output

A palette tool returns the swatches with HEX (#3B82F6) and RGB values, usually ordered by dominance and sometimes with proportions. HEX is the design-tool and CSS currency, RGB the code and canvas currency; both refer to the same sRGB colour. What neither tells you — and what you must check before adopting a colour — is whether text sits legibly on it: a mid-tone that looks perfect in a swatch row can be a WCAG disaster at body-copy sizes.

The perceptual trap worth knowing: extraction is maths on pixels, and pixel distances are not perceptual distances. Two swatches three RGB steps apart may read as identical (and waste a slot), while a perceptually distinct pair sits far apart in values the clustering treats as one (and never appears). If a colour you can see in the image is missing from the palette, it is probably in the minority — crop tighter and extract again at higher k.

From Swatches to a Scheme

Six colours from a photo are not a design system; the mapping is where taste enters. Take the largest cool-toned area as the surface/neutral, the mid-dominant as the secondary structure, the smallest high-chroma area as the accent — that is the 60-30-10 skeleton wearing the photo's clothes. Every one of them needs a neutral companion for text; if the image yields none, derive one by desaturating the dominant hue to near-white and near-black rather than defaulting to #FFF and #000, which sit visibly harsh against a warm scheme.

For brand matching — extracting the colours of a product photo, a venue, a client's existing environment — the same logic applies with an extra step: convert to HEX and check the values against the brand's real palette, because extraction gives you the colour as photographed, and a warm tungsten cast has shifted everything toward orange that the print swatch does not contain. Colour-managed extraction (sampling before any cast correction) is a different report than 'what the brand thinks its colour is'.

What to Extract From (and What to Skip)

Best sources: film stills and music artwork, because they were colour-graded by professionals — extracting from them is borrowing a colourist's decisions; landscapes and city photography, which contain naturally harmonised hues (the physics of shared light does the coordination for you); interiors and product shots, where the palette is literally a designed palette.

Worst sources: images with heavy JPEG artefacts (the banding around edges invents colours that do not exist in the scene — compressing first stabilises the clusters), screenshots of UIs (already limited to brand hues; extraction gives you the brand's own colours back with more noise), and any gradient-heavy image, where every intermediate value is real, present, and not a colour anyone would choose.

Practical Workflows

The website hero: extract from the exact photo you are about to ship, take the three largest areas as surface and structure, and the three smallest saturated ones as accent candidates; then build the hero layout using the palette's own colours for the overlay, the button and the headings — the design matches the image because it is the image, which is why the technique reads as 'cohesive' when nobody can say why.

The mood board: extract from each reference, line the palettes side by side, and look for the recurring hue families across shots — that recurring cluster is the brief the photographer or art director was actually following, written in HEX. The whole exercise is three minutes with a batch of images and the extractor.

Frequently asked questions

The questions people ask most about how to extract a color palette from an image, answered directly.

How do I extract colors from an image?

Drop the image into a colour-extraction tool — the browser palette extractor samples the file locally and returns the dominant clusters as swatches with HEX and RGB codes. Crop to the subject first if you want its colours rather than the background's.

What is the algorithm behind palette extraction?

Usually k-means clustering or median-cut over quantised pixels: group similar colour values, rank the groups by pixel count, and return the representatives. It measures which colours are present and how much, which is an area-weighted question — not the same as which colours matter in the image.

How do I get the hex code of a color in a picture?

Open the image in the palette extractor and click the swatch — the HEX value is the design-tool currency. For a single specific point rather than a cluster, any editor's colour picker on the image reports that exact pixel's HEX.

Why is the palette missing a color I can clearly see?

Because it is minority: extraction ranks by area, and a strongly coloured subject against a large neutral background can be the smaller share. Crop tightly to the thing whose colours you want and re-extract; the crop tells the algorithm what 'the image' means.

Can I extract a palette from a screenshot?

Yes, and it is a genuinely useful trick for matching an existing design — a screenshot of a UI whose style you want to echo yields its exact brand HEX values without eyeballing them. UI screenshots are flat-colour with hard edges, which is the easiest case an extractor can receive.

How many colors should a palette have?

Five to seven as an extraction target; three to four plus neutrals as a design input. Beyond seven the clusters start splitting imperceptible differences into 'new' colours; below three you are averaging the photo away, and the connective tissue that made the reference harmonious is exactly what you are trying to keep.

Is extracted colour the same as the real colour?

As photographed, yes; as designed, maybe not. Lighting and white balance shift everything in the file — a 'brand red' sampled from a tungsten-lit photo is orange-tinted truth. For exact brand matching, use the brand's published values; for mood, the photographed colour is the right answer.

What do I do with the RGB and HEX values?

HEX goes into CSS and design tools; RGB into code and canvas APIs. The practical next step is the 60-30-10 mapping — largest cool area as surface, mid-dominant as structure, smallest saturated as accent — and contrast-checking every text pairing before shipping.

Does the palette tool work offline or without uploading?

The extraction runs in the browser tab on the decoded pixels, so there is no upload and the tool keeps working once the page is loaded with the connection down. Reference images you cannot share — client work under NDA — are exactly what no-upload extraction protects.

Can I extract a palette from a video?

Directly, no — video needs a frame capture first, which your player's screenshot or a frame-grab tool does. Because films are professionally graded, single-still extraction is a favourite technique of colourists and set designers; the medium's whole look compresses to six swatches surprisingly well.

Why do my extracted colors look different in my design?

Simultaneous contrast: a swatch seen alone on white is not the same colour seen beside its neighbours on a surface. Build one small mock of the palette in use — a card, a header — before committing; the ordering and backgrounds change the reading more than the values did.