Image colour palette
Pull the dominant colours out of a picture, with hex codes ready to copy.
A small task starts here.
Drop an image here, paste it, or choose from your device.
Up to 30 MB · PNG, JPEG, WebP, GIF, or AVIF · Processed locallyResult
Choose a file and the result appears here automatically.
Image colour palette, without the extra steps.
Read the colours a picture is actually made of, with the share of the image each one accounts for. Every swatch is a colour that exists in the file — the one that occurs most often in its group, not the average of a group, which is how a brand red comes back wrong by one on every channel. See-through pixels take no part in it, so a logo on transparency does not report white as its main colour, and asking for eight colours from a four-colour graphic gives you four.
How to use this tool
- 1Choose a PNG, JPEG, WebP, GIF or AVIF. The palette appears as soon as it is read.
- 2Set how many colours you want and whether to copy them as hex, rgb(), hsl(), or CSS custom properties.
- 3Select a swatch to copy that one colour, or download the swatch strip.
When Image colour palette is the right tool
- A client's brand guide cannot be found and their logo is the only source of the brand colours — and it is a PNG on a transparent background.
- A deck is being built around one photograph and the theme editor wants five or six hex codes that go together.
- A developer needs the palette as CSS custom properties to paste into a stylesheet, not six hex strings to convert one at a time.
- Someone needs to know how much of a picture each colour actually is, because the real question is whether it reads as mostly green.
- A chart or an icon has four flat colours and they have to be matched exactly in a second graphic.
A swatch is a colour that is in the file
Quantizers hand back the average of the pixels that landed in each group, which is right for an encoder about to map every one of them onto it and wrong for a person who wants to use the colour. A brand red sitting beside its own anti-aliased edge averages to a red that appears nowhere in the picture and is off by one on every channel. Each swatch here is instead the colour that occurs most often in its group — exact, present in the file, and the same value a colour picker held over that part of the image would report.
Asking for eight cannot invent eight
A flag with four colours has four colours, however many the control is set to. The picture is grouped more finely than you asked for and then entries a person would call the same shade are folded into the one they belong to, which is what stops a photograph of a sky coming back as five near-identical blues and a screenshot as six greys from the same anti-aliased letters. When that leaves fewer than you asked for, the number found is written beside the control and the reason is on the page — rather than a list padded out to look complete.
See-through pixels are not a colour
A logo is usually delivered on transparency, and a palette that counts those pixels reports white or black as the largest colour in it, which answers a question nobody asked. Anything less than half opaque is skipped, the share of the picture that is see-through is reported on its own, and every percentage beside a colour is a share of what is actually visible. It is the same reason the shares add up to a hundred across the swatches rather than across the rectangle the file happens to be.
Sampled, never scaled down
A twelve-megapixel photo is twelve million pixel reads before anything appears, so large pictures are sampled — one pixel in every so many, with the rate shown beside the result. What it deliberately does not do is shrink the image first: scaling averages neighbouring pixels together and invents colours that are not in the file, which would quietly undo the one promise this tool makes. Sampling changes how precise a share is by a fraction of a percent; it cannot change a colour into one the picture does not contain.
A few quick answers.
Yes — that is the point of the tool. Each swatch is the colour that occurs most often inside its group, taken from the file as stored. Most palette tools hand back the average of a group instead, which for a brand red beside its own anti-aliased edge produces a red that appears nowhere in the picture and is wrong by one on every channel. Paste one of these into a design tool and it is the colour you picked.
Because the picture does not have that many that look different from each other. Colours are grouped more finely than you asked for and then the ones a person would call the same shade are folded together — the greys inside anti-aliased text, or one sky split five ways. A four-colour flag gives four colours however many you ask for, and the page says so rather than padding the list.
It is skipped. Pixels less than half opaque take no part in the palette, so a logo on transparency reports its own colours rather than white or black. The share of the picture that is see-through is reported separately, and the percentages beside each colour are shares of what is actually visible.
Yes. Set Copy as to CSS vars and Copy palette hands over a :root block with one custom property per colour, numbered in order of how much of the picture each one covers. The other notations are hex, rgb() with space-separated channels, and hsl() — all modern CSS colour syntax. Selecting an individual swatch copies just that one, in whichever notation is currently chosen.
Both, and the difference is handled rather than ignored. A photograph has thousands of distinct values and the grouping decides which ones represent it; a logo has a handful of flat colours with anti-aliased edges between them, and the edges are folded into the colours they sit between rather than being listed as colours of their own. What you get back for a flat graphic is its actual colours, and for a photograph its dominant ones with the share each covers.
The palette comes from the first frame, and the page says so when the file is animated. Later frames can introduce colours that are not in the list — a fade to black, a second scene — so for an animation treat the result as the palette of its opening frame rather than of the whole thing. Extracting the frames first and reading the one you care about is the way to get a later one.
They match the values stored in the file. There is no colour-management step here, so an image carrying a wide-gamut profile such as Display P3 reports its raw channel values rather than a conversion of them into sRGB. For the overwhelming majority of images, which are sRGB already, that is the same number your editor shows. For a wide-gamut file, expect the values to differ from an editor that is converting on the way in.