Image colour picker — get the hex from a photo

How to use it

1. Choose an image — a screenshot, a photo, a logo.
2. Move over it to preview the colour under the cursor, then click to lock it in.
3. Copy the hex code; the colours you pick are kept as swatches you can copy again.

One pixel is not the colour you think you are seeing

Vision averages an area, while a picker returns a single sample. On a photographed surface that sample carries whatever sensor noise, shading and specular highlight happened to land on it, so it can sit several percent away from the colour the region reads as. Sampling three or four points across the same area and comparing them is a better guide than trusting one click.

JPEG compression moves the value further. The format quantises each eight-by-eight block in the frequency domain, so flat areas develop faint variation and edges gain ringing around them, while chroma subsampling stores colour at half resolution, letting neighbouring pixels share one colour sample. Near a boundary you can read a blend that exists nowhere in the subject. Screenshots of flat interface colours have none of this and sample exactly.

What to do with the hex once you have it

Hex is the transfer format: CSS, Figma and every design tool accept it, and it is short enough to paste into a message. RGB is the same three numbers in decimal, which is what you want when a value has to be computed, compared, or combined with an alpha channel rather than simply written down.

For deciding rather than recording, convert the value to HSL. A hover state is the same hue at a different lightness, which is one number to change in HSL and three unrelated ones in hex, and a palette grown from one sampled colour is far easier to reason about as hue steps. Colours lifted from photographs also tend to be darker and more saturated than they appear, so treat the sample as a starting point rather than the answer.

Questions