This reduces a whole image down to a single representative color, using one of two different methods you can switch between: a true mathematical average of every pixel's RGB value, or the single most frequently occurring color once similar shades are grouped together. Everything runs on a canvas in the browser - the image is never uploaded anywhere.

Average vs. dominant - what actually changes

"Average RGB" sums the red, green, and blue values of every opaque pixel and divides by the pixel count - a genuine mean, which for a busy, multicolored photo often comes out as a muddy gray or brown even though that exact color may not appear anywhere in the image.

"Dominant Color" instead groups pixels into color buckets (rounding each channel to the nearest step of 32) and returns whichever bucket has the most pixels in it - the color that actually shows up most, not a blend of everything. For a photo with a clear dominant hue (a blue sky, a green field), this generally reads as more "correct" than the average.

Fully transparent and mostly-transparent pixels are excluded from both calculations, so a PNG with transparent padding around the subject won't skew the result toward whatever the transparent areas would otherwise render as.

When you'd use this

Picking a placeholder background color that roughly matches a hero image before it finishes loading, or pulling a representative accent color for a photo gallery or product thumbnail without opening an image editor.

Frequently asked questions