How this tool works
The image is drawn onto a canvas and every click reads back the single pixel underneath, reported as a hex value and as RGB. Reading a colour from the image itself is the point: a screenshot of a brand's site gives you their exact blue, where matching by eye against a swatch never quite does.
Images wider than eight hundred pixels are scaled down to fit the canvas, which keeps large photographs usable in the page. That scaling is worth knowing about, because the pixel you click is a pixel of the scaled image rather than of the original. On a flat area of colour the two are identical; along an edge, where scaling blends neighbouring colours together, the value can differ slightly from the original file.
Getting the colour you meant
- Click a flat area, not an edge: the boundary between two colours contains blended pixels that belong to neither. A pixel from the middle of a region is the one that matches.
- Photographs have no single colour: what looks like one shade of sky is dozens of neighbouring values. Sample several points and choose, rather than assuming the first click is representative.
- A screenshot may not carry the original values: JPEG compression shifts colours slightly, particularly at edges. A PNG screenshot or the original asset gives an exact match where a compressed one gives an approximation.
- Colour profiles are not accounted for: the value read is what the browser drew. An image in a wide-gamut profile may report values that differ from what a design tool shows for the same file.