Extract Color Palette from Image — Free
Your photo is decoded and edited in this tab. It stays local, including whatever its metadata says about where it was taken.
Loading the tool…
How it works
Clustering, not counting
Naively counting distinct pixel values is useless on a photograph: a sky can contain thousands of near-identical blues and no two pixels agree exactly. Palette extraction is therefore a clustering problem. The image is downsampled to a few hundred pixels on the long edge — plenty for colour statistics, and orders of magnitude faster — then the pixels are grouped into a fixed number of buckets and each bucket's average is reported. Which colours come out depends on the algorithm, which is why two tools give two different answers from the same photo.
- Colour count
- Typically 3 to 12 swatches. More buckets split near-identical shades; fewer merge distinct ones into a muddy average.
- Dominant colour
- The largest cluster, which on most photographs is the background or the sky rather than the subject you were interested in.
- Output formats
- Hex for CSS, RGB triples, and HSL when you want to derive tints and shades from the extracted hue.
- Colour space
- Values are reported in sRGB after the browser decodes the file. A Display P3 or Adobe RGB original is converted first, so wide-gamut colours land at their nearest sRGB equivalent.
- Downsampling
- Clustering runs on a reduced copy. It changes the speed by orders of magnitude and the resulting swatches barely at all.
How to use it
How to extract a color palette from an image
- 01
Drop in the image
Photograph, screenshot, illustration or a screenshot of a website.
- 02
Choose how many colours
Five is a good default for a palette; three for a strict brand-style reduction.
- 03
Copy the values
Each swatch copies as hex, RGB or HSL, ready to paste into CSS or a design file.
Where it earns its keep
Where a colour palette is the starting point
- Building a page's colour scheme around a hero photograph already on it.
- Recovering the hex codes from a brand asset when nobody can find the style guide.
- Choosing a background that sits comfortably behind an image rather than fighting it.
- Picking a slide or chart accent colour from a photograph in the same deck.
Questions
Color Palette Extractor, answered
Will it match the palette another tool gives me?
No, and no tool matches another. Median cut, k-means and octree quantisation all make different decisions about where one colour ends and the next begins, so the swatches differ. Treat any extracted palette as a well-informed starting point, not a measurement.
Is my image uploaded to read its colours?
No. The file is decoded in this browser tab and the pixels are read from a canvas locally. Nothing is transmitted.
Why is the dominant colour not the one I see first?
Because dominance is measured by area, and your eye is drawn by saturation and contrast. A photo that reads as bright orange can be mostly pale grey wall. Ask for more swatches and the accent you were looking at will appear further down the list.
Are the extracted colours accessible for text?
Not necessarily. Extraction says nothing about contrast ratio, and two swatches from the same photograph will often fail WCAG against each other. Check the pair you intend to use before shipping it.