How to Pick Any Color from a Screenshot on Mac (Hex, RGB, HSL)

Why you’d want to pick colors from a screenshot

You’re looking at a screenshot of a landing page, a design comp, or someone else’s app and you need the exact color. Maybe you’re matching a brand palette, building a CSS theme, or filing a bug that says “the button is the wrong shade of blue.” Eyeballing hex codes doesn’t work. You need a color picker that reads the actual pixel values from the image on screen.

macOS ships with built-in tools that do this, but they’re not obvious. Here are the fastest ways to go from screenshot to color code.

Method 1: Digital Color Meter — Mac’s built-in picker

Digital Color Meter has shipped with every version of macOS. It lives in Applications > Utilities, or you can open it with Spotlight (⌘ + Space, type “Digital Color Meter”).

Once open, it shows a magnified view of the pixels under your cursor and continuously updates the color values as you move the mouse. Here’s how to use it effectively:

1. Open your screenshot in Preview, Quick Look, or any image viewer.
2. Launch Digital Color Meter.
3. Set the display mode to Display in sRGB from the dropdown (this matches web/CSS color space).
4. Hover your cursor over the pixel you want to sample.
5. Press ⌘ + Shift + C to copy the color value to your clipboard.
6. Lock the color by pressing ⌘ + L so it doesn’t change when you move the mouse.

The catch: Digital Color Meter copies color values as text in the format “R: 52 G: 211 B: 153” — not as a hex code. To get hex, you’ll need to convert manually or change the display value format. Go to View > Display Values and select as Hexadecimal. Now ⌘ + Shift + C copies something like “34D399” which you can prefix with # for CSS.

Method 2: System Color Picker eyedropper

Any app that uses the native macOS color panel gives you access to a powerful eyedropper tool. The fastest way to access it:

1. Open your screenshot in Preview.
2. Go to Tools > Annotate > Color (or click any color well in the Markup toolbar).
3. In the color panel that appears, click the magnifying glass icon on the left side.
4. Your cursor becomes a magnified eyedropper. Click any pixel on screen — even outside the Preview window.
5. The color panel now shows the exact color with hex, RGB, and HSL values in the Sliders tab.

This works from any app that shows the system color panel — Pages, Keynote, TextEdit, Xcode, and most design tools. The eyedropper samples from any pixel on any screen, including other app windows and your desktop. So you can have your screenshot open in one window and pick from it while the color panel is attached to a completely different app.

Getting hex values: In the color panel, click the Sliders tab (second icon from left), then select RGB Sliders from the dropdown. The hex field appears at the bottom, labeled Hex Color #. You can copy the value directly from this field.

Method 3: Screenshot tools with built-in color picking

Several Mac screenshot tools include a color picker as a built-in feature, which makes sense — if you’re already taking screenshots, picking colors from them is a natural next step.

Shottr (free) includes a color picker accessible via its menu bar icon. Take a screenshot, and you can hover over any pixel to see hex, RGB, and HSL values in a tooltip. Press C while hovering to copy the hex code.

CleanShot X ($29) has a dedicated color picker tool in its menu bar dropdown. It shows a zoomed preview with hex values and copies to clipboard on click. It also keeps a history of recently picked colors.

LazyScreenshots combines capture, annotation, and color picking into one workflow. Screenshot a UI, pick colors directly from the capture, and annotate them — all without switching tools.

Method 4: Dedicated color picker apps

If color picking is a frequent part of your workflow, dedicated apps offer features that built-in tools lack:

ColorSlurp (free with pro upgrade) is a lightweight color picker that lives in your menu bar. Press a global shortcut to activate the eyedropper anywhere on screen. It supports hex, RGB, HSL, Swift UIColor, CSS, and dozens of other formats. The pro version adds palette management and color harmony suggestions.

ColorSnapper 2 ($8.99) focuses on precision picking with a high-resolution magnifier and keyboard-driven workflow. It copies the color in your preferred format with a single shortcut. Useful when you’re sampling tiny UI elements where a one-pixel offset changes the color.

Pikka (free) sits in the menu bar and gives you a quick eyedropper with format options. It keeps a running history of picked colors and supports exporting palettes.

Picking colors from Retina screenshots

Retina displays render at 2x pixel density, which means a screenshot from a Retina Mac is physically twice the resolution of what you see on screen. This matters for color picking because the pixel you think you’re sampling might not be the one you get.

Zoom in before picking. When your screenshot is viewed at less than 100% zoom, the image viewer is downsampling pixels. The color you see on screen is an interpolation of multiple pixels, not the actual value. Open the screenshot in Preview, press ⌘ + = to zoom to 100% (or “Actual Size” in the View menu), then sample.

Average vs. single-pixel sampling. Digital Color Meter has an aperture size setting (in the menu or by scrolling the magnifier). A 1x1 aperture picks a single pixel. Larger apertures average the surrounding area — useful if you want the general color of a gradient region, but misleading if you want the exact value of a specific element.

Color space matters. Make sure your picker is set to sRGB. Mac screenshots are captured in the display’s color profile, which on wide-gamut displays (P3) can produce different RGB values than you expect in CSS. Digital Color Meter’s “Display in sRGB” mode handles this conversion. The system color picker also has a color space selector in the Sliders tab.

Quick workflow: screenshot to hex code in under 5 seconds

Here’s the fastest path from “I need that color” to clipboard:

1. Press ⌘ + Shift + 4 to screenshot the region with the color you need. (It saves to your desktop or clipboard depending on your settings.)
2. Open Digital Color Meter (keep it in your Dock if you do this often).
3. Set display values to hexadecimal (View > Display Values > as Hexadecimal).
4. Open the screenshot (double-click for Preview, or press Space for Quick Look).
5. Hover over the target pixel and press ⌘ + Shift + C.

Your hex code is now on the clipboard. Prefix with # and paste into your CSS, design tool, or bug report. Total time: about 5 seconds once Digital Color Meter is open.

Even faster: If you use a tool like ColorSlurp, you can skip the screenshot entirely. Press the global shortcut, click the pixel on screen, and the hex code is on your clipboard in two seconds. But if you need to keep the screenshot for reference (documentation, a design spec, a bug report), capturing first and picking from the image gives you both the visual artifact and the color data.

Using picked colors in development workflows

CSS and web development. Paste hex values directly into your stylesheets. If you need transparency, convert to rgba() or hsla(). Most color pickers show all formats. For CSS custom properties, you can define sampled colors as --color-primary: #34D399; and reuse them across your project.

Design handoff. When a developer picks colors from a screenshot of a design comp, there’s always a risk of sampling the wrong pixel (anti-aliased edges, shadow overlaps, gradient midpoints). If you have access to the original design file in Figma or Sketch, use the inspect panel instead. Color picking from screenshots is a fallback when the design file isn’t available or when you need to match something from a live app or competitor’s site.

Brand consistency audits. Take screenshots of your app across different pages, then pick colors to verify they match your brand spec. This catches subtle inconsistencies — a button that’s #3B82F6 on one page and #2563EB on another because someone hardcoded a slightly different shade instead of using the design token.

Bug reports. “The header color is wrong” is vague. “The header is #1E293B but the spec says #0F172A” is actionable. Including the sampled hex code in your bug report eliminates ambiguity and saves a back-and-forth cycle with the designer.

Troubleshooting: wrong color values

Color looks right on screen but hex is wrong. This usually means your picker is reading in the display’s native color profile (P3 on newer Macs) instead of sRGB. Switch Digital Color Meter to “Display in sRGB” or set the system color picker’s color space to sRGB.

Sampled color doesn’t match the design spec. Check if the screenshot was taken on a different display or with a different color profile. Screenshots captured on a P3 display embed the P3 color profile. When viewed on an sRGB monitor, the colors shift. Open the screenshot in Preview, go to Tools > Assign Profile, and switch to sRGB to see if that resolves the mismatch.

Getting slightly different values each time. You’re probably sampling near an edge or gradient. Zoom to 100%, set the aperture to 1x1, and pick from the center of the solid color region, not the boundary where anti-aliasing blends adjacent colors.

Transparent pixels show unexpected values. If the screenshot has transparency (PNG with alpha channel), the color you see depends on what’s behind it. Preview renders transparent areas against a white background, so the sampled color is the composite. Open the image in an editor that shows the checkerboard transparency pattern and sample from there to get the actual RGBA value.