Image Color Extractor
Pull the dominant colours out of any image, with coverage percentages and an eyedropper — all in your browser.
Part of image tools and design tools.
Drop a file, click to choose one, or paste an image straight from your clipboard. The image is decoded and measured inside this page — nothing is uploaded.
Dominant colours are a clustering problem
A photograph of a beach has no red, green and blue in it: it has ten thousand slightly different sands and twenty thousand slightly different blues. Getting a palette out of it means grouping colours that are close enough to count as one and reporting the centre of each group, which is what the k-means algorithm does. The number you choose is the number of groups, so raising it does not add colours to the image — it splits the groups it already found into finer ones, and the sand becomes wet sand and dry sand.
Why the grouping happens in OKLab
Clustering needs a notion of “close”, and the obvious one — the distance between two RGB triples — does not match human vision. Two greens separated by thirty points of green look nearly identical, while two dark blues separated by the same amount look clearly different, so an RGB palette tends to spend several slots on the same foliage and miss a small vivid accent entirely. This tool measures distances in OKLab, a space built so that equal numeric steps read as equal perceptual steps, which is the assumption k-means was designed around in the first place.
Coverage, and what the percentage means
Each swatch carries the share of pixels that fell into its group, and the bands are sized to match — so the palette looks like the image feels, rather than giving a background wash and a logo accent equal billing. Bear in mind that a colour covering 2% of a picture can still be the one that defines it: the percentage tells you how much of the frame a colour fills, not how important it is. Use it to decide which colour is the background and which the accent, then reach for the eyedropper when you need an exact value from a specific spot.
The image never leaves your device
The file is decoded by the browser, drawn to a canvas, and its pixels are read and clustered by JavaScript running in this tab. There is no upload, no API call and no temporary copy on a server — which matters when the image is an unreleased design, a client’s brand guide or a screenshot of something internal. Disconnect from the network and every part of this page keeps working, which is the only way to check such a claim.