How to pick a color from an image

Anyone can click on a picture and get a hex code. The trouble is that the code you get is often not the colour you thought you were pointing at. If you use it, the result looks subtly wrong in a way that is hard to diagnose later. This guide is about why that happens and how to avoid it.

The pixel you see is not the pixel you click

Almost every image on screen is being displayed at a different size from its actual dimensions. A 3000-pixel-wide photograph shown in a 900-pixel-wide box has been scaled down by a factor of more than three, and the browser produced each displayed pixel by blending several real ones together.

If a tool samples what is on screen, it hands you that blend. Two people sampling the same spot at different window sizes get different answers, and neither answer exists in the file. A good tool maps your cursor position back to a coordinate in the source image and reads the original data there. That is what the coordinate readout is for: if it says x 1248, y 736, the value came from that exact position in your file.

Anti-aliasing is everywhere

Wherever two colours meet (the edge of a letter, the outline of a logo, the boundary of a shape), there is a band of pixels that are a mixture of both. This is deliberate; it is what stops edges looking jagged. But it means the pixels along any edge are colours that are not in the design at all.

Sampling one of those is the single most common way to get a value that is almost right. A brand red comes back slightly desaturated. Black text comes back dark grey. The fix is simple once you know: always sample from the middle of a flat area, never near a border. Zoom in until you can see individual pixels and the safe region becomes obvious.

JPEG compression moves colours around

JPEG does not store pixels. It stores frequency coefficients for 8×8 blocks, and it throws away the ones it judges you will not miss. What comes back out is close to the original but not identical, and the error is largest exactly where contrast is highest, around edges and text.

There is a second effect that catches people out: chroma subsampling. Most JPEGs store colour information at half resolution while keeping brightness at full resolution, because the eye is far more sensitive to brightness detail. A one-pixel red line in a JPEG can end up with its colour smeared across two pixels.

In practice this means a flat area in a JPEG is not perfectly flat. Neighbouring pixels in what looks like solid colour can differ by several units in each channel. If you need the exact value, sample two or three spots and see whether they agree. If the source is available as PNG or SVG, use that instead.

Gradients have no single colour

If the region you are sampling is a gradient, there is no correct answer to "what colour is this". Decide what you actually need: the colour at a specific point, the colour at the visual centre, or the two end stops so you can rebuild the gradient. Sample deliberately for whichever it is rather than clicking somewhere in the middle and hoping.

Screenshots carry the whole stack

A screenshot records what was composited on the display, which includes anything layered on top: a translucent overlay, a hover state, a shadow, a night-shift or blue-light filter, a display colour profile. Sampling a screenshot gives you the result of all of that, not the underlying design token.

If a value from a screenshot looks warmer or duller than expected, check whether a screen filter was active when it was taken. This is a common source of "the brand colour is wrong" reports that turn out to be nothing of the kind.

Colour profiles

An image can carry an embedded colour profile that says what its numbers mean, such as sRGB, Display P3 or Adobe RGB. The same three numbers describe different physical colours in different profiles, so a browser has to convert to display them.

This is the one place where a browser tool has a real limit. Different browsers and operating systems do not always convert identically, so a wide-gamut photograph can produce slightly different sampled values in different setups. For web work this rarely matters, because the browser's answer is what your users will see. For print or brand-critical work, sample inside an application that manages colour properly and can tell you which profile it is working in.

A reliable routine

1. Use the best available source. A PNG or SVG beats a JPEG; the original beats a screenshot; a screenshot beats a photo of a screen.
2. Zoom in before you click. Once individual pixels are visible you can see whether the area is genuinely flat.
3. Stay away from edges. Put at least a few pixels between your sample point and any boundary.
4. Sample more than once. Two or three points in the same region. If they agree, the value is solid; if they do not, the region is not flat and you need to decide what you actually want.
5. Check the coordinates. They tell you the value came from the source file rather than from the scaled display.
6. Verify it in use. If the colour is going behind text, check the contrast before you commit to it.

When to extract a palette instead

If what you want is the character of an image rather than one specific pixel, sampling by hand is the wrong tool. Clicking around a photograph gives you an arbitrary set of points; palette extraction looks at every pixel, clusters them, and reports both the representative colours and how much of the image each one covers. Those proportions are useful information that hand-sampling cannot give you.