Average Color of an Image
Find the average color of any image as a hex and RGB swatch, plus a palette of the main colors in the picture — runs 100% in your browser, no upload required.
Drop an image here or click to browse
🔒 Pixels are read in your browser — nothing is uploaded.
One hex code from every pixel
Upload any image and this tool draws it onto a canvas, reads every pixel, and averages the red, green and blue values of every pixel that is not fully transparent, each counting for as much as it is opaque. The result is shown as a color swatch with its HEX and RGB codes, ready to copy into your CSS, design tool, or palette. Your picture is shown beside it, so you can see what the colour was taken from. Alongside the average you get a palette of the picture's main colours — ask for anywhere from three to ten — each with its hex code and how much of the picture it covers, plus a button that copies every code at once. A pixel at alpha 128 pulls half as hard as a solid one and a fully transparent pixel not at all, so a soft edge or a semi-transparent layer cannot wash the average toward white or black. Two ways of averaging are offered: Simple takes the plain mean of each channel, and Square root averages the squares the way mixing light does, so half red and half green comes out #b4b400 rather than the muddier #808000.
When an average color is useful
An image's average color makes a great placeholder background while a photo loads, a tint for cards and hero sections, or a quick way to sample the overall mood of an illustration. Designers use it to build cohesive palettes, and developers use it to generate low-quality image placeholders (LQIP). Because the whole calculation is deterministic, the same image always yields the same hex code.
Frequently asked questions
Is my image uploaded to a server?
No. The image is decoded and its pixels are read entirely inside your browser using a canvas. Nothing is uploaded, stored, or sent anywhere.
How is the average color calculated?
Every pixel that is not fully transparent counts, weighted by its own opacity, so a pixel at alpha 128 pulls half as hard as a solid one. The tool sums the red, green, and blue channels with those weights, divides each by the total weight, and converts the rounded means to a hex code. Switch the averaging to Square root and it sums the squares instead and takes the square root of the mean, the way mixing light works, which keeps two strong colours from averaging to mud.
Why are transparent areas ignored?
A fully transparent pixel has no meaningful colour, so it is left out entirely. A partly transparent one counts in proportion to its opacity, which is what you see when it is drawn over a background. The palette percentages below use a simpler rule: a pixel counts there once it is at least half opaque.
How are the main colors chosen?
The pixels are grouped into buckets of near-identical colour and the biggest buckets win, but a colour too close to one already picked is skipped — so you get a spread of the picture's real colours rather than ten shades of the same blue. Each swatch shows its hex code and the share of the picture it covers.