How to Pick a Color from an Image (Eyedropper Tool)

What is an eyedropper tool?

An eyedropper is a tool that samples the exact color of any pixel in an image. Click on a pixel, and the tool gives you back the color's numeric value — usually as HEX, RGB, or HSL. Designers and developers use it constantly: "I love that blue in the photo, what is it?" becomes a 2-second task with an eyedropper.

The reasons people pick colors from images are practical and frequent:

• Match a brand to a photo: You have a product photo, and you want the website's accent color to echo the product. The eyedropper finds the exact shade.
• Replicate a design: You see a website or poster you love, and you want the same blue in your own project. Eyedropper a screenshot and you have the hex code.
• Build a palette: A photo has 5-6 dominant colors that look great together. The eyedropper extracts them as a starting point.
• Touch up paint or fabric: Take a photo of a wall, eyedrop the color, and take it to a paint store to match the swatch.
• Color-correct precisely: Need to match a logo's blue across two images? Eyedrop both, compare the codes, adjust.
• Curiosity: "Is that black actually black, or is it dark blue?" An eyedropper answers in a click.

The good news: with the right tool, picking a color from an image is a 10-second job, and you do not need to install anything.

Method 1: Use UtilBoxx's Free Color Picker (Recommended)

The fastest, safest, and most private way to pick colors from an image is UtilBoxx's Color Picker tool. It runs entirely in your browser, so your image never leaves your device. There is no upload, no signup, and no tracking.

Here is how to use it:

1. Go to utilboxx.com/en/tools/color/picker
2. Click the upload area and select your image (or drag and drop)
3. Hover over the image — the live color preview shows the hex code under your cursor
4. Click anywhere on the image to "lock" that color
5. Read the color in HEX, RGB, and HSL simultaneously
6. Click any output to copy it to your clipboard
7. Optional: zoom in for pixel-perfect sampling

Why we recommend this method:

• 100% free, no account, no signup, no email gate
• Privacy-first: everything happens locally in your browser. Your image never reaches a server.
• Live preview: see the color under your cursor before you click
• All three formats: HEX, RGB, HSL shown together
• One-click copy: copy any format to the clipboard
• Zoom support: get pixel-precise samples from small or detailed images
• Works on any device: Windows, Mac, Linux, ChromeOS, iOS, Android

If you only need to pick colors occasionally, this is by far the lowest-friction option.

Method 2: Adobe Photoshop (Paid)

Photoshop is the heavyweight of image editing, and its Eyedropper Tool (keyboard shortcut I) is the gold standard for color sampling. Click anywhere in an open image, and the foreground color swatch updates to the sampled value. The Info panel (Window > Info) shows the exact pixel coordinates and the color in CMYK, RGB, HSB, Lab, and Web (hex) — all at once. You can also set the sample size to "3x3 Average" or "5x5 Average" to sample a small region instead of a single pixel, which is useful for noisy or anti-aliased images.

The catch is the price. Photoshop is part of a Creative Cloud subscription that costs roughly $22.99 per month (about $240 per year). For a one-off color pick, it is overkill, and the panel of options is more than most people need.

Photoshop is worth it only if you already use it for retouching, compositing, or design work. If color picking is all you need, a browser tool does the job without the bill or the install.

Method 3: macOS Digital Color Meter (Built-in, free)

If you are on a Mac, you already have a powerful eyedropper installed: Digital Color Meter. It lives in Applications > Utilities. Open it, choose your display, hover the magnifier over any pixel on the screen (not just in an image — anywhere), and it shows the color in RGB, hex, or percentage. You can also lock the view to a small window that always sits on top, which is perfect for cross-referencing colors in different apps.

To use it for an image:

1. Open the image in Preview, Quick Look, or any viewer
2. Open Digital Color Meter (Cmd+Space, type "Digital Color Meter")
3. Click the image — the color appears in the meter
4. Choose Color > Copy as Text (or press Cmd+Shift+C) to get the hex code on your clipboard
5. Paste anywhere

This is the most underrated tool on macOS. It is built in, free, and works on any pixel on the screen — not just inside an app. On Windows, Microsoft PowerToys has a similar "Color Picker" utility that does the same job (press Win+Shift+C to activate).

Common questions

Can I sample colors from a website?

Yes. In Chrome, Firefox, or Edge, open DevTools (F12 or Cmd+Opt+I), click the "Inspect" tool (top-left icon), then click on the page. The Styles panel shows the colors used on that element, and you can click the color swatch to see hex, RGB, HSL, and even modify the color live. On macOS, Digital Color Meter can sample any pixel on the screen, including ones in a browser.

What is the difference between HEX, RGB, and HSL?

• HEX is a six-character code like `#FF5733`, the standard for CSS
• RGB is three numbers 0-255, like `rgb(255, 87, 51)`, the raw screen values
• HSL is hue/saturation/lightness, more intuitive for adjusting colors

All three describe the same color. UtilBoxx shows all three side by side so you can copy whichever format your project needs.

How do I pick a color from a small or detailed image?

Zoom in. UtilBoxx supports zooming in on the image so you can position the cursor on the exact pixel you want. In Photoshop, the eyedropper has a "Sample Size" dropdown that lets you average over 3x3 or 5x5 pixels, which is a great fallback for noisy images.

How do I match a color I see in real life?

Use your phone's camera, eyedrop the photo you took, and use the sampled color. For more accuracy, photograph the object in good daylight (no flash), eyedrop a flat area, and double-check the result against the object itself.

Can I pick a color from a PDF or video?

Yes — take a screenshot (Cmd+Shift+4 on Mac, Win+Shift+S on Windows), then eyedrop the screenshot. For video, pause on a frame, screenshot, eyedrop. UtilBoxx accepts JPG, PNG, and WebP, so any screenshot in those formats works.

Is it safe to use an online color picker?

It depends on the service. UtilBoxx processes everything in your browser — no upload, no server-side processing, no logs. With other tools, assume your image is being uploaded to a remote server and read their privacy policy carefully. For personal or proprietary images, a browser-only tool is the safer choice.

Conclusion

An eyedropper is one of the most useful little tools in any designer's or developer's kit, and it should not require a paid subscription. For most people, UtilBoxx's free Color Picker is the obvious choice: it is private, fast, and free, with no signup.

If you are a designer who already lives in Photoshop, the Eyedropper Tool is a great backup. If you are on a Mac, Digital Color Meter is an excellent always-available option. And GIMP, the free Photoshop alternative, has the same eyedropper at zero cost.

For everything else, head to UtilBoxx Color tools and you will find a complete, privacy-first toolkit for working with colors — all in your browser.