Find the Average Colour of an Image
Reduce a whole image to one colour — for a background tint behind a photo, a theme colour derived from a cover image, a fallback swatch while an asset loads. Two values are reported, because there are two defensible ways to average colour and they can differ noticeably.
Drop images here
Multiple files allowed
Why two averages
PNG and JPEG store colour with a gamma curve applied — the value 128 is not half as much light as 255, it's about 22%. So averaging the stored numbers directly is not averaging light. The sRGB mean does exactly that: it's the arithmetic mean of the bytes, which is what almost every "average colour" tool reports and what most people expect.
The linear-light mean converts each pixel out of the gamma curve first, averages the
actual light, then converts back. This is the physically correct answer — it's what you'd measure if you
defocused a camera until the image blurred to a single tone. It comes out consistently brighter, and the
gap widens with contrast: an image of pure black and pure white in equal parts averages to mid-grey
#808080 in sRGB but to a much lighter #BCBCBC in linear light.
Which to use? For a UI tint or a theme colour, the sRGB mean usually looks more like what people perceive as the image's overall colour. For anything physically motivated — mipmap generation, lighting, computing an ambient colour for a 3D scene — use the linear value. Click either swatch to copy its hex.
When one colour isn't the right answer
Averaging is lossy in an obvious way: a red-and-green image averages to a muddy brown that appears nowhere in it. Any image with genuinely contrasting colours will average to something dull, because that's what the middle of the colour space looks like. That's not a flaw in the calculation — it's what the mean of those colours is.
If the result looks disappointingly grey, what you probably wanted was a representative colour rather than the average. Dominant colours gives you the palette ranked by coverage, and its top entry is usually the better choice for a tint. Ignoring transparent pixels is on by default for the same reason — otherwise a logo with a large transparent margin averages mostly toward black.
FAQ
Is the full image measured?
It's sampled from a copy scaled to 600 px on the long side. The average of a downscale is mathematically very close to the average of the original, and it keeps large photos instant.
Should I turn off "ignore transparent"?
Only if you want transparent areas treated as their underlying colour data, which is usually black and will drag the result dark. Leaving it on is almost always right.
Why is the linear value always lighter?
Because gamma encoding devotes more of the byte range to darker tones. Averaging linearly gives bright pixels their full physical weight, which the encoded average understates.
Can I get HSL as well?
Hex and rgb() only. Any colour converter will take the hex from there.