Image Color Picker
Pick colours from any image and pull out its dominant palette, with hex, RGB and HSL values — processed entirely in your browser.
Why the "average colour" of a photo is always mud
Ask for the average colour of a vivid photograph and you get a brown-grey. That is not a bad algorithm — it is what averaging does, and it can be shown exactly rather than approximately. Take colours evenly spaced around the hue wheel, all equally saturated, and average their red, green and blue channels. The result is not a slightly muted version of them. It is exactly neutral grey: the three channels come out equal to within a billionth.
#7e7e7e | Hues averaged | Result | Saturation |
|---|---|---|
| 6 | #7e7e7e | 0 |
| 12 | #7e7e7e | 0 |
| 36 | #7e7e7e | 0 |
| 72 | #7e7e7e | 0 |
| 360 | #7e7e7e | 0 |
Six hues or three hundred and sixty, the answer is the same and the saturation is zero. Real photographs are not evenly spaced, so they land near grey rather than exactly on it — five thousand randomly chosen strongly saturated colours average to a saturation of about 0.02. Near enough that the distinction does not help you.
The useful conclusion is that average colour and dominant colour are different questions, and the average is almost never the one you wanted. A photo of a red rose against green leaves has a dominant colour of red and an average colour of dark olive — a colour that appears nowhere in the picture. If you are pulling a colour out of an image to use in a design, you want the most common colour, or a cluster centre, not the mean. That is what the palette above gives you.
And averaging the stored numbers is the wrong average anyway
There is a second problem underneath the first. The numbers in an image file are not proportional to light. sRGB stores roughly the amount of light raised to the power 1/2.2, so adding two codes together and halving them averages the wrong quantity.
Mid-grey makes it concrete. Code 128 sits halfway along the scale and looks like the midpoint between black and white, but it reflects only 21.6% of the light. The colour that genuinely reflects half is code 188, which is noticeably lighter than you would expect.
| Colours | Averaging the codes | Averaging the light |
|---|---|---|
| Red and green | #808000 | #bcbc00 |
| Black and white | #808080 | #bcbcbc |
| Blue and yellow | #808080 | #bcbcbc |
| Magenta and cyan | #8080ff | #bcbcff |
Every row in that table is darker on the left. That is not a coincidence — converting to linear light, averaging, and converting back is always at least as bright as averaging the raw codes, and the two agree only when every pixel is already the same colour. The naive average is systematically too dark, which is the other half of why it reads as muddy.
The palette above averages the light by default for exactly this reason, and the picker will show you the other answer if you ask for it, along with how far apart the two land on your own image. This is the same correction that makes semi-transparent overlays and image downscaling look right, and most software gets it wrong in the same way. If you ever wondered why a photo shrunk to a thumbnail looks slightly darker than the original, this is why.
How to use
- Choose an image.
- Click anywhere to sample that pixel's colour.
- Read the dominant palette extracted from the whole image.
- Zoom in for precise sampling on detailed areas.
Frequently asked questions
Why does the colour I picked look different from what I see?
Because you are sampling a single pixel, and what your eye perceives is an average of the area around it plus the surrounding context. A pixel sampled from a shadow or a highlight can be far from the colour you thought you were pointing at.
How is the dominant palette determined?
By grouping the image's pixels into clusters of similar colour and taking a representative from each. The number of colours you request is the cluster count, and different values genuinely produce different palettes from the same image.
Does the dominant colour mean the most noticeable one?
No. Dominant means most common by pixel count, which is usually a large background area such as sky or wall. The colour that draws your eye is often a small saturated accent that barely registers in the count at all.
Can I trust the colour for print or paint matching?
Only roughly. Screen colours are emitted light and paint is reflected, the photograph carries its own white balance and lighting, and your display may not be calibrated. For a genuine match, a physical sample under the actual lighting beats any digital sample.
Why does the same object give different colours in two photos?
White balance and lighting. A white wall photographed under tungsten light and under daylight produces genuinely different pixel values, and the camera's own processing shifts things further. This is why sampled colours are a starting point rather than a measurement.
Does my image get uploaded?
No. The image is read and analysed in your browser, so nothing is transmitted — which matters for client work and personal photographs alike.
🔒 This tool runs entirely in your browser. Nothing you enter is uploaded, logged, or stored.