Image Average Color & Palette
Find an image's average colour as a hex/RGB swatch, plus a 2-12 colour palette with coverage percentages, weighted by alpha so transparency doesn't skew it.
🔒 Every pixel is sampled in your browser to build the swatch and palette — the image is never uploaded.
Drop an image here or click to choose
One hex code from every pixel
Open 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 two to twelve — each with its hex code, its RGB and HSL values (each with its own copy button) and how much of the picture it covers, plus buttons that copy every code at once, as a list or as an array. 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 can serve as a 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 photo is decoded and every pixel is weighted and averaged locally in your browser using a canvas; only the resulting swatches and their coverage percentages are shown, and the picture itself never leaves your device.
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.
How many colors can the palette extract?
Anywhere from 2 to 12. Drag the slider and the palette is read again from the picture already in memory, so you can compare a tight three-colour scheme with a fuller twelve-colour set without loading the file again.
Can I copy a palette color as RGB or HSL, or the whole palette at once?
Yes. Every swatch has its HEX copy button plus an RGB and an HSL one beside those values. Copy all codes puts every hex code on the clipboard separated by commas, and Copy as array gives the same codes as an array, ["#0000ff", "#00ff00"], ready to paste into code.