Image Color Picker

Click any pixel on an uploaded image to capture HEX and RGB values for design and CSS work.

Files never leave your device

Drop an image to sample colors

or click to browse — click any pixel with the eyedropper

Matching a brand color from a screenshot or product photo is tedious when you guess hex codes by eye. This color picker samples the exact pixel you click and exposes values you can paste into Figma, CSS, or a style guide.

Compressed images and gradients can shift perceived color; sample multiple nearby pixels and average mentally when a logo anti-aliases against a busy background. Calibrated displays help, but the tool still beats eyeballing.

Blur or mosaic regions first if the screenshot contains secrets you should not upload to shared machines. For creating transparent cutouts around a sampled brand mark, continue with remove-background tools.

How to use

  1. Upload a reference imageOpen a PNG, JPG, or other supported still that contains the color you need.
  2. Click the target pixelZoom if available, then sample the brand mark, UI chrome, or object.
  3. Copy the color valueGrab HEX or RGB from the readout and paste into your design tool or stylesheet.
  4. Sample variantsCheck highlight and shadow pixels when materials are glossy or lit unevenly.
  5. Document the tokenName the color in your design system so teammates reuse the same value.

Use cases

  • CSS implementationTranslate a mock’s accent color into a hex custom property.
  • Brand auditsVerify that a live site still matches approved palette values.
  • Marketplace listingsDescribe product color accurately when writing catalog copy.

Tips

  • Avoid sampling from heavy JPEG block edges—prefer cleaner PNG UI captures.
  • sRGB vs display P3 can make phone screenshots look different on desktop.
  • Record opacity separately; HEX alone does not capture alpha.
  • Build a small swatch strip in your doc after picking three related tones.

FAQ

Which formats can I sample?

Common still image formats supported by the uploader (such as PNG and JPEG).

Does the image upload to a server?

Sampling is designed to happen in the browser on the file you select.

HEX vs RGB?

They describe the same sRGB triple in different notations—use whichever your tool expects.

Can it pick from the live webpage?

This tool works on images you provide, not an arbitrary URL eyedropper for the whole internet.

Color blindness simulation?

Not included here—use dedicated accessibility simulators after you pick values.

Related tools?

remove-background and product-background help isolate subjects after you lock colors.

Related tools