How the eyedropper works
When you drop a photo onto this page, your browser decodes it and draws it onto a canvas, which is simply a grid of pixels the page is allowed to read. Click anywhere and the tool reads the single pixel under your cursor: three numbers for red, green and blue, each from 0 to 255. Those numbers are then shown as an rgb() value and as a hex code, with a swatch so you can see exactly what you sampled. Everything happens locally in your browser. The photo is never uploaded, nothing is stored, and you could pull out your network cable after the page loads and the picker would carry on working.
From pixel to hex code
Each channel value from 0 to 255 becomes a two-digit base-16 pair, and the three pairs joined together are the hex code. To convert a pair back by hand, multiply the first digit by 16 and add the second, with A to F standing for 10 to 15:
Why the colour is not quite what you expected
Sampled colours often surprise people, and it is rarely the tool's fault. JPEG compression works by discarding detail the eye barely notices, which nudges individual pixel values a little either way, so a wall that looks like one flat colour is really a field of near-identical neighbours. Edges are worse: browsers and cameras anti-alias them, blending the two sides together, so a pixel on the boundary between a white shirt and a navy blazer might read as a grey that exists nowhere in real life. Lighting matters too. The same object photographed in morning sun and under kitchen spotlights will sample completely differently, because the camera records the light that reached it, not the object's "true" colour.
Tips for accurate picks
Pick from the middle of flat, evenly lit areas and stay well away from edges, highlights and shadows. Take two or three samples from the same surface; if they broadly agree, you have the colour, and the recent picks row makes it easy to compare candidates side by side. If you are extracting a brand colour from a logo, prefer a PNG or SVG version over a JPG, because lossless formats do not smear pixel values. And once you have your colour, sense-check it: paste the hex into the plain colour picker to fine-tune it, or check it against your background colour for contrast before using it for text. A sampled colour is a starting point, not a specification. If several picks from the same surface disagree wildly, that is useful information in itself: the surface is textured or unevenly lit, and you may be better served by choosing the mid value by eye than by trusting any single pixel.
Frequently asked questions
Is my photo uploaded anywhere?
No. The image is opened and read entirely in your browser using the canvas element, and it never leaves your device. You can load the page, disconnect from the internet and the picker still works.
Which image formats can I use?
Anything your browser can display: JPG, PNG, WebP, GIF, AVIF and SVG all work in modern browsers. If a format fails to load you will see an error message rather than a blank canvas.
Why is the picked colour slightly different from what I expected?
JPEG compression shifts pixel values subtly, and edges in any image are anti-aliased, meaning pixels there are a blend of the two sides. Pick from a flat area away from edges, and take two or three samples to check they agree.
Why does the image appear smaller than the original?
Very large images are scaled down to a maximum of 1600 pixels wide so the page stays fast. Scaling averages neighbouring pixels, which can smooth tiny details, but colours in flat areas are unaffected.
How do I pick a colour from a website rather than a photo?
Take a screenshot and drop it into this tool, or use the eyedropper built into the native colour picker in Chrome and Edge, which can sample anything visible on screen.