Why downscale the image first?

The mean of the pixels is essentially unchanged by resolution, so the image is scaled down before sampling to keep the calculation fast. A 4000px photo and its 400px copy give effectively the same average.

What is the luminance value for?

It is the WCAG relative luminance of the average colour, from 0 (black) to 1 (white). A value above 0.5 means the image is overall light, below 0.5 means overall dark — handy for deciding whether to overlay light or dark text.

Is my image uploaded?

No. All pixel reading and averaging happens locally on a canvas in your browser. The image is never transmitted.

Average Colour of an Image

Name: Average Colour of an Image
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

Find the mean colour of any image as HEX, RGB, HSL and luminance.

Free average image colour tool. Upload any image and get its mean colour — averaged across every visible pixel — as HEX, RGB and HSL, plus WCAG relative luminance to tell light from dark. Runs in your browser; nothing is uploaded. It runs free in your browser on Gera Tools, with nothing uploaded.

Last updated 1 July 2026 Source: Gera Tools

How is the average colour calculated?

The image is drawn onto a canvas and the red, green and blue channels of every non-transparent pixel are summed and divided by the pixel count. Fully transparent pixels are skipped so they do not drag the average toward black.

Get one useful tool a week

Like this tool? Enter your email and we'll send you one genuinely useful Gera tool a week — plus a link to come back to this one. No spam, one-click unsubscribe any time.

The average colour of an image is the single mean colour of all its pixels — a great choice for a solid placeholder background, a theme accent pulled from a hero photo, or a quick “is this image light or dark?” check.

How it is computed

for each visible pixel:
    sumR += red,  sumG += green,  sumB += blue,  count++
averageR = sumR / count   (and the same for G and B)

Fully transparent pixels are ignored so a PNG with a large clear area is not biased toward black. The image is downscaled before sampling because the mean is unaffected by resolution — this keeps even large photos instant.

Reading the result

Alongside HEX, RGB and HSL, the tool reports the WCAG relative luminance of the average colour:

> 0.5 — the image is overall light; dark text will read well on it.
< 0.5 — the image is overall dark; use light text.

Everything runs locally in your browser, so the image is never uploaded.