Color Palette Generator from Image
Note: The contrast figures tell you which of these colours can carry text. A colour extracted from a photograph is a colour that is present in it, not one that necessarily works as part of a scheme — the photograph's own lighting was doing that job.
The clustering runs in OKLab rather than RGB. That matters more than it sounds: RGB distance does not correspond to visible difference, so a naive clustering treats two greens that look identical as far apart while merging a dark blue with a black. Working in a perceptual space means the clusters break where your eye says they should.
The practical use is rarely the palette itself. It is checking whether a colour you already have works against the image — a caption over a hero photograph, a button on a product shot — and that is what the contrast column is for. Each extracted colour is reported with its ratio against black and white, so you can see immediately which parts of the image can carry text and which cannot.
One caveat about extracted palettes: an image gives you colours that are present, not colours that work together. A photograph is unified by its lighting, and pulling five values out of it removes exactly that unifying factor. Use the result as a starting point to adjust, rather than as a finished scheme.
The image never leaves your browser — it is read into a canvas locally and the pixels are analysed there.
Frequently Asked Questions
Why are the colours different each time I run it?
Because clustering starts from randomly chosen seed points, so runs can settle into slightly different groupings. The dominant colours stay stable; the minor ones may shift. Run it again if a result looks unrepresentative — it is not a bug, it is the algorithm.
Why not just take the most common pixel colours?
Because a photograph contains thousands of near-identical values, so the top ten by frequency are usually ten shades of the same sky. Clustering groups those together and returns one representative each, which is what makes the palette useful.
Can I use an extracted palette as a design system?
Not directly. An image gives you colours that are present, not colours that work as a system — and the thing unifying them is the photograph's own lighting, which you lose the moment you extract them. Treat it as a starting point, then build a proper ramp from the one or two that matter.
Is my image uploaded?
No. It is drawn into a canvas in your browser and the pixel data is read from there. Nothing is transmitted, which matters given how often the image is a client's unreleased photography.
Why is a very large image slower?
Because every pixel has to be converted and clustered. Images are sampled down before analysis so this stays fast, and sampling does not meaningfully change the result — a palette is a summary, and a quarter of the pixels summarise it identically.
