Image
Colour Palette Extractor
Pull the colours out of a photograph or a logo, with the share of the image each one covers. Every swatch is a colour the picture actually contains, not an average of colours it contains. Runs in your browser — the image is not uploaded.
How to use it
- Drop an image onto the page, or choose one. It is read in your browser and not uploaded.
- Move the slider to ask for more or fewer colours — the image is only read once, so this is instant.
- Read the bar: each band is as wide as that colour is common in the image.
- Click any swatch to copy its hex value, or take the whole palette as CSS, Tailwind or JSON.
How it works
Every pixel is turned into Oklab, a colour space built so that equal distances look equally different. This matters more than it sounds: in RGB, the numeric gap between two dark blues is the same as the gap between two greens nobody would confuse, so grouping by RGB distance collapses the shadows into one swatch while splitting the highlights into three near-identical ones. Oklab is what makes the groups correspond to colours a person would name separately.
The colours are then divided by repeatedly cutting the widest group along its widest axis, and each pixel is reassigned to whichever group centre it is nearest. Nothing in this starts from a random guess, so the same image gives the same palette every time — unlike k-means, which most extractors use and which answers differently on each run.
Each swatch is then the real pixel closest to its group’s centre, not the centre itself. The centre of a group is often a colour that appears nowhere in the picture: average a red flower against green leaves and the answer is a brown found in neither. Taking the nearest real pixel means every value you copy is one you could have picked off the image with an eyedropper.
Two clean-up steps follow. Groups closer together than the eye can separate are merged. Then small groups that sit on the straight line between two larger ones are folded into them — that is the signature of an anti-aliased edge, where the renderer has blended two colours across a boundary, and it is why asking a two-colour logo for six colours here returns two rather than two plus four greys. A small group that sits off that line is kept, because that is an accent rather than a blend.
Transparent pixels are skipped rather than counted. Most encoders store black underneath the clear parts of a PNG, so counting them drags every group toward black and returns a night-time palette for a bright logo.
Common questions
Is my image uploaded?
No. It is decoded and measured by your own browser and never leaves the machine. That is also why this works with the network off once the page has loaded.
Why do the swatches look different from other palette tools?
Two reasons, and both are deliberate. The colours are grouped in Oklab rather than RGB, so the grouping follows what the eye sees rather than what the numbers say — in RGB the gap between two dark blues counts the same as a gap between two obviously different greens, which is why so many extractors return several near-identical darks. And each swatch is a real pixel from the image rather than the average of its group. Averaging a red flower against green leaves gives a brown that is in neither.
I asked for eight colours and got five.
Then the image has five. The count is a ceiling rather than a promise, because the alternative is inventing distinctions that are not there — which is how a two-colour logo ends up reported as six shades of the same blue. Anti-aliased edges produce a band of in-between pixels along every boundary, and those are folded back into the colours they sit between.
What do the percentages mean?
The share of the image each colour covers, counting only pixels that are not transparent. It is the part a plain list of hex codes throws away, and usually the part that tells you which colour is the background and which is the accent.
What is the ratio next to each colour?
The WCAG contrast ratio for black or white text on that colour, whichever reads better. The number is given rather than a pass or fail because the threshold depends on the text: 4.5:1 for body copy, 3:1 for large or bold. A tool that says “pass” has assumed which one you meant.
Will the same image always give the same palette?
Yes. Nothing here starts from a random guess, which many palette extractors do — they use k-means, which needs somewhere to start and so answers differently on a second look. Values that get copied into a stylesheet should not move between visits.
Can I get the palette of a photograph taken under a warm lamp?
You will get the colours as the photograph has them, which under a warm lamp means warm. Nothing here corrects white balance, and it should not: the honest answer to “what colours are in this image” is the colours that are in it. Correct the photograph first if you want the colours of the scene rather than the picture.