What this does
Pick an image and get back a row of swatches — the handful of colours that best represent it — each with a hex code you can copy. Choose how many you want (2 to 16; the default is 6) and the palette recomputes instantly. Swatches run from lightest to darkest, so the first is usually a background candidate and the last a text or outline candidate. Nothing is uploaded: the image is drawn onto a canvas in your browser tab and the maths runs there.
How does it decide which colours to show?
It uses median-cut quantization, the same family of algorithm that GIF and indexed-PNG encoders use to shrink millions of colours down to a small palette. Every sampled pixel starts in one bucket. The tool looks at which channel (red, green or blue) has the widest spread in that bucket, sorts the pixels along it, and splits at the median. It keeps splitting the widest bucket until it has as many as you asked for, then averages each bucket into a swatch. Because splits happen at the median, buckets hold similar pixel counts — so the palette is balanced across the image rather than dominated by one big flat area.
How do I extract a colour palette from an image?
- Click Image and choose a file. A preview appears on the left.
- Set Swatches to the number of colours you want. Six is a good starting point; go higher for busy photos.
- Click copy under any swatch to copy that single hex code, or Copy all hex to copy every code as one newline-separated list ready to paste into a stylesheet or design token file.
Why isn't the swatch an exact colour from my image?
Each swatch is the average of the pixels in its bucket, not a single pixel picked from the image. A bucket spanning a gradient from pale sky to deep blue averages to a mid-blue that may appear nowhere in the photo. That is usually what you want from a palette — a colour that stands in for a region — but for the precise value of one spot, use the colour picker instead.
Why does the whole palette change when I change the count?
Going from 6 to 8 swatches does not simply add two more colours. The splits re-run, and a bucket that was one swatch before is now cut in two and averaged separately, so neighbouring swatches shift slightly. If you want a stable anchor colour, note its hex before you experiment.
Does it look at every pixel?
No — it scales the image down so its longest side is at most 200 pixels and samples that. For a palette the result is effectively the same as sampling the full file, and even a large camera JPEG returns in a fraction of a second. Pixels that are nearly transparent (alpha below 64 of 255) are skipped, so a logo on a transparent PNG gives you the logo's colours, not a wash from the empty area.
Which image formats can I use?
Anything your browser decodes natively: PNG, JPG, WebP, GIF (first frame only), BMP, AVIF and SVG. There is no HEIC decoder on this page, so iPhone photos need a pass through HEIC to JPG first. Once you have swatches, the contrast checker will tell you which pairs are readable together, and the colour blindness simulator shows how the palette holds up for different kinds of vision.