How the colours are chosen
The image is scaled down, the pixels are clustered with k-means, and the centre of each cluster becomes a swatch. That is why you get the colours that actually cover area in the image, not the most saturated pixel or a random sample.
Sorting is by brightness, so the palette reads from light to dark and is easy to map onto background, text and accent roles.
The two numbers under each colour
They are contrast ratios against white and against black, calculated the way the accessibility guidelines define it.
| Ratio | Means |
|---|---|
| 4.5 or more | passes AA for normal text |
| 3.0 or more | passes AA for large text from 24 px, and for UI borders |
| 7.0 or more | passes AAA for normal text |
So a colour showing 2.1 / 9.8 is unusable as text on white but excellent on black. This is the fastest way to see whether a brand colour can carry text at all.
Using the palette
Copy as CSS gives you a block of custom properties you can paste straight into a stylesheet. The PNG export is handy for a mood board or for sending a client a colour strip with hex codes burned in.
Questions
Is my image uploaded?
No. It is decoded and analysed in your browser.
How many colours should I pick?
Five or six covers most images. More than eight usually produces near-duplicates rather than new information.
Why are the colours slightly different from Photoshop?
Any palette extraction is an approximation. Clustering averages similar pixels, so results differ between algorithms, and none of them is wrong.
Does it work with transparent PNGs?
Yes. Pixels that are mostly transparent are ignored so the transparent area does not pull the palette towards one colour.