OmniTools
imageDifficulty: 3/5

Image Colour Picker

Click any point on an image to read its exact colour as HEX, RGB and HSL, with contrast ratios and a correctly mapped source pixel.

Sample size

Exact value of one pixel.

Smooths out JPEG noise.

Best for a flat area with compression artefacts.

Averaging a small square is usually more representative than one pixel of a JPEG.

Contrast ratios are the useful part: The contrast figures follow the WCAG relative-luminance formula, which is not the same as simply comparing brightness: mid-grey #808080 reads better with black text (5.32:1) than with white (3.95:1), which a naive lightness-threshold rule gets wrong. WCAG asks for at least 4.5:1 for normal body text and 3:1 for large text, so the two contrast values above tell you directly whether a colour is usable as a background.
Why a sampled JPEG colour can look wrong: JPEG stores colour at reduced resolution and reconstructs it approximately, so neighbouring pixels in what looks like a flat area often differ by several values. Picking one pixel gives you that pixel honestly, artefacts included. Averaging a small square is usually closer to the colour you believe you are pointing at.

How it works

  1. Choose an image, or drop one onto the box.
  2. Move the pointer over the image to preview a colour, then click to keep it.
  3. Every value is read from the pixels in your browser — the image is never uploaded.
Privacy & Processing: Everything runs in your browser. Your image and its filename are never uploaded, stored, or sent to analytics.

Frequently Asked Questions

Does it pick the pixel I actually clicked?

Yes, and that is the hard part. An image on a page is almost never displayed at its natural size — CSS scales it, a high-density screen multiplies it again, and object-fit may letterbox or crop it. A picker that assumes screen coordinates equal image coordinates reports a neighbouring or completely wrong colour. Every click is mapped back to real source coordinates, and clicks that land on letterboxing rather than on the image are recognised as such.

What formats is the colour given in?

HEX, HEX with alpha, CSS rgb() and CSS hsl(), plus HSV. Alpha is reported when the pixel is not fully opaque — including the alpha in the hex as the LAST pair, which is the CSS convention rather than the Android one.

What are the contrast ratios for?

Accessibility. The WCAG contrast ratio against both white and black is shown, plus which of the two makes readable text on that colour. The calculation applies the required gamma expansion — averaging sRGB values directly overestimates dark colours and produces ratios that claim to pass when they do not.

Is the image uploaded?

No. It is drawn to a canvas in your browser and read back locally. Neither the image nor its filename is transmitted.

Related Tools

Image DimensionsImage to Base64Image Resizer