How to use the Average Color of Image
- Drop, paste or choose an image.
- See the mean (average), median and dominant colors side by side.
- Click a color to copy it, or copy the ready-made CSS placeholder snippet.
Average Color of Image features
- Mean, median and dominant color side by side
- Mean calculated in linear light for accurate blending
- HEX, RGB and HSL codes with one-click copy
- Placeholder preview and ready-to-copy CSS and HTML snippet
- Transparent pixels ignored or weighted by opacity
- Runs locally; your last image is kept in your browser
Find the one color that represents your image
This tool calculates the average color of an image and gives it to you as a HEX, RGB and HSL code. It actually finds three different "average" colors, the mean, the median and the dominant color, so you can pick the one that best matches what you see. Drop in a photo, a product shot, an album cover or a thumbnail and the results appear instantly.
An image's average color is perfect as a background behind the image, as a loading placeholder, as an accent that matches a photo, or as data for sorting and grouping pictures by color.
Mean, median and dominant color
| Method | How it is calculated | Best for |
|---|---|---|
| Mean (average) | Averages every pixel in linear light, the way colors physically blend | A color that matches the image when it is blurred or seen from far away; loading placeholders |
| Median | Takes the middle value of each channel, ignoring extremes | Images with small, very bright or very dark areas (a sun, a highlight, a black frame) that would skew the mean |
| Dominant | The largest group of similar colors in the image | Images with a big uniform area, such as a product on a colored backdrop |
Why average in linear light? Pixel values in image files are stored with a gamma curve, so averaging the raw numbers gives a result that is too dark. Converting to linear light first, as this tool does, gives the same color you would get by blurring the image completely.
Use the average color as an image placeholder
Large images take a moment to load. Showing a solid block of the image's average color in the meantime makes the page feel faster and avoids a jarring flash of white, which is why Google Images, Pinterest and many news sites do it. Choose which color to use and copy the ready-made snippet:
/* Shown while the image loads */
.image-placeholder {
background-color: #7A8B6F;
color: #000000;
}
<img src="photo.jpg" alt="…" style="background: #7A8B6F">The preview shows how the placeholder looks next to the image, and the text color in the snippet is chosen so captions on top of the placeholder stay readable. Give the image width and height attributes as well, so the placeholder reserves the right space and the page does not jump when the image appears.
More ways to use an image's average color
- Matching backgrounds. Set a card, hero section or lightbox background to the photo's average color for a calm, cohesive look, like Apple Music and Spotify do with album art.
- Accent colors. Use a darker shade of the average color for buttons and headings near the image. Get one from the Shades & Tints Generator.
- Sorting by color. Arrange a gallery or product catalogue in rainbow order by sorting on the hue of each image's average color.
- Photography. Compare the mean color of photos in a series to keep the white balance and mood consistent.
Transparent images
Fully transparent pixels are ignored and semi-transparent pixels count in proportion to their opacity, so a logo on a transparent background gives you the color of the logo itself, not a mix with invisible pixels.
Need more than one color?
To get a full palette of 2 to 20 colors from the same image, use the Image Color Extractor. To pick the exact color of a specific spot, use the Image Color Picker, and to see how brightness is spread across the image, open the Image Histogram.
All calculations run in your browser. Your image is never uploaded, and the last one you used is kept on your device for next time.
Average Color of Image: frequently asked questions
Which color should I use as a placeholder?
The mean usually looks closest to the blurred image. If the image has a large uniform background, the dominant color may suit better.
Are transparent pixels included?
No. Fully transparent pixels are ignored and semi-transparent ones are weighted by their opacity.
How do I find the average color of an image?
Drop the image on this page. The mean, median and dominant colors appear at once with their HEX, RGB and HSL codes.
What is the difference between average and dominant color?
The average (mean) blends every pixel into one color. The dominant color is the most common group of similar colors. A photo of a red car on gray asphalt might average to a brownish gray, while its dominant color is the gray.
Why is the average color darker or grayer than I expected?
Averaging many different colors pulls the result toward gray. If one color matters more, try the dominant color, or extract a palette with the Image Color Extractor.