Image color picking — Input checklist

Worked example

For a reliable pixel color, use the original image file, not a screenshot, and aim at a flat, evenly colored area rather than an edge or a gradient.

Chatcument reads exactly one pixel: when you click the image it takes the pixel under the pointer at the image natural resolution and shows it as an uppercase HEX code and an rgb(r, g, b) value. It does not average a neighbourhood, so whatever noise or antialiasing sits on that pixel ends up in your number.

Picture a web designer pulling the brand blue from a client logo that arrived as a PNG. The safe choice is the fill in the middle of the largest letter or shape, not the rim of a letter, where the blue is blended with the background.

A common mistake is sampling from a screenshot taken with night mode, a colour filter or a different monitor profile, which already changed every colour. Another is clicking an area that is fully transparent: the canvas returns rgb(0, 0, 0) there, which is not the colour you meant. Pick a visible, opaque pixel instead.

Before you start, check three things about the file: it is the original export, it is a PNG, WebP or a high-quality JPG rather than a heavily compressed one, and the area you want is large enough to click without hitting a neighbouring colour. Then click two spots in the same flat area and make sure both give the same HEX.

Pixel selected in an image

HEX and RGB values

Values are read from the image as your browser decodes it, so an unusual embedded colour profile can make them differ slightly from a design tool.