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
- Upload a reference image — Open a PNG, JPG, or other supported still that contains the color you need.
- Click the target pixel — Zoom if available, then sample the brand mark, UI chrome, or object.
- Copy the color value — Grab HEX or RGB from the readout and paste into your design tool or stylesheet.
- Sample variants — Check highlight and shadow pixels when materials are glossy or lit unevenly.
- Document the token — Name the color in your design system so teammates reuse the same value.
Use cases
- CSS implementation — Translate a mock’s accent color into a hex custom property.
- Brand audits — Verify that a live site still matches approved palette values.
- Marketplace listings — Describe 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
Common still image formats supported by the uploader (such as PNG and JPEG).
Sampling is designed to happen in the browser on the file you select.
They describe the same sRGB triple in different notations—use whichever your tool expects.
This tool works on images you provide, not an arbitrary URL eyedropper for the whole internet.
Not included here—use dedicated accessibility simulators after you pick values.
remove-background and product-background help isolate subjects after you lock colors.