Image tool
Colour Palette Generator
Drop in a picture and get the colours that are actually in it, in roughly the proportions they appear. Each swatch says whether black or white text will read on it, and every neighbouring pair comes with its WCAG contrast ratio.
The image is decoded by your browser into a canvas on this page. It is never uploaded, and nothing is saved — close the tab and the picture is gone.
Loading the palette tool…
How this one works
A palette tool answers two different questions, and they are worth separating. The first is what colours are actually in this picture. The second is whether two of them can carry text together. The first is a measurement. The second is a judgement, and no amount of measuring will make two colours that clash look deliberate.
The colours are clustered, not averaged
An average of a photograph is a colour nobody chose, usually a muddy grey-brown, because averaging pulls every saturated pixel toward the middle. This groups the pixels instead and reports the centre of each group, so the colours come back looking like the parts of the picture that are actually colour. Each swatch shows roughly what share of the image it accounts for, which is what tells you whether a colour is a subject or an accident: 40% is a decision someone made, 2% is a highlight.
Why the colours come out in an odd order
The swatches are listed by how much of the picture each one covers, which is the useful order for “what is in this image” and a poor order for building anything. The ramp further down puts the same colours from lightest to darkest, because that is the order a palette gets used in. Neither is a judgement about which colours go together; that is still yours to make.
Contrast is computed, not guessed
Every swatch states whether black or white text will read on it, and every neighbouring pair comes with its WCAG contrast ratio. AA is 4.5:1 for body text and 3:1 for large text. A pair below those numbers is not a fault in the palette; it is two colours that should not be used together for text, which is information you would otherwise get by finding out after the design was published. The crossover where white stops beating black is around #6d6d6d, so on anything lighter than mid grey the darker text is the readable one.
A palette is not a scheme
Nothing here adjusts the colours to look like a design system. If a photograph contains two almost identical greens, you get two almost identical greens, because that is what the picture holds and quietly changing one to make the pair look intentional is a decision made for you by an algorithm. The shades option on each colour gives you lighter and darker steps of the same hue, which is closer to what a designer would do, but it is still your call which steps to use and how much of each.
Nothing is stored
The image is decoded by the browser into a canvas on this page. It is never uploaded, and no palette is kept: close the tab and it is gone. Copy the hex list, the CSS custom properties or the JSON while you are looking at it, because there is nothing to come back to.
When to use something else
If you need a palette that works in print rather than on a screen, screen values are not print values and this will not convert them. If you need colour-blind safe variants, a palette generator cannot tell you which of your colours become indistinguishable, though the contrast figures give you a starting point. And if you need the brand colours for a set of files, take them from the brand and use this only for what the picture suggests.
Building a palette that holds together
A palette fails most often on contrast rather than on taste. Two colours can look pleasant side by side and still be unreadable as text on background, so check the pairing you intend to use for text before you commit to it, not after you have built the page around it.
A small number of colours used consistently reads better than a large set used unevenly. One strong accent, one or two neutrals, and a background is enough for most interfaces, and it leaves you somewhere to go if you later need a warning colour or a second state.
Hue and brightness are separate decisions. Colours that differ only in brightness produce a quiet, cohesive palette and are easy to make accessible; colours that differ mainly in hue look lively but often share the same lightness, which is exactly the case that fails for colour-blind readers.
Write the values down once you have them. A palette that exists only in a screenshot tends to drift as soon as someone picks a slightly different shade by eye, and the drift is invisible until the two versions sit next to each other.
Further reading: Read the full guide: Colour Palette Generator
Common questions
How does it choose the colours?
By clustering the pixels rather than averaging them. Averaging pulls every colour in a photograph toward the middle, which is why naive tools hand back grey-brown mud. Clustering finds groups of similar pixels and takes the centre of each, so the colours are ones that actually appear in the picture.
Will it fix a palette that looks wrong?
No, deliberately. It does not adjust the result into a scheme, so a palette containing two almost identical greens stays that way. That is not a bug — it is what the image contains. Sorting by coverage helps you judge it: a colour filling 40% of the frame was a decision someone made, one filling 2% is a highlight.
Can I copy the colours?
Yes, as hex, RGB or HSL. Each colour also has its WCAG contrast ratio against its neighbours worked out, which is the part people skip and then wonder why their text is unreadable.
Which text colour should go on it?
The crossover sits around #6d6d6d, so anything lighter than mid-grey needs dark text on it and anything darker needs light text. The tool works this out per pair so you do not have to estimate it.
Is my photo uploaded?
No. The pixels are read and clustered in this tab, and the file never leaves your device.