← back to tools

Average Colour Calculator

Upload any image — get its mathematically averaged colour as HEX, RGB, and HSL. Copy ready-to-use CSS in one click.

100% browser-based — images never leave your device
🎨

Drop an image here

or browse to upload — JPG, PNG, WebP, GIF supported

Preview
#000000 click to copy hex
HEX
#000000
RGB
rgb(0,0,0)
HSL
hsl(0,0%,0%)
Ready-to-use CSS snippet
Contrast check — white & black text on average colour
White text
Black text

Why you actually need this

Perfect lazy-load placeholders

Instead of a grey box flash, use the image's average colour as a background-color. Users see a smooth, contextual transition while the real image loads.

Mathematically accurate

Every pixel is sampled and averaged — not just a dominant colour guess. The result is the true mean of all R, G, B channels across the entire image.

Contrast ready

Know instantly whether white or black text passes WCAG AA or AAA on your colour — critical before using it as a UI background.

Copy in any format

HEX for design tools, rgb() for CSS, hsl() for Tailwind v4, or the full lazy-load snippet — one click and it's in your clipboard.