Skip to content
AZ Tools

Image Color Picker

Drop an image and click anywhere to grab the exact HEX / RGB / HSL of that pixel — collect a palette as you go.

How to use

  1. Drop an image or click the box to choose one.
  2. Hover over the image to see the color under the cursor.
  3. Click to lock it into the palette below.
  4. Copy any saved color with the button next to it.

About this tool

Show

Load an image and click any pixel to read its exact colour, in hex, in rgb() and in hsl() at once, with a swatch and one-click copying for each. It is the fastest way to lift a brand colour off a screenshot, match a background you were sent as a picture rather than a value, or check what a gradient is actually doing at a given point. The reading comes from the decoded pixel data in the page, not from a guess about the rendered display, so for an sRGB or untagged file it is exactly the value stored in the file. Worth knowing when two samples disagree slightly: JPEG compression makes areas that look uniform vary by a few units, so click the middle of a flat region rather than near an edge. Nothing is uploaded.

Frequently asked questions

Why is the color slightly different from my design tool?

Browsers may apply the image's color profile (sRGB conversion) on decode. For pixel-exact picks, save the source as plain sRGB and avoid color-managed formats.

Does it work with transparent PNGs?

Yes, but a fully transparent pixel picks as #000000, not as the colour you see behind it. The picker reads the raw canvas bitmap, where a pixel the image never painted is (0, 0, 0, 0), and the page behind the image is not part of that data. Even a PNG that stores a colour underneath its transparency loses it, because compositing discards RGB at zero alpha. Flatten the image onto the background you want before picking.

Is the image uploaded?

No. The picker uses Canvas getImageData locally. Cross-origin images loaded into the canvas would normally raise a security error, but uploads from your device are always same-origin.

Why only 12 picks?

It's a soft limit to keep the palette readable. Pick what you need, copy it, then clear and start again.

Two clicks a pixel apart gave me different colours — why?

Because there is no averaging: the canvas is set to the image's full native size, your click position is scaled from the displayed size back to native pixels, and exactly one pixel is read. On a large photo shown small, one screen pixel covers several image pixels, so a one-screen-pixel move can land somewhere quite different. JPEG artefacts and camera noise make it worse. For a colour that represents an area, take several picks and average them, or blur the image first and pick from that.

Why does the colour differ from the same pixel in my design tool?

The browser applies the image's embedded colour profile when it decodes, so a file tagged Display P3 or Adobe RGB is converted to sRGB before it ever reaches the canvas, while a design tool may show you the untagged original numbers. The picked value is what a browser will actually display, which is usually what you want for the web. If you need the file's own numbers, strip or convert the profile to sRGB before uploading.

Related tools