Image Colour Analyser

Averaging gamma-encoded sRGB values directly is one of the most widespread bugs in colour code, and the black-and-white case shows why: the naive average of 0 and 255 is 128, but perceptually the correct midpoint is closer to 188, because sRGB values are not proportional to light intensity. Converting to linear light first, averaging, then converting back gives the result your eye expects. The dominant-colour list is usually more useful than the average for design work: a photograph averages towards mud, whereas its dominant families tell you what the image actually looks like.

Each pixel is converted from sRGB to linear light, averaged, then converted back. Dominant colours are found by bucketing pixels into a coarse colour grid, counting each bucket, and reporting the mean colour of the largest buckets.

Large images are downscaled before sampling, which is ample for colour statistics but means very small isolated details may not appear in the results. Dominant colours are grouped into coarse families, so two similar shades are reported as one — helpful for a photograph, less so if you need an exact pixel value, in which case use a colour picker. The average of a colourful image is often a muddy brown, which is mathematically correct but rarely useful as a design choice.

An image that is half pure black and half pure white averages to roughly #bcbcbc in linear light, not the #808080 a naive average would give — a visibly different and more accurate result.

1. Choose your image.
2. Set how many dominant colours to show.
3. Copy the hex codes you need.
4. Use the light/dark text hint when placing text over the colour.

• Averaging sRGB values directly, which biases the result dark.
• Using the average of a colourful photo as a design colour — it is usually muddy.
• Forgetting that transparent areas are excluded from the calculation.
• Expecting exact pixel values from the dominant-colour grouping.

This tool reports an image’s overall average colour and ranks its most-used colours by share. The average is computed in linear light rather than directly on sRGB values, which is what makes it match what your eye actually perceives.

Designers building a palette from a photo, developers picking a placeholder background, and anyone matching a colour scheme to an image.

• Gamma-correct average, shown alongside the naive figure for comparison.
• Dominant colours grouped into families rather than exact pixel values.
• Tells you whether light or dark text works on the average colour.
• Ignores transparent pixels, so logos analyse correctly.

• Choosing a background colour that matches a hero image.
• Generating a low-quality colour placeholder while an image loads.
• Building a brand palette from a photograph.
• Checking which colours dominate a design.