Image Colour Picker
Click anywhere on a photo or screenshot to read that pixel's exact colour in hex, RGB, and HSL. Every pick is kept in a list — click a row to copy it, or take the whole set as CSS custom properties. The usual reason to want this is recovering a colour you can see but do not have the source for: a screenshot of a design, a brand colour in a photo of a sign, a shade in a reference image.
Drop an image here
JPG / PNG / WebP · the first file is loaded into the picker
How to pick a colour from an image
- Drop in the image. It appears below, scaled to fit — clicks are mapped back to real pixel coordinates, so the scaling does not affect accuracy.
- Click the colour you want. The swatch shows it and the row is added to the list with its hex, RGB, HSL, and the pixel coordinates.
- Click any row to copy its hex, or use Copy all as CSS for the set.
Getting a colour you can rely on
For a single decorative colour, one click is fine. For anything that has to match — a brand colour, a background you are trying to blend into seamlessly — sample three or four points across the region and take the value that repeats. JPEG compression varies neighbouring pixels by small amounts, and a photograph of a printed colour is affected by lighting and white balance on top of that, so a photo of a logo will never give you the true brand hex. Ask for the source file.
Related colour tools
Extract palette pulls the dominant colours out of a whole image with a median-cut quantiser and exports them as CSS, SCSS, JSON, or a shareable palette strip — that is the tool for building a scheme from a photograph. For converting and manipulating colour values themselves, pngtoolskit.org has the format-conversion and harmony generators.
FAQ
How accurate is the value?
It is the exact stored value of the pixel you clicked, read straight from the decoded image. Two caveats worth knowing: JPEG compression shifts individual pixel values slightly, so a flat-looking area may vary by a couple of units from pixel to pixel — sample a few points and take the consensus. And if the image carries an ICC profile, your browser may render it differently from the raw numbers.
Why do I get a slightly different colour each time I click the same region?
JPEG artefacts. Compression works in 8×8 blocks and introduces small variations that are invisible to the eye but real in the data. For a brand colour that has to be exact, sample several pixels and use the value that repeats — or get it from the source file, which is the only truly reliable answer.
Can I get more than one colour at a time?
Every click is added to the list, newest first, and Copy all as CSS gives you them as custom properties ready to paste. If you want the dominant colours of the whole image rather than specific points, use Extract palette, which quantises the image instead of sampling it.
Does it work on a screenshot?
Yes, and screenshots are the best case — they are usually PNG or lightly-compressed, so the values are exact. This is the quick way to recover the hex code of a colour you can see on screen but do not have the source for.
Is my image uploaded?
No. The image is drawn to a canvas in this page and the pixel is read locally. Nothing is sent anywhere.