Image Colour Picker

How to use the image colour picker

1. Choose an image, or drag one onto the page.
2. Set the sample area — widen it on photographs and JPEGs.
3. Click to pick, and copy the hex or rgb() value.

About this tool

Click anywhere on the image and this reads the colour under the pointer, reporting it as hex, RGB and HSL along with the nearest named CSS colour. Picks are kept in a list, so pulling four or five colours out of a photograph does not mean copying each one before taking the next.

The sample area is the control that matters, and it is the reason a picker can seem to give the wrong answer. JPEG stores colour at lower resolution than brightness and adds ringing around sharp edges, so a single pixel next to a boundary can sit several shades from the colour you can plainly see. Widening the sample averages a small square and returns the colour you meant.

That also makes the tool honest about photographs. A region that looks like one flat colour rarely is — a wall in a photograph spans dozens of values through shading and noise — so a single-pixel reading from it is arbitrary. Averaging says what the region actually is.

The image is drawn into a canvas in this tab and read back from there. Nothing is uploaded, which for a screenshot of a private document or an unreleased design is the difference between using a tool and not.

Common uses

• Getting the exact hex of a colour in a screenshot or mockup.
• Pulling a palette out of a photograph by hand.
• Checking what colour a rendered element actually is.

Frequently asked questions

Why does the colour look different from what I see?

Usually JPEG compression. Colour is stored at reduced resolution and edges gain ringing, so a single pixel can be several shades out. Widen the sample area to average a small square instead.

Can it open a HEIC photo from my phone?

No. Browsers other than Safari cannot decode HEIC, so convert it to JPEG or PNG first. The tool says so rather than failing silently.

Is the image uploaded anywhere?

No. It is drawn into a canvas in this tab and the pixels are read back locally, which is why it works on a screenshot of something confidential.