Find the average color of an image
A single representative colour is useful in many places: as a placeholder while an image loads, as the background of a card behind a photo, or as a theme colour for a music or video player. This tool computes the average color of an image in two ways and also finds its dominant colour.
Three results, three purposes
- Average (sRGB): the arithmetic mean of all red, green and blue values. Quick and familiar, but it tends to look darker and muddier than the picture feels.
- Average (linear light): the pixel values are converted to linear light before averaging and back to sRGB afterwards. This matches what you would see if you blurred the image heavily, so it usually looks more natural.
- Dominant colour: the largest colour cluster found with k-means. It is an actual colour from the image rather than a blend, which makes it better for accents.
Example
For an image that is half pure red and half pure blue, the sRGB average is #800080 territory — a dark purple — while the linear-light average is a noticeably brighter magenta. Neither colour appears in the picture, which is why the dominant colour is shown as well.
Using it as a placeholder
<img src="photo.jpg" width="1200" height="800"
style="background:#a87ca8" alt="…">Setting the average colour as the image background, together with width and height attributes, avoids a white flash and layout shift while the file downloads.
For a full palette instead of one colour, use the image color extractor; to read a single pixel, use the image color picker.
More uses
Streaming and music apps tint their player backgrounds with the average colour of the album art; you can do the same with a gradient from the dominant colour to transparent. Image galleries use it for "blur-up" placeholders, and e-commerce sites use it to pick a matching card background for each product photo. When the average colour is used behind text, check that your text colour still has enough contrast, since averages of busy photos often land in a mid-grey that works poorly with both black and white text. The formats panel gives HEX, RGB, HSL, HSV, OKLCH, Lab and CMYK values for the average.
Getting an average color in code
If you need the same value in a build step or an app, there are quick approximations. In the browser, drawing the image onto a 1 × 1 canvas and reading that single pixel gives a rough average, although the result depends on how the browser scales images down. On the command line, ImageMagick can do the same: magick photo.jpg -resize 1x1 txt:- prints one averaged pixel. Both work on gamma-encoded values, so they match the sRGB average here rather than the linear-light one.
Privacy
Everything happens locally in your browser with JavaScript and the Canvas API. Your images are never uploaded to our servers, so the tool also works with confidential screenshots and personal photos.