What this does
It finds the handful of colours that best describe a picture, a photo, a logo, a painting, a screenshot, and gives them to you in the forms you are likely to need: hex codes, CSS custom properties, a PNG card of the swatches, or a palette file for GIMP, Inkscape and Krita. Each colour shows how much of the picture it covers, and whether black or white text reads on it.
It runs in your browser. Nothing is uploaded, which matters for the unreleased logo, the client’s mock-up and the photo of your children alike.
How to use it
- Drop a JPEG, PNG or WebP onto the tool, or press “Choose an image”.
- Set how many colours you want with the slider. The palette updates as you drag, most used colour first.
- Click a swatch to copy its hex code, or use the buttons to copy every code, copy the palette as CSS, or download it as a PNG or a GIMP palette.
- To read the colour of one exact spot, click it on the picture.
How the colours are chosen, measured
A palette tool has to decide which few colours stand for thousands. This one groups the picture’s colours with k-means clustering in OKLab, a colour space built so that equal distances look equally different, and averages each group’s colours as light rather than as file numbers, for the reason the pixel-art converter explains: file numbers are not proportional to brightness, and averaging them darkens.
We measured how well the result represents the picture, on the 24 standard Kodak test photographs: for every part of each picture, how far its colour is from the nearest palette colour, judged by CIEDE2000, the industry’s standard formula for how different two colours look. Lower is better.
| Colours | This tool | k-means on file numbers | Median cut |
|---|---|---|---|
| 5 | 6.60 | 6.69 | 7.30 |
| 8 | 5.17 | 5.27 | 5.87 |
| 12 | 4.21 | 4.31 | 5.08 |
Against median cut, the classic method, this tool’s palettes are 10 to 17% closer to the picture. Against plain k-means on the file’s numbers, the common approach, the gain is small, 1 to 2%, and it was the better palette on 14 to 17 of the 24 photographs rather than all of them. We would rather say so than round it up.
One more rule: colours nobody could tell apart are merged. Ask a one-red logo for two colours and clustering will dutifully find two reds a shade apart, so the tool folds anything closer than a just-noticeable difference into one swatch, and you get fewer colours than you asked for only when the picture really has fewer.
Transparency
Logos usually arrive as PNGs with transparent backgrounds, and a transparent pixel still stores a colour, often black, that nobody ever sees. Count it and the logo’s palette gains a black it does not have. This tool weights every pixel by how opaque it is, so see-through areas add nothing and half-transparent edges count half.
Contrast, checked
Under each swatch is the better of black or white text on that colour, and its contrast ratio by the formula in the web accessibility guidelines. A ratio of 4.5:1 or more is fine for body text; below it, keep that colour behind large headings. It is the quickest way to tell which of a photo’s colours can carry words.
Limitations
Up to twelve colours. More than that is less a palette than a posterised copy of the picture; the pixel-art converter goes up to 64.
Colours are as the file stores them. A photo of a painted wall gives the colour the camera recorded, which depends on the light it was taken in, not the paint’s name on the tin.