Extracting a Palette From an Image
A palette taken from a photograph is only useful if the colours coming back are actually distinguishable from each other — eight shades of the same blue is not a palette. The extractor clusters the image's pixels, merges the groups too close to tell apart, and reports what share of the picture each surviving colour covers.
Open the Palette ExtractorHow the colours are chosen
The image is drawn to a canvas and its pixels are grouped by K-Means, seeded with K-Means++ so the starting points are spread across the image rather than clumped in one corner of it. It asks for more groups than you requested and merges the ones too close to distinguish afterwards, which is why eight swatches come back as eight different colours instead of one colour in eight lightnesses.
Pinning what you want to keep
Any swatch can be locked. Re-rolling then leaves the locked ones alone and re-clusters only the rest, so a palette that is nearly right does not have to be found again from scratch. Changing how many colours you want costs nothing either — the credit is charged once for the image, not once per attempt.
What the percentages mean
Each figure is that colour's share of the sampled pixels, and the set on screen always adds up to exactly 100. The numbers size the coverage bar and are copied into the CSS, JSON and PNG exports, so they describe the swatches you can see rather than a longer list that was trimmed after the arithmetic.
Step by step
- Drop an image in, pick one from your device, or paste a link that points straight at an image file.
- Set how many colours you want — up to ten — and sort them by share, hue or lightness.
- Lock the swatches worth keeping and re-roll the rest until the set works.
- Copy a single value, or export the palette as CSS, JSON, a Tailwind config or a PNG swatch sheet.
Frequently asked questions
Does my image get uploaded anywhere?
A file you drop or pick does not. It is read into a canvas and clustered by code running in your own browser, and the pixels never leave the machine. A link is different: the image has to be fetched through the site, because a browser will not let a page read the pixels of an image served from another origin.
Does a broken link cost credits?
No. The image is fetched and checked before anything is charged, so a typo, a 404, or an address that turns out to be a web page rather than an image stops without spending. Dropping a file that is not an image is refused the same way.
Why is the palette different each time I re-roll?
Clustering starts from seeded centroids, and K-Means++ chooses those with a deliberate element of chance, so separate runs explore different splits of the same image. That is what makes re-rolling worth doing — and why locking the swatches you have settled on matters.