How a colour is read from a picture
The uploaded image is drawn once onto a canvas at its full natural resolution. The canvas is then shown scaled down (to at most 560 px wide, never enlarged). When you move or click, the pointer position is converted back to a source pixel with x = floor((clientX - left) / displayedWidth x canvasWidth), and getImageData(x, y, 1, 1) returns that one pixel's red, green and blue values from 0 to 255. Each value is written as two hexadecimal digits and joined as #rrggbb. This is a single pixel, not an average of its neighbours.
Worked example
You click a button on a screenshot and the pixel is R 59, G 130, B 246. In hex, 59 is 3b, 130 is 82 and 246 is f6, so the readout is #3b82f6 alongside rgb(59, 130, 246). The Copy hex button puts #3b82f6 on the clipboard. The last 12 distinct picks appear as swatches, and clicking one makes it the current pick again. Clicking the same colour twice in a row records it only once.
Why the number may not match what you expected
| Situation | What happens |
|---|---|
| JPG photo | Neighbouring pixels differ slightly because of compression noise. Clicking a flat area twice can give two near-identical hex codes. |
| Edge of a shape | Anti-aliasing blends two colours, so a pixel on the edge matches neither |
| Fully transparent PNG pixel | The canvas stores it as rgb(0, 0, 0), so the picker shows #000000, not the page background |
| Image with a colour profile | Browsers may convert profiles such as Display P3 into sRGB when drawing, so values can differ from a design app |
| Screenshot of a screen | You get the colour as captured, which depends on the display's calibration at that moment |
Tips and limits
- The tool reports hex and RGB only, and alpha is ignored. For HSL or CMYK, paste the hex into the colour converter.
- Pick from a flat region of a logo or UI mock-up, not from a gradient or a photograph, if you need an exact brand colour.
- Large images are easy to sample precisely only when you zoom in your browser, because the on-screen picture is shrunk and many source pixels map to one screen pixel.
- Picking works from mouse hover and click. On a touch screen, tapping an area reads that point, but there is no live hover preview.
- To check a picked text and background pair, use the contrast checker, or build a scheme around the colour with the palette generator.