How the colors 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 colors 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 color
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 (24 px, or 18.66 px when bold) and for UI borders |
| 7.0 or more | passes AAA for normal text |
So a color 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 color 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 color strip with hex codes burned in. If the palette ends up as a site icon, the favicon generator redraws the mark at every size a browser asks for, and shows, at real size, that only one or two of your colors survive at 16 pixels.
Questions
Is my image uploaded?
No. It is decoded and analysed in your browser.
How many colors should I pick?
Five or six covers most images. More than eight usually produces near-duplicates rather than new information.
Why are the colors 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 color.