Image Color Picker
Choose an image, click a pixel, get the colour. It can average a small patch instead of one pixel — which matters more than it sounds on a photograph.
How to use it
- Choose an image, or drag one onto the box.
- Click anywhere on it. The swatch, HEX, RGB and HSL update, and the colour is added to the list below.
- Or use the dominant colours — the handful that make up most of the picture — and click one to copy it.
Why one pixel is often the wrong answer
On a screenshot or a logo, a pixel is a colour and one pixel is exactly what you want. On a photograph it is not. Photographs, and JPEGs above all, carry noise: two neighbouring pixels of what looks like a flat blue sky can differ by five or ten steps in each channel, and the pixel you happened to click is one arbitrary sample of that scatter.
That is what the sample setting is for. A 3 by 3 or 5 by 5 patch averages the neighbours and lands on the colour your eye actually saw. Use one pixel for flat artwork and a patch for anything that came out of a camera.
What “the colour” means here
The value is the colour stored in the file, read after your browser decoded it. It is not a measurement of what your screen is showing: a screen that is bright, warm, or simply not calibrated will display the same stored value slightly differently, and two people looking at the same picture on two monitors are not seeing quite the same colour. For matching paint or print, use a physical swatch. For matching a button to a logo on a web page, the stored value is exactly what you want.
How the dominant colours are found
Every colour in the image is dropped into a coarse bucket — sixteen levels per channel — and the buckets are ranked by how many pixels landed in them. The most popular ones are then averaged back into real colours, skipping any that are nearly identical to one already chosen, so you get six different colours rather than six shades of the sky.
It is a quick and honest summary, not a designer's judgement. A small bright accent that matters to the picture may not make the list, because the list is decided by area, not by importance.
Transparent pixels
A PNG can have pixels that are partly or wholly see-through. Click one and the page says so: a fully transparent pixel has no meaningful colour at all, and whatever number is stored there is simply what the file happened to hold.
Frequently asked questions
Is the image uploaded?
No. It is read and decoded by your own browser and drawn onto a canvas here. Nothing is sent to a server, so a screenshot or a client's artwork stays on your machine.
Why does the same-looking area give different colours each click?
Because photographs carry noise, especially JPEGs. Neighbouring pixels of a flat-looking area differ by a few steps. Choose a 3 x 3 or 5 x 5 sample to average it out.
Is this the colour my screen shows?
It is the colour stored in the file. Your screen may display it slightly differently depending on brightness, warmth and calibration. For matching something physical, compare against a real swatch.
What do the dominant colours mean?
The most common colours by area, found by sorting every pixel into coarse buckets and averaging the biggest ones. A small accent colour can be important and still not appear, because the list ranks by how much space a colour takes up.
Why does a transparent pixel give black?
Because a fully transparent pixel has no real colour, and the file stores zeros there. The page tells you when you have clicked one so you do not mistake the black for part of the picture.
Is my text sent anywhere?
No. Everything happens in JavaScript inside your own browser. Nothing is uploaded and nothing is saved - close the tab and it is gone.