Image Average Color

What is the average colour of an image?

The average colour of an image is the arithmetic mean of every opaque pixel’s RGB values. Imagine pulping the entire image into one even smudge of paint and asking what colour it is — that’s the average. Mathematically: sum the red channel across all opaque pixels, divide by the count; do the same for green and blue. The resulting (R, G, B) triple is the average.

The dominant colour is the answer to a different question: “which colour appears in this image the most?” To compute it, the tool quantises every pixel into one of 32,768 buckets (32 levels per channel — a coarse 3-D histogram) and returns the centre of the bucket with the most votes. Dominant is closer to a human idea of “the colour the image feels like”; average is closer to the mathematical centre of the image’s colour mass.

This tool reports both, in three formats: HEX (#A4B7C2), RGB (rgb(164, 183, 194)) and HSL (hsl(204, 19%, 70%)).

How it works

The image is decoded into a Uint8ClampedArray of pixel data — four bytes per pixel: R, G, B, A. The tool then walks the buffer once.

For the average:

• Accumulate sumR, sumG, sumB, totalWeight across all pixels. A fully opaque pixel contributes weight 1; a partially transparent pixel contributes weight alpha / 255; a fully transparent pixel contributes nothing.
• After the walk, the average is (sumR / totalWeight, sumG / totalWeight, sumB / totalWeight).

For the dominant:

• Allocate a flat Uint32Array of length 32,768 — one cell per 3-D bucket.
• For each opaque pixel, compute bucket = (R >> 3) * 1024 + (G >> 3) * 32 + (B >> 3) and increment that cell.
• After the walk, find the index of the largest cell and reconstruct the bucket’s centre: R = (i >> 10) * 8 + 4, etc.

The whole calculation is a single pass over the pixel buffer; total time scales linearly with image area.

The decoder is the shared engine used by every Phase 16 tool, so every format we decode elsewhere works here: PNG, JPG, WebP, AVIF, GIF (first frame), BMP, HEIC, TIFF, PSD, and SVG (rasterised to canvas at its declared dimensions).

Common use cases

• Design system tokens from photos. Drop a product photo or a brand photoshoot still in, take the dominant colour, and use it as the seed for a colour token. The dominant value is usually closer to what a designer would pick by eye than the average.
• Video thumbnail tinting. Many video players and gallery layouts use the dominant colour of a thumbnail as the background behind it while it loads — produces a smooth transition with no jarring colour flash. Run this tool on a frame, store the hex, use it as background-color.
• Ambient lighting and room-tone matching. Smart bulbs and TV back-lights that match the on-screen content do exactly this calculation on the live frame. Use the tool to design a static version: pick a hero image, take its dominant colour, set your room lighting to match.
• Theme generation. Feed a wallpaper or photo into the tool, take the dominant + average + a couple of complementary values, and use them to seed a UI theme.
• Social-platform card backgrounds. Twitter / X, LinkedIn, and Slack all render link previews with a card background. Setting the card colour to the dominant of the preview image produces a more cohesive card than a uniform default grey.

How to use this Image Average Color tool

1. Drop an image onto the dropzone, or click to pick from your file system. PNG, JPG, WebP, AVIF, GIF, BMP, HEIC, TIFF, PSD and SVG are all accepted.
2. The image is decoded in the browser. A preview appears on the left; the colour swatches appear on the right.
3. The Average swatch shows the arithmetic mean colour with HEX, RGB and HSL values. Click any value to copy it.
4. The Dominant swatch shows the most-common bucket centre, same three formats. Click any value to copy it.
5. Drop another image to replace the current one — there’s no queue, no upload, just one image at a time.

Quality tips

The two values tell you different things about the image. For images with a clear subject on a contrasting background (a product shot, a portrait, a hero photo) the dominant is usually what you want — it captures the colour that occupies the most pixels, which is often the background but sometimes the subject if the subject is large. For images with smooth gradients or no clear subject (a sunset, a marble texture, a noise pattern) the average is more meaningful — it captures the colour-mass centre.

If both values come out close to grey on a colourful image, the image likely contains evenly balanced complementary colours that average to neutral. Trust the dominant in that case.

Privacy

Decoding, sampling and colour conversion all happen in your browser. The image bytes are loaded from the File API (drag-drop or file picker) directly into a Uint8ClampedArray — never uploaded, never logged, never seen by any server. Confirm in the browser Network panel before processing anything sensitive.

Compatibility notes

The tool needs a browser with OffscreenCanvas and the standard createImageBitmap API — every browser released since 2021. The decoder fallback chain handles the trickier formats (HEIC, TIFF, PSD, AVIF) on browsers that don’t decode them natively. The colour swatches are rendered as plain CSS so the displayed values match the computed values exactly — no gamma correction surprises.