Get the color palette from an image
Pull the main colours out of any image as hex codes, ordered by how much of the picture each one covers.
Swatches are ordered by how much of the image they cover. Transparent areas are ignored, so a logo's background doesn’t count as a colour.
Drop an image here or paste from the clipboard.
Your file is read on this device. Nothing is uploaded.
What the numbers mean
Each swatch shows a hex code, its RGB values and the share of the visible image it represents. The bar under the image shows those shares to scale, which is the quickest way to see whether a palette is dominated by one colour or evenly spread.
Click a swatch to copy its hex code. The export below the swatches gives the whole set as a plain list, as CSS custom properties ready to paste into a stylesheet or as JSON.
Getting a useful palette from a photo
A photograph has thousands of colours and any palette is a simplification of them. Five or six colours usually capture the mood; more starts to split one area into near-identical shades. Very similar swatches are merged automatically so the list stays useful.
If you want the palette of one part of an image, crop to that part first. A palette taken from a whole landscape is mostly sky and ground; the same photo cropped to the subject gives you the subject's colours.
Why the image is sampled small
The palette is about proportions, not detail, so the image is reduced to around 200 pixels on its long edge before the colours are counted. The result is the same as analysing every pixel of a 12 megapixel photo and it arrives instantly instead of after several seconds.
Common questions
How are the colours chosen?
By median cut, which repeatedly splits the image’s colours into groups along whichever channel varies most, then averages each group. It is deterministic, so the same image always gives the same palette, which matters when you come back later to check a brand colour.
Why is the order not what I expected?
Swatches are ordered by how much of the image each one covers, not by how eye-catching they’re. A small red logo on a large grey wall produces grey first and red last, even though red is what you notice. Raise the colour count if an accent colour is missing entirely.
Why does my logo not show black for the background?
Because fully transparent pixels are ignored. Without that rule every logo on a transparent background would report black or white as its main colour, since that is what transparent pixels technically contain. Only the colours you can actually see are counted.
Are the hex codes exact?
They’re averages of groups of similar pixels, so they represent a region of the image rather than any single pixel. For a flat logo that is effectively exact. For a photograph it is the typical colour of an area, which is usually what you want for a palette anyway.
Can I use this to pick brand colours?
As a starting point, yes. Export the palette as CSS variables and you have a working set. Check the contrast of any text colour against its background before relying on it, since a pleasing palette and a readable one aren’t always the same thing.
Guides
The other tools
All of them work the same way: the file is read in your browser and never uploaded.