Color Palette Extractor
Extract a dominant-colour palette from any image with k-means.
Overview
The Color Palette Extractor scans an uploaded image and returns the dominant colours it finds, ranked by how much of the canvas they cover. Drop in a photograph, a UI screenshot or a brand asset and the tool produces a colour palette from image clusters with both hex codes and percentage weights you can paste into a style guide.
Designers, brand teams and marketers reach for this when matching a hero photo to a button colour, building moodboards, or extracting brand colours from a logo to feed into Figma variables or CSS custom properties. It is also handy for accessibility audits that need an objective list of dominant hues before checking contrast.
How it works
The image is downsampled to a manageable resolution — typically 100,000-200,000 pixels — to keep the clustering pass quick. Each pixel becomes a 3-D point in RGB space, and k-means clustering iteratively assigns points to k initial centroids, recomputes each centroid as the mean of its members, and repeats until movement falls below a tolerance.
After convergence each centroid is a representative colour and its cluster size becomes the percentage weight. The centroids are converted to hex notation and optionally sorted by lightness or by share of the image so the palette reads as a clean swatch strip.
Examples
Sunset photo (5 colours):
#f9c87a 31% pale gold
#e36b3d 24% warm orange
#8d3a55 17% plum
#2a1a3f 15% indigo
#efeae1 13% off-white
Brand logo (3 colours):
#1d4ed8 56%
#ffffff 39%
#0f172a 5%
UI screenshot (8 colours) → drop straight into a Tailwind config.
FAQ
How many colours should I extract?
Five to seven works well for most photographs and design moodboards. Use three for logos and ten for very busy images such as collages.
Why does the same image return slightly different palettes between runs?
K-means starts with randomly seeded centroids, so the final cluster centres can drift by a few RGB units on each run. Use a fixed seed if reproducibility matters.
Does it ignore transparent pixels?
Yes — pixels with alpha below a threshold are skipped so the palette reflects only the visible content of PNGs or screenshots with cut-outs.
Can I bias toward saturated colours?
Setting a saturation floor filters near-greys out before clustering, which surfaces brand accents instead of background paper colours.
What colour space is used?
RGB by default. For perceptually-spaced palettes a Lab-space variant is more accurate but slightly slower; the default trades small accuracy for speed.