How are the colours computed?

The image is downsampled to a 64×64 preview, then each pixel is bucketed into one of N levels per channel (controlled by the detail slider). The most populated buckets are averaged and shown as the top colours.

What does “Colour detail” do?

Higher values create more buckets so similar shades show as separate swatches. Lower values merge them. 16 is a sensible default; try 8 for broader palettes or 32 for fine distinctions.

Does it count transparent pixels?

No — pixels with alpha below ~6% are skipped so PNGs with transparency don't pollute the palette with checkerboard colours.

How many colours are returned?

The top 5 by pixel count. Each swatch also shows its percentage of the sampled image so you can see how dominant it really is.

Are my images uploaded?

No. Colour analysis happens entirely in your browser using the Canvas API.

Dominant Color Extractor

Find the top colours in an image and copy them as hex, CSS gradient or JSON array.

100% private — no uploads Image ToolsFree & unlimited Read tutorial

See how it works

Watch a quick simulation of this tool in action — no file needed.

How to use Dominant Color Extractor

Follow these steps — everything happens instantly in your browser.

1
Step 1. Drop an image onto the zone.
2
Step 2. Adjust the “Colour detail” slider to merge similar shades or split them apart.
3
Step 3. Copy any swatch's hex code with a single tap, or copy the CSS gradient of the whole palette.
4
Step 4. Copy the full palette as a JSON array for use in code.