BrowserTools

Image Color Picker

Pick exact colors from any image

By Guga — BrowserTools maintainer, Tbilisi, Georgia Updated 2026-08-28
Free Private No uploads
What is Image Color Picker?

Matching a colour from a screenshot usually starts with an eyedropper, and this is one that never leaves the tab. Click anywhere on the image and the tool reads that exact pixel from a full-resolution canvas, then reports it three ways: HEX for design tools, RGB for code, and HSL when you need to reason about lightness and saturation separately. The coordinates of the sample are shown too, which is how you go back and check a neighbouring pixel when the first one landed on an anti-aliased edge. Sampling is done at native resolution even though the preview is scaled down to fit, so a 4000-pixel-wide screenshot gives you the true value of the pixel under the cursor. The HEX code is copied to your clipboard automatically on every click.

Hover over any image and pick exact pixel colors with HEX, RGB and HSL values ready to copy. The fastest way to match brand colors from screenshots and designs.

Private Image Color Picker In Your Browser

Image Color Picker is processed locally with client-side JavaScript. Your files never touch a server, and there is no queue to wait in.

Step-by-Step

How to use Image Color Picker

1

Send a file to the Drop an image to pick colors from it target — any image format is accepted.

2

Click the spot you want — the canvas is sampled at full resolution, not at the displayed size.

3

Read the resulting HEX, RGB, and HSL values, plus the exact coordinates of the sample.

4

Take the value from your clipboard, or copy the one you need from the stat tiles.

Key Capabilities
  • Samples the full-resolution pixel even when the preview is scaled down to fit the panel
  • Reports the value as HEX, RGB, and HSL simultaneously for whichever notation you need
  • Displays the x and y coordinates of the sample so you can verify a neighbouring pixel
  • Copies the HEX value to your clipboard on every click, with no extra button press
Common Use Cases
  • A front-end developer matching a button colour from a design screenshot to a CSS rule.
  • A brand designer pulling the exact hex of a logo colour so it can be written into a token file.
  • A support engineer identifying the colour of an error state so it can be matched in a test fixture.
Clear Answers

Frequently Asked Questions

Why is the colour I picked slightly different from the one I see?
You almost certainly sampled an anti-aliased edge. Where a shape meets its background, the intermediate pixels are blends of both, so the value is real but not one of your palette colours. Zoom your design tool in and pick from a flat interior region instead.
Does it handle images with an alpha channel?
Yes, and the alpha value is simply not reported. A fully transparent pixel will read as its underlying RGB values, which are usually meaningless — sample a visible area instead.
Is there an eyedropper I can trigger from the keyboard?
No. The EyeDropper API is not wired up here; sampling happens on a click over the image canvas.
Is the image uploaded?
No. The file is drawn into a local canvas and sampled in place, so nothing is transmitted when you click.