Extract the dominant colors from an image with their pixel percentages. Processing is entirely local — the image is sampled on a canvas in your browser and never uploaded. Unlike the design-palette tool, this one reports what is actually in the image, ranked by coverage.
Settings
Generated locally in your browser — your settings and results never leave this page.
A census, not a curation
Two questions hide inside “what colors are in this image?” — what palette would a designer take from it (curation: the Palette From Image tool) and what is literally there, in what amounts (census: this tool). The extractor answers the second with dominant colors ranked by pixel coverage, percentages attached. Censuses have their own uses: auditing, measuring, settling arguments about what a page or photo is actually made of.
Honest counting mechanics
Pixels pool into perceptual buckets — near-identical colors merged by ΔE so compression noise and anti-aliasing edges count toward their parent color instead of fragmenting the tally. Transparent pixels are excluded (logos on alpha report their ink, not their nothing). Each reported color is its bucket’s average, its percentage the bucket’s share of opaque pixels. Large areas dominate by design — that is what a census is.
The salience gap
Expect the census to surprise you: the colors people remember from an image (the red boat) and the colors that occupy it (the gray-blue sea, 60%) are different lists. Backgrounds, vignettes and skies win by area while attention goes elsewhere. The percentages make this gap explicit — useful in itself: knowing your homepage is 70% near-white reframes “our brand color dominates the site” conversations with arithmetic.
Census-driven workflows
Competitive audits: screenshot a rival’s page, extract, and read their real color economy. Redesign baselines: document the current site’s de facto palette before proposing the new one. Asset QA: verify a delivered illustration actually uses the brand colors (paste suspects into the Color Difference Calculator against spec). Then, when the goal shifts from measuring to making, the curation sibling and the Contrast Matrix take over.
Census versus salience, illustrated
A typical landscape photo’s census output demonstrates the gap between what occupies an image and what people remember from it:
| Rank | Color | Coverage | What it is |
|---|---|---|---|
| 1 | #7c93a8 | 38% | overcast sky |
| 2 | #4a5d52 | 24% | distant treeline |
| 3 | #8a7d6b | 19% | dry grass field |
| 4 | #3d4a5c | 11% | lake in shadow |
| 5 | #c1482e | 5% | the red barn everyone remembers |
| 6 | #e8e4da | 3% | clouds |
The barn — the photograph’s entire reason for existing — ranks fifth by area. Every census of a designed image tells a version of this story, which is why the percentages matter: they measure the composition’s economy, while your memory measures its emphasis. Both are true; only one is countable.
How to use the Color Palette Extractor
- Drop, choose or paste an image – processed locally, never uploaded.
- Set how many dominant colors to report.
- Each swatch shows its share of the image's pixels.
- Export the inventory.
Frequently asked questions
How is this different from the Palette From Image tool?
Purpose: that tool curates a usable design palette (diverse, balanced); this one reports what is actually there – the dominant colors ranked by pixel coverage with percentages. Analysis versus curation: auditing a competitor's landing page wants this; theming from a photo wants that.
How are the percentages computed?
Pixels are quantized into perceptually merged buckets (close colors pooled by ΔE), and each reported color's share is its bucket's fraction of opaque pixels. Anti-aliasing edges and JPEG noise fold into their parent colors instead of polluting the list.
Why does the extractor report a color I cannot see in the image?
Large near-invisible areas – a photo's dark vignette, an off-white sky – dominate by area while escaping attention. The percentage labels expose exactly this gap between coverage and salience; it is a feature of honest counting.
Can I audit a website's real color usage with this?
Screenshot the page and drop it in: the coverage list is effectively a color census – how much is background, how much brand, how much photography. Repeat across pages for a factual "current state" before a redesign.
Is the image uploaded for processing?
No – identical privacy story to every image tool here: local canvas, local sampling, zero network requests, works offline. Stated on the page because you should never have to guess.
What happens with animated GIFs or SVGs?
GIFs sample their first frame; SVGs rasterize at their intrinsic size then sample. Both are usually what you want; for a specific GIF frame, screenshot it at the right moment.
How do I turn an extraction into a design system?
Promote the meaningful colors (skip the incidental grays), hand the survivors to the Palette Contrast Matrix for pairing rules, and generate ramps per keeper via Shades and Tints. Extraction is discovery; those steps are engineering.
