Colour palette extractor
Drop in an image and get its dominant colours back as HEX, RGB and HSL, sorted by how much of the image they cover, ready to copy as CSS variables.
Palette settings
More swatches split similar colours further apart instead of merging them.
Related tools
Drop an image here
or · one at a time
Palette
Drop an image above. It's sampled down to a small canvas for speed, then clustered into a handful of dominant colours.
How the palette is built
The full-resolution image is first drawn onto a small offscreen canvas —
capped around 200 px on the longest side — so sampling stays fast even on
a large photo. Every sampled pixel is read with getImageData,
fully transparent pixels are skipped, and each remaining pixel's red, green
and blue channels are quantised down to 4 bits each. That collapses 16.7
million possible colours into 4,096 coarse buckets, and a histogram counts how
many sampled pixels land in each one.
The buckets with the most hits become the palette. Rather than showing the flat centre of each bucket, the tool goes back over the sampled pixels a second time and averages the real red, green and blue values of everything that fell into the winning buckets — so a swatch labelled as the top colour is the actual average of the pixels it represents, not just a rounded-off grid point.
Reading the proportion bar
The horizontal bar above the swatch cards is scaled by how many sampled pixels each colour accounted for, so it's a quick visual read of which colours actually dominate the image versus which ones are present but minor. A photo of a red apple on a white plate typically shows one or two wide bands and several thin ones — the true colour makeup, rather than an evenly split rainbow.
Using the output
Each swatch card shows HEX, RGB and HSL with its own copy button, for whichever
format a particular tool expects. "Copy all as CSS variables" builds a single
:root block with --palette-1 through
--palette-N in dominance order, ready to paste straight into a
stylesheet as a starting design-token set pulled from a real photo or logo.
How are the dominant colours chosen?
The image is sampled onto a small canvas, each pixel's colour is quantised into a coarse bucket, and the most frequently hit buckets are kept. Each bucket's swatch is then refined by averaging the exact colours of the real pixels that landed in it, so the result reflects the image rather than a fixed grid.
Why does the palette change slightly if I re-run it?
It doesn't — the sampling and bucketing are deterministic. What changes the result is the swatch count, which changes how finely similar colours get split apart.
Does transparency affect the palette?
No. Fully transparent pixels are skipped before sampling, so a logo on a transparent background won't have its palette diluted by empty space.
Can I use the output directly in CSS?
Yes. "Copy all as CSS variables" copies a ready-made :root block with --palette-1 through --palette-N, ordered from most to least dominant, ready to paste into a stylesheet.
Why does a busy, colourful photo sometimes show near-duplicate swatches?
Quantisation buckets colours by proximity, not by name, so two close but distinct shades of sky can occasionally both survive as separate top buckets. Lowering the swatch count merges them back together.