Palette from image
Choose an image and the number of colors. The tool shrinks a copy of the image, groups similar pixels with k-means clustering and lists the main colors with their share of the picture.
Runs in your browser: nothing you enter is sent anywhere.
How to use it
- Drop an image on the box or click it to choose a file.
- Use the slider to set the number of colors, from 3 to 12.
- Copy the HEX list or the CSS variables block.
The palette updates immediately when you change the slider; the image is read only once.
How it works
- The image is drawn onto a small canvas (at most 96 pixels on the longest side), which keeps clustering fast even for large photos.
- Pixels with less than half opacity are ignored.
- K-means starts from k pixels chosen by the k-means++ rule (far apart, deterministic seed), assigns every pixel to its nearest center in RGB, moves each center to the mean of its pixels, and repeats until nothing changes or 24 rounds have passed.
- Colors are sorted by the number of pixels, largest first.
Using the result
The CSS block looks like this:
:root {
--color-1: #1f3a5f;
--color-2: #e8d9b5;
}
Paste it into a stylesheet and use var(--color-1). Check text contrast with the contrast checker before using two palette colors together.
Frequently asked questions
How does it find the colors?
The image is shrunk to at most 96 pixels on its longest side, transparent pixels are skipped, and the remaining pixels are grouped into k clusters by k-means. Each cluster's average color is one palette color; bars are sized by how many pixels belong to it.
Will I get the same palette every time?
Yes. The starting points of k-means are chosen with a fixed seed, so the same image and the same number of colors always give the same result.
Why do I get fewer colors than I asked for?
If the image has fewer distinct colors than the number you chose (a flat logo, for instance), there is nothing more to separate, so only the colors that exist are listed.
Is my image uploaded?
No. The file is decoded by your browser and processed on this page. Only a small copy is held in memory, and nothing is sent anywhere.
Are the palette colors exact pixel colors?
Not always. Each is the average of a group of similar pixels, so it may not occur in the image exactly. That is what makes it representative, but for exact pixels use the image color picker.