Dominant Color

Find the one colour a picture is actually built around, and copy it as HEX, RGB or HSL.

Runs on your deviceImagesWorkingNo account needed

What this tool does

Dominant Color draws your image onto a canvas and walks the pixels on a fixed stride: anything under roughly 80,000 pixels is read in full, and a larger photograph is sampled down to somewhere between 40,000 and 80,000 opaque pixels. Those samples are sorted into coarse colour buckets, whichever bucket holds the most pixels wins, and the value reported is the mean of the pixels inside that bucket — so the answer is the shade the picture spends most of its area on, not a guess about what looks important.

This is a peak, not an average, and the difference is the reason the tool exists. Averaging every pixel of a photograph of a red car on grass produces a muddy olive that appears nowhere in the frame, because red and green cancel each other out. Taking the most populated bucket gives you the red. If you came looking for an average colour and what you actually wanted was the colour you can see, this is the calculation that answers it.

Three limits are worth knowing before you rely on a result. Once the stride kicks in, above roughly 80,000 pixels, a small accent — a logo, a single flower, a stripe — can be stepped over entirely and never appear in the count; the share percentage is a share of the pixels sampled, not of the whole image. The neutral filter uses fixed thresholds, discarding anything below 12% saturation or above 94% and below 6% lightness, which sweeps up genuinely pale or near-black brand colours along with the backdrop; when an image is entirely neutral the filter is dropped automatically and the neutral answer is returned rather than an error. And the figures come from the browser's own decode of the file, so an image carrying a wide-gamut profile can measure differently here than in a colour-managed editor.

The measurement runs in this browser tab. The file is decoded locally, the pixels are released as soon as the count is finished, and no part of the picture is sent anywhere, so photographs you have not published stay where they are. It returns exactly one colour: for a whole scheme use Extract Palette, and to read a specific pixel rather than the most common one use Image Color Picker.

How to use it

  1. Choose an image. Any format this browser can decode — JPG, PNG, WebP, BMP, SVG, GIF and, on a recent browser, AVIF. One file per run, an animated GIF is measured on a single still frame, and pixels below half opacity are skipped rather than counted as black.
  2. Decide whether neutrals count. Ignore white, black and grey is on by default, so a product shot on a white backdrop reports the product instead of the paper. Turn it off when the neutral genuinely is the answer.
  3. Set the grouping. Loose merges near shades into a few broad families, Balanced is the default, and Tight keeps close shades apart so a gradient can split into bands rather than reading as one colour.
  4. Take the result. You get HEX, RGB and HSL, the closest of 35 common colour names, and the share of sampled pixels. A 400 × 400 swatch PNG with the hex printed across it, and a JSON file carrying the same values plus the sample count, are offered alongside.

Processing & privacy

Runs on your device. Your file is processed directly in this browser.

Common use cases

Matching a page to its hero image

Pull the main colour out of the photograph at the top of the page and use it for buttons and links, so the interface agrees with the artwork instead of fighting it.

Naming a product colour for a listing

A marketplace field wants one word. The nearest-name output gives a defensible label while the HEX gives the exact value for the spec sheet.

Recovering a brand colour from a logo file

When only a flattened PNG of the logo survives and the brand guidelines are lost, measuring its peak colour returns a usable HEX without opening a design application.

Picking a background to sit a photo against

Reading the accent colour out of an image tells you what a card, slide or email header behind it can use without clashing.

Questions

Is my image uploaded?
No. Decoding, sampling and the histogram all happen in this browser tab. No part of the picture is transmitted, logged or written to storage — the swatch and the JSON stay in this tab's memory unless you download them — which is why the measurement still runs with the network disconnected.
Is this the average colour of the image?
No, and the distinction is worth understanding. An average blends every pixel together and usually lands on a brown or grey that exists nowhere in the picture. This counts pixels into buckets and reports the most populated one, so the result is a shade the image genuinely contains.
Why is the result slightly different from a pixel I sampled myself?
The value returned is the mean of every pixel in the winning bucket rather than any single pixel. That stops a noisy or gently graded area from reporting one stray pixel, but it can produce a HEX that no individual pixel matches exactly. Use Image Color Picker when you need one pixel's literal value.
Why did it miss the bright colour I care about?
Either that colour covers too little area to survive the stride — on a twelve-megapixel photograph roughly one pixel in three hundred is read, so a small accent can be stepped over — or the grouping folded it into a neighbouring family. Switch to Tight grouping, or crop to the region first and run it again.
What does the share percentage mean?
It is the proportion of the sampled pixels that fell into the winning bucket, not the proportion of the whole image. Pixels dropped by the neutral filter still count in that denominator, so a product on a white backdrop can win with a share in single figures. A low number means the sample is spread thin, not that the answer is wrong.
How reliable is the colour name?
It is the nearest of 35 common names measured by straight RGB distance, so it is a rough description rather than an authority — an unusual teal may come back as green. Trust the HEX, RGB and HSL values, and treat the name as a label for humans.
What happens with transparent images?
Pixels below half opacity are ignored, so a logo on a transparent background reports the logo. Partly transparent pixels above that threshold are measured at their stored colour, without being composited over any background first.

Related tools