Image dominant colors
Extract the dominant colors of an image with a simplified k-means (k=5) on a downscaled canvas, see each share with HEX/RGB, then copy CSS variables or download a palette image.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Images are processed locally in your browser and never uploaded
The image is downscaled to 100×100, then k-means runs 10 iterations — results are reproducible.
Pick an image first
Pick an image and the dominant colors, shares and CSS variables show up here.
What this tool does
- Pull a palette out of a screenshot or a poster: k-means reduces it to 3, 5 or 8 dominant colors, sorted by share so the overall tone is obvious at a glance.
- Drop the result into a design system in one click — copy the CSS variables (--color-1: #RRGGBB;) straight into your stylesheet.
- Download the palette PNG for brand research: the bars are proportional to each share, so it works as a reference image in a report.
- Pick placeholder, skeleton and chart colors for a frontend project from a real image instead of guessing — the result is naturally harmonious.
Example
Input
An image with exactly two colors: eight pure red pixels (#FF0000) and four pure blue pixels (#0000FF)
Output
--color-1: #FF0000; // share 66.7% --color-2: #0000FF; // share 33.3%
This is the real result of the pure logic layer with k=2, 10 iterations and the fixed seed 42, so the same pixels always yield the same colors and shares. The UI defaults to k=5 and downscales to 100×100 before sampling, so both the color count and the sampling size affect the final palette.
Frequently asked questions
Why is the palette reproducible here but different in other tools?
Because the k-means++ initialisation uses a fixed seed (42), so runs are repeatable. Many tools initialise randomly and can return different clusters for the same image. The trade-off is that a fixed seed could land on an unlucky starting point, so try another color count (3/5/8) if the result looks off.
Why are transparent areas ignored?
Pixels with alpha below 128 are skipped during sampling, otherwise the RGB of transparent regions (usually 0,0,0) would drag the palette towards black. If the whole image is transparent, the tool reports that there are no opaque pixels to extract from.
Are the extracted colors really present in the image?
Not always. Each cluster ends up as the arithmetic mean of its pixels, which can be a color "between" them; when a cluster contains enough identical pixels (a flat color block, say) it matches exactly. Use the image color picker when you need one precise pixel value.
Why do the shares not add up to 100%?
Each share is the cluster pixel count divided by the total valid pixels and rounded to 0.1%, so the displayed values can miss 100% by a fraction. Empty clusters are dropped, so you may get fewer colors than the requested k — an image with only two colors cannot produce five.
Are my images uploaded?
No. Downscaling, sampling and clustering all happen in the browser with canvas and plain JavaScript. There is no upload endpoint and the image is never stored.
Keywords：主色调配色提取dominant colorscolor palettek-means调色板取色css 变量