Average Color Finder: Mean Color of an Image or Area

About the Average Color Finder

The Average Color Finder blends a picture, or part of it, into one color. Choose, drop or paste an image and the tool shows the average color of the whole picture at once, with its swatch, hex code, rgb() value and hsl() value. Drag a rectangle across the image, or type its position and size, and the average follows that area instead. It also tells you how bright the color is and whether black or white text is easier to read on it.

It reads PNG, JPEG, GIF, BMP, WebP and AVIF files up to 50 MB. Your image never leaves your device. Nothing is uploaded, there is no account, and every pixel is read by your own browser.

How to use it

If every pixel in the area is transparent, the page says "This area is transparent, so it has no average colour." Pick another area or another image.

How the average is worked out

The average is the plain mean of the numbers in the file, taken for each of the red, green and blue channels over the pixels that count:

$\bar{c} = \operatorname{round}\left(\frac{1}{N}\sum_{i=1}^{N} c_i\right)$

Here $c$ is one channel value from 0 to 255 and $N$ is the number of counted pixels. Rounding is half up. Pixels with an alpha value below 25, which are almost fully transparent, are not counted, so a cut-out logo is averaged over the logo and not over the empty space around it.

Take a picture that is half rgb(255, 0, 0) and half rgb(255, 255, 0). The red channel stays $\frac{255 + 255}{2} = 255$, the green channel is $\frac{0 + 255}{2} = 127.5$, which rounds up to 128, and the blue channel is 0. The average is rgb(255, 128, 0), or #ff8000, an orange that appears nowhere in the picture.

This is a mean of the stored numbers, not a mean of light. Averaging light would need the values converted out of the sRGB curve first, so a very contrasty picture can look a little darker or lighter here than the same blur made by a camera or an editor. For design work such as a placeholder color behind a photo, the plain mean is the usual choice.

Brightness and readable text

Brightness is the luma of the average color, a weighted sum that follows how strongly the eye responds to each channel:

$Y = \operatorname{round}\left(0.299\,R + 0.587\,G + 0.114\,B\right)$

For #ffff00, $Y = 0.299 \times 255 + 0.587 \times 255 + 0.114 \times 0 = 226$, so the page shows "226 of 255 (89 percent)".

To advise on text, the tool compares black and white against the color with the WCAG contrast ratio:

$\text{ratio} = \frac{L_1 + 0.05}{L_2 + 0.05}$

where $L_1$ is the relative luminance of the lighter color and $L_2$ of the darker one. It advises whichever of black and white gives the higher ratio, a tie going to black, and shows that ratio. A ratio of at least 4.5 meets the AA level for normal text and at least 7 meets AAA. A mid-tone can have a ratio below 4.5 for both, which means neither plain black nor plain white is a comfortable choice and you should change the color instead.

Choosing an area

• The whole picture is the default, which suits a photo that needs one accent color.
• A small rectangle, such as a logo corner or a title bar, gives the color of just that part.
• A one-pixel area, made by a plain click, gives the exact color of that pixel. For that job the Image Color Picker adds a magnifier and a list of pinned colors.
• The fields use image pixels from the top left corner. A 20 by 10 picture has X from 0 to 19 and Y from 0 to 9.

Photos larger than 16 million pixels are scaled down so the browser can hold them, and the page says so under the file name.

Related tools

When one blended color is too little, the Color Extractor lists the dominant colors of a picture with their shares, and the Color Palette Generator builds matching colors around any hex code.

Limits worth knowing

The tool reports numbers in sRGB as your browser shows them. It does not read embedded color profiles, name colors or remove backgrounds. JPEG compression adds small variations, so the same scene saved as JPEG and PNG can differ by a level or two.

Frequently asked questions