Image Tools

Dominant Color Finder

Discover which colour defines an image. Drop one picture or a whole folder and get the dominant colour, the average colour and the most vibrant accent for each, with a ready-made text colour recommendation.

  • Files stay on your device
  • No sign-up
  • Free to use

How to use Dominant Color Finder

  1. Drop one or more images onto the upload area.
  2. Each image is analysed and shown with its dominant, average and vibrant colours.
  3. Select any swatch to copy its HEX code.
  4. Download all results as a CSV spreadsheet or a JSON file.

Dominant Color Finder features

Three useful colours

Dominant (the largest colour cluster), average (the mathematical mean) and vibrant (the most saturated significant colour).

Coverage percentage

See what share of the image the dominant colour covers, with a plain-language colour name.

Readable text colour

Get the recommendation of black or white text for the best contrast on the dominant colour.

Bulk analysis

Process up to 100 images in one go.

CSV and JSON export

Use the results in spreadsheets, databases or code, for example as image placeholder colours.

On-device

Images are analysed in your browser and never uploaded.

When to use Dominant Color Finder

  • Choosing a background colour that matches a product or cover image.
  • Generating placeholder colours that appear while images are loading on a website.
  • Sorting or tagging a photo library by colour.
  • Picking an accent colour for a page or slide from its hero image.
  • Checking whether a set of product photos has consistent backgrounds.

Dominant Color Finder FAQ

What is the difference between dominant and average colour?

The average mixes every pixel together, so a photo of a red apple on green grass may average to a muddy brown that appears nowhere in the picture. The dominant colour is the centre of the largest group of similar pixels, which is a colour that is actually visible in the image.

How is the dominant colour calculated?

The image is reduced to a small sample and its pixels are grouped into six clusters of similar colours using the k-means algorithm. The cluster containing the most pixels is the dominant colour.

What is the vibrant colour for?

Many images are mostly neutral, such as a white background or grey sky, with a smaller colourful subject. The vibrant colour finds the most saturated colour that still covers a meaningful part of the image, which usually makes a better accent colour.

Are transparent areas counted?

No. Pixels that are more than half transparent are ignored, so logos and cut-outs are judged by their visible content.

How can I use the results as image placeholders?

Set the dominant colour as the background of each image’s container. While the image loads, visitors see a matching block of colour instead of a blank space, a technique used by many large image sites.

Finding the colour that represents an image

There is no single correct “main colour” of an image, because what people perceive depends on area, saturation and attention. A small red flower in a large green field is what we notice, yet green covers most of the frame. This tool therefore reports three complementary answers: the largest colour group, the arithmetic average, and the most vivid significant colour, so you can choose the one that suits your purpose.

The dominant colour comes from clustering. Each pixel is treated as a point in three-dimensional colour space, and the k-means algorithm repeatedly assigns points to the nearest of several centres and moves each centre to the middle of its points until they settle. The result groups visually similar shades together, so subtle variations from lighting and compression do not split one colour into many.

Distances between colours are weighted to reflect human vision, which is most sensitive to green and least to blue. Without that weighting, clusters would split along differences people barely see while merging colours that look clearly different.

Dominant colours have practical uses in web performance. Showing a block of the image’s main colour before the image arrives makes loading feel faster and avoids jarring flashes of white. Storing the colours from the CSV export alongside your images is an easy way to add that effect.

Other useful tools