What a dominant color is
A dominant color is one that covers a large share of an image. Finding it sounds simple, but photographs contain thousands of slightly different shades, so a raw count would treat a sky of subtly varying blues as thousands of separate colors with tiny shares each.
The usual solution is quantization: group similar colors into the same bucket, count how many pixels fall in each bucket, and rank the buckets. The result is a short list of representative colors and rough percentages.
Why you might extract colors from a picture
Pulling colors from an image is a quick way to build a palette that feels connected to it. A designer might sample a hero photo to choose a background and accent color for the page around it. A presenter might match slide colors to a product shot. A blogger might choose link and heading colors that echo a cover image.
It is also useful for checking what an image is mostly made of, for example to see whether a logo is dominated by one brand color or whether a photo is mostly neutral tones.
Once you have colors you like, the Color Palette Generator can expand one of them into a full range of tints and shades, and the Image Color Picker lets you sample an exact spot instead.
How to extract dominant colors with this tool
- Drag an image onto the upload area or click it to select a file.
- The image appears on the left.
- On the right, up to six color rows appear. Each shows a swatch, a HEX code and a percentage.
- Read the list from top to bottom: the first entry is the most common color bucket.
- Copy the HEX codes you want to use by selecting the text. To analyze another image, reload the page.
The analysis is done in your browser. The image is not uploaded by this tool.
How the results are produced, and what to expect
The tool shrinks the picture to a 100 by 100 pixel sample, which means the image is stretched to a square for analysis and its original proportions do not matter. It then rounds each of the red, green and blue values to the nearest multiple of 32 and counts how many of the 10,000 sampled pixels land in each rounded color. The six largest groups are shown.
For example, a pixel with red 200, green 100 and blue 50 rounds to 192, 96 and 64, which is #C06040. Because of this rounding, the displayed HEX codes are approximations. They will often not match any single pixel exactly, and a shade that looks right may be a step away from the real value. For an exact value at a precise spot, use the color picker.
The percentages are rounded to whole numbers, and the six shown can add up to less than 100 because other colors are not listed. Transparent areas are judged by their stored color values and can show up as a color even though they look see-through.