Extract the dominant colors from an image

Extract an approximate ranked palette from the visible pixels of an image.

freeworks offlinenothing uploaded
ToolDominant Colors
Input
Output
—
Put this on your own site

The frame below runs the same code as this page, in the reader's own browser. Nothing is sent to us, and nothing is sent to you.

Pick a dark background and the text and panels follow it, so the frame stays readable on a dark page.

Preview

How it works

Pixels are sampled at a stride capped near 10,000 samples, transparent pixels are skipped, and RGB values are grouped into 16-step buckets. Buckets are sorted by count and the requested top colours become hex values with percentages.

  • Five colours form the initial summary.
  • Sampling makes the result approximate rather than exhaustive clustering.

Worked example

Extract five palette colours
Input
											Input: data:image/png;base64,iVBORw0KGgo=
Count: 5
Output
												#ff0000 42%
#000000 31%
#ffffff 27%

When to use this

Design systems extract candidate colours, thumbnail services label common tones, and vision exercises compare sampled palettes.

Edge cases

  • A tiny accent can disappear behind larger background buckets.
  • Transparent pixels are omitted.
  • Nearby colours in one bucket become one representative colour.

References