CodeKitHubWhat Is This Tool?
Average color is the arithmetic mean of every pixel's red, green and blue value — a single blended color that represents the image's overall tone, but can look muddy if the image has very different colored regions.
Dominant colors are different: this tool groups similar pixel colors into buckets (quantizing each RGB channel), counts how many pixels fall into each bucket, and returns the most common ones as distinct swatches — closer to what a human would call "the main colors in this image" than a single averaged blend.
Why Use It?
- Get both the average color and a real multi-color palette from one upload, not just one number.
- Pull a usable color palette from a photo, screenshot or logo for a design project.
- Click any swatch to copy its exact HEX code instantly.
- Runs entirely in your browser — the image is read locally via canvas and never uploaded anywhere.
- Free, instant, no account, no file size gatekeeping beyond your browser's own limits.
How to Use
- Click the upload button and choose an image from your device.
- The average color and dominant-color palette appear automatically — no extra button to click.
- Click any swatch (the average color or any palette color) to copy its HEX code.
Example
Input
A photo of a sunset with orange sky and dark blue silhouettesOutput
Average color: a muted brownish-orange blend · Dominant colors: bright orange, deep red, near-black, pale yellow (as separate distinct swatches)This is exactly the case where average and dominant colors diverge the most — the average blends warm and cool tones into mud, while the dominant palette keeps them as recognizably separate colors.
Frequently Asked Questions
Why is the average color so different from any color actually in the image?
Averaging blends every pixel together mathematically — if an image has both bright orange and dark blue regions, the average lands somewhere in a muddy brown, a color that may not visually exist anywhere in the original photo. This is expected behavior for a true average, not a bug; use the dominant-color palette instead if you want colors that actually appear in the image.
Is my image uploaded to a server?
No. The image is read directly by your browser using the Canvas API, and all color analysis happens locally in JavaScript. Nothing is ever sent over the network.
How many dominant colors does it return?
Up to 8, sorted by how many pixels matched each color bucket, most common first. If the image is very uniform in color, you may see fewer than 8 distinct buckets.
Does it count transparent pixels in a PNG?
No — pixels with less than 50% opacity are excluded from both the average and the dominant-color calculation, so a transparent background won't skew the results toward whatever color shows through it.