ColorKitFree dominant color extractor
Color from image, ranked by how much it covers
This extractor is free and needs no account: give it a picture and it sorts the pixels into the three to ten colors the image is actually made of, each labelled with the percentage of the frame it fills. Grouping runs over as many as 60,000 real pixels using k-means++ in CIE Lab, where distance matches what the eye notices, and the seed is fixed, so the same file returns the same palette however often you reload. Pixels under 12% opacity never enter the count — the reason a logo on a transparent background does not come back claiming black is its main color — and the finished set copies out as hex, CSS variables, JSON or a .gpl palette.
- 100% free
- No signup
- 3-10 colors
- Coverage % per swatch
- Repeatable output
- Exports .gpl
Drop a photo, a poster, a product shot or a UI screenshot here.
Press Ctrl+V anywhere on the page to drop in an image copied from another tab — no need to click the field first.
The palette appears here: one row per group, largest share of the frame first, with the percentage each group covers.
How to pull a palette out of an image
Load a picture, choose how finely to divide it, and read the colors off in order of how much of the frame they own.
Bring in the picture you want broken down
Drop a file on the frame, open one from disk, or paste an image you copied from another tab. Photographs, film stills, packaging shots and full-page screenshots all work; the more of the frame one subject fills, the more the palette will be about that subject rather than about the wall behind it. Cropping to the part you care about before loading changes the answer more than any setting on this page.
Set how many groups the pixels get divided into
The slider runs from 3 to 10. Three tells you what the picture is at a glance, six is the usual working number for a moodboard, and ten starts splitting one sky into four blues on most photographs. Ask for more groups than the picture has distinct colors and the surplus comes back empty rather than padded, so a three-color flag answers with three swatches whatever the slider says. Turn Snap off if you would rather see the smooth average of each group than a specimen pixel out of it.
Read the coverage, then take the palette with you
Each row shows its share of the counted pixels and the strip above stacks those shares into the whole frame, so a swatch that occupies 3% is visibly a detail rather than a theme. Copy the set as a hex list, as CSS custom properties with the percentages kept as comments, or as JSON, or download a .gpl that GIMP, Inkscape and Krita open as a palette.
Technical specifications
| Palette size | 3 to 10 groups, set on the slider |
|---|---|
| Pixels examined | Up to 60,000, taken on a uniform stride grid of real pixels — never a resampled thumbnail, which would invent colors the file does not contain |
| Bitmap ceiling | 2,048 px on the long edge; a bigger file is drawn down to that once, before any pixel is read |
| k-means | k-means++ seeding, at most 24 Lloyd rounds, stopping early when no center moves more than 0.5 ΔE |
| Empty groups | Dropped rather than padded — an image with fewer distinct colors than the slider asks for returns fewer swatches, and the surviving count is printed under the palette |
| Determinism | mulberry32 with a fixed seed — identical input, identical palette, every run |
| Transparency | Pixels below alpha 31 of 255 are excluded from the grouping and from the coverage denominator |
| Exports | Hex list, CSS custom properties with coverage comments, JSON with rgb triples, and a GIMP .gpl file that Inkscape and Krita also read |
Frequently asked questions
Why did I get five colors back when I asked for eight?
Because three of the groups ended up with no pixels in them, which is the honest outcome when an image holds fewer distinct colors than you requested. A flag, a logo or a flat illustration has a handful of colors and no amount of asking will find more; rather than splitting one white into three whites a tenth of a percent apart, the empty groups are dropped and the count under the palette tells you how many survived. On a photograph, where every group finds pixels, you get exactly the number you asked for.
The biggest swatch is a dull grey-brown. Is that a bug?
No, and it is the honest answer to the question this tool asks. Coverage is area, and area is dominated by backgrounds, shadow and skin, while the colors you remember from an image are usually the small saturated ones the eye is drawn to. If you want the palette to be about the subject, crop to the subject before loading it; if you want the memorable colors from an unchanged frame, raise the count to eight or ten and read the small rows near the bottom of the list.
Are the white margins of a product photo counted?
Yes — white is a color that is really in the file, and excluding it would be guessing at your intent. Only pixels below 12% opacity are dropped, because those carry no visible color at all, and the percentages are computed over what is left. For a packshot on a white sweep that usually means the first swatch is the sweep; either crop it out or read from the second row down.
Can a swatch be a color that appears nowhere in the image?
Only if you turn Snap off. The center of a group is an average, and the average of a green sea and a blue sky is a teal that no pixel in the picture has; with Snap on, each swatch is replaced by the real sampled pixel closest to that center in Lab, so every hex you copy is one you can point at in the frame. Leaving Snap off is the better choice when you want a smooth representative color rather than a specimen — an average is less likely to have caught JPEG noise.
Why do the percentages not add up to exactly 100?
Rounding: each row is shown to one decimal place, so ten rows can drift by a few tenths in either direction. The denominator is the number of pixels actually counted, which excludes anything under 12% opacity — a logo with a transparent background is measured against the logo, not against the empty space around it, and the count of skipped pixels is printed under the palette.
Will the same image always give me the same palette?
Yes. The k-means++ seeding uses a fixed 32-bit seed rather than Math.random, so a given file at a given count produces byte-identical output every time, on any machine. This is worth checking in whatever tool you use next: many extractors reseed randomly, which is why refreshing them reshuffles the palette and why two people looking at the same photo end up with different brand colors.
Is a palette pulled from a JPEG good enough to hand a client?
Treat it as a shortlist, not as a specification. The colors have already been through a camera's white balance, a compression pass that shifts chroma, and a conversion into sRGB, so they describe this file rather than the object photographed. Use the extracted set to agree on a direction, then commit to the exact values deliberately — and never take a brand color from a screenshot of someone's website when the stylesheet is one view-source away.
About dominant colors and what coverage really measures
"Dominant color" sounds like one thing and is really two. There is the color that occupies the most area, which is what any clustering algorithm can measure, and there is the color you remember afterwards, which is a matter of salience — contrast against its surroundings, saturation, whether it lands on a face. They routinely disagree. The most common frustration with palette extractors, that a striking photograph returns six muted neutrals, is not a defect: it is the picture telling you it is mostly sky, asphalt and skin, with the color you noticed covering 4% of the frame. That is why every swatch here carries its percentage rather than a rank, and why the stacked strip is drawn to scale. Reading the number keeps you honest about which colors are the design and which are the background. When the value you are after is one specific pixel — the exact blue of that button, not the mood of the screenshot — the image color picker answers that question directly.
Grouping happens in CIE Lab rather than in RGB, and the difference is not academic. RGB distance treats a unit of blue as equal to a unit of green, which the eye does not: two dark greens separated by twenty units of RGB look identical, while two mid-blues twenty units apart are plainly different colors. Cluster in RGB and you get groups that are tidy in the file and arbitrary on screen. The other decision worth knowing about is seeding. k-means starts from an initial guess and converges to whatever local answer that guess leads to, so an extractor that seeds from Math.random gives a different palette on every refresh — the behavior that makes people re-roll a tool until it produces something they like, which is not extraction any more. The k-means++ seeding here draws its randomness from a fixed 32-bit generator, so the palette is a property of your file and not of the moment you pressed the button. If you want colors that are deliberately arbitrary, the random color generator is the honest way to get them.
A palette is a starting point rather than a deliverable. Six colors ranked by area rarely map onto the roles an interface needs — background, surface, text, accent — so the usual next move is to take one or two swatches as seeds and build the rest deliberately in the palette generator, or to bridge two extracted colors into the intermediate tones a chart needs with the color mixer. One neighboring use worth knowing: reducing artwork to a handful of flat colors is also the first step in vectorising it, since a tracer needs regions of one color to find contours at all, which is what PNG to SVG does with the result.
Where the clustering happens
Every number on this page is worked out by JavaScript running in the tab you are reading it in. Nothing you type, paste or open is uploaded, logged or kept, which is also why the tools carry on working after you disconnect from the network.
The pixels are read once into an array in this tab and every round of clustering runs over that array, so an eight-megapixel photograph never becomes a request. The palette, the exports and the .gpl download are all produced from it locally, and swapping images discards the previous set.