Image Average Color Finder
Upload an image and find its average color as HEX, RGB, RGBA and HSL — with simple, square-root and dominant averaging modes plus a light/dark contrast readout.
Input
JPG, PNG, GIF or WebP. Processed entirely in your browser — your image is never uploaded.
Arithmetic mean of every pixel. The classic average color.
Average color
Upload an image to find its average color. Everything runs in your browser — your image is never uploaded.
Guides
Drop in an image and get back the single color that represents it — as HEX, RGB, RGBA and HSL, with a contrast readout telling you whether white or black text will be legible on top of it.
It's the color you want for a photo's placeholder background, a card tint that matches its thumbnail, a gradient stop pulled from a hero image, or an email header that doesn't clash with the picture below it.
How to use it
- Drag an image onto the drop zone, or click to browse. JPG, PNG, GIF and WebP all work.
- Pick an averaging mode (see below).
- Click any of the HEX / RGB / RGBA / HSL rows to copy it, or download the result as a labelled PNG swatch.
Everything runs in your browser using a canvas — the image is never uploaded to a server, so private photos and unreleased artwork stay on your machine.
Which averaging mode should I use?
The three modes genuinely disagree, and the difference is largest on colorful images.
- Simple average — the plain arithmetic mean of every pixel. This is what most tools mean by "average color". It's fast and predictable, but it drifts toward grey on high-contrast images, because the mean of two opposite hues sits between them.
- Square root average — the root-mean-square instead. sRGB values are gamma-encoded, so squaring before averaging and taking the root afterwards approximates averaging in linear light, which is closer to how the eye combines them. The result comes out brighter and more saturated, and for photographs it usually looks more like the image than the simple mean does.
- Dominant color — not an average at all. Pixels are grouped into a 16×16×16 color cube, the most populous group wins, and its member pixels are averaged for an exact value. Use this when one color clearly owns the image — a logo, a product shot on a plain backdrop — and you want that color rather than a blend.
If you're unsure, try Square root average first, then Dominant if the result looks too muddy.
What happens to transparent pixels?
Fully and near-fully transparent pixels are excluded from the color math — otherwise a mostly-transparent PNG would average toward black. The mean alpha across the whole image is still reported in the rgba() value, so you can see at a glance how much of the image was actually opaque.
Why is the contrast readout there?
Because the next question after "what's the background color" is almost always "what text color goes on it". The panel shows the WCAG contrast ratio for white text and for black text on the result, and flags whether each clears the 4.5:1 AA threshold for body text.
Related tools
Need several colors rather than one? The Color Palette Extractor pulls a full palette out of the same image. To check a specific text-and-background pairing against the WCAG thresholds, use the WCAG Contrast Checker, and to convert the result into other color spaces, use the Color Picker.