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

www.lazyscreenshots.com publishes a public search API over its indexed pages; the guide is at https://www.lazyscreenshots.com/agent-access.

Source: https://www.lazyscreenshots.com/blog/pick-color-from-screenshot-mac/
Source observed: 2026-09-19T03:00:32.290Z
Last checked: 2026-09-21T21:19:22.89+00:00
Indexed: 2026-09-19T03:06:45.828+00:00

---

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

**April 21, 2026 · LazyScreenshots Team**

## Why pick colors from a screenshot?

Exact pixel values help with brand matching, CSS themes, and actionable bug reports. macOS includes color-picking tools, though their workflows are not obvious.

## Method 1: Digital Color Meter

Open **Applications > Utilities > Digital Color Meter**, or use Spotlight with **⌘ + Space**.

1. Open the screenshot in Preview, Quick Look, or another viewer.
2. Launch Digital Color Meter.
3. Set the display mode to **Display in sRGB**.
4. Hover over the target pixel.
5. Press **⌘ + Shift + C** to copy the color.
6. Press **⌘ + L** to lock the color.

The default copied text is RGB, such as `R: 52 G: 211 B: 153`. For hexadecimal output, choose **View > Display Values > as Hexadecimal**. Copying can then produce a value such as `34D399`; prefix it with `#` for CSS.

## Method 2: System Color Picker

1. Open the screenshot in Preview.
2. Choose **Tools > Annotate > Color**, or open a color well in Markup.
3. Click the magnifying-glass icon in the color panel.
4. Click any pixel on screen.
5. View hex, RGB, and HSL values in the **Sliders** tab.

In the panel, choose the **Sliders** tab, select **RGB Sliders**, and copy the value from **Hex Color #**. This eyedropper works in apps that expose the native color panel, including Pages, Keynote, TextEdit, Xcode, and many design tools.

## Method 3: Screenshot tools with color picking

- **Shottr:** Free; its menu-bar color picker shows hex, RGB, and HSL values. Press **C** while hovering to copy hex.
- **CleanShot X:** **$29**; offers a menu-bar picker, zoomed preview, clipboard copy, and recent-color history.
- **LazyScreenshots:** Combines capture, annotation, and color picking so you can sample directly from a capture without switching tools.

## Method 4: Dedicated color-picker apps

- **ColorSlurp:** Free with a Pro upgrade; supports hex, RGB, HSL, Swift UIColor, CSS, and other formats. Pro adds palette management and color-harmony suggestions.
- **ColorSnapper 2:** **$8.99**; offers a high-resolution magnifier and keyboard-driven picking.
- **Pikka:** Free; provides menu-bar picking, format options, history, and palette export.

| Tool | Price | Hex copy | Palette/history | Global shortcut |
|---|---|---|---|---|
| Digital Color Meter | Free (built-in) | Manual conversion | No | No |
| System Color Picker | Free (built-in) | Yes | Swatches only | No |
| Shottr | Free | Yes | No | Yes |
| ColorSlurp | Free / $9.99 | Yes | Yes (pro) | Yes |
| ColorSnapper 2 | $8.99 | Yes | History | Yes |

## Picking colors from Retina screenshots

Retina displays render at 2× density, so a screenshot can contain twice the physical resolution visible on screen.

- Zoom to **100%** in Preview with **⌘ + =** or choose **Actual Size** before sampling; otherwise the viewer may interpolate pixels.
- Digital Color Meter’s **1×1** aperture samples one pixel. Larger apertures average surrounding pixels and are more useful for gradients than exact element colors.
- Use **sRGB**. P3 or other wide-gamut profiles can produce different RGB values from those expected in CSS.

## Quick workflow: screenshot to hex in under 5 seconds

1. Press **⌘ + Shift + 4** to capture the region.
2. Open Digital Color Meter.
3. Choose **View > Display Values > as Hexadecimal**.
4. Open the screenshot in Preview or Quick Look.
5. Hover over the target and press **⌘ + Shift + C**.

The hex value is on the clipboard; prefix it with `#` for CSS, design tools, or bug reports. Once Digital Color Meter is open, the workflow takes about **5 seconds**. A global-shortcut tool such as ColorSlurp can skip capture and copy a color in about **2 seconds**, but capturing first preserves the image for reference.

## Development workflows

- **CSS:** Paste hex values into stylesheets or define variables such as `--color-primary: #34D399;`; convert transparency to `rgba()` or `hsla()`.
- **Design handoff:** Screenshot sampling can hit anti-aliased edges, shadows, or gradient midpoints. Use the Figma or Sketch inspect panel when the source file is available.
- **Brand audits:** Compare sampled values across pages to find inconsistent hardcoded colors, such as `#3B82F6` versus `#2563EB`.
- **Bug reports:** A specific value such as “the header is `#1E293B`, but the spec says `#0F172A`” is more actionable than “the header color is wrong.”

## Troubleshooting

- **Hex differs from the visible color:** Switch the picker from the display’s native profile, such as P3, to sRGB.
- **Sample does not match the design spec:** Check the source display profile; use Preview’s **Tools > Assign Profile** and switch to sRGB.
- **Values vary slightly:** Zoom to 100%, set the aperture to 1×1, and sample the center of a solid region rather than an anti-aliased edge or gradient.
- **Transparent pixels look wrong:** Preview composites transparency against white. Use an editor that shows a checkerboard and sample the actual RGBA pixel.

LazyScreenshots combines capture, annotation, and color picking in one step for **$29 one-time**.

[Try LazyScreenshots — $29 one-time](https://www.lazyscreenshots.com/)

### Related

- [How to Annotate Screenshots on Mac](https://www.lazyscreenshots.com/guides/how-to-annotate-screenshots-on-mac/)
- [Retina Screenshots on Mac: How to Fix DPI, Resolution & Oversized Images](https://www.lazyscreenshots.com/blog/retina-screenshot-mac-dpi/)

---

[Read this page’s summary](https://www.lazyscreenshots.com/api/public/v1/page-tldr?url=https%3A%2F%2Fwww.lazyscreenshots.com%2Fblog%2Fpick-color-from-screenshot-mac%2F&trace=t_8b965f9c5bc6)

## Ask a follow-up about this page

Need a more specific answer? Ask the exact question you have. It returns a fresh, cited answer from www.lazyscreenshots.com’s knowledge base. No account or API key required.

Open this URL with your own question, URL-encoded. Only q is required. No account or setup.

`GET https://www.lazyscreenshots.com/agent/faq?q={question}&trace=t_8b965f9c5bc6`

[Tool guide and examples](https://www.lazyscreenshots.com/agent-access) · [OpenAPI](https://www.lazyscreenshots.com/api/public/v1/openapi.json) · [Page TLDR form](https://www.lazyscreenshots.com/agent-tools/page-tldr?url=https%3A%2F%2Fwww.lazyscreenshots.com%2Fblog%2Fpick-color-from-screenshot-mac%2F). Opening a form does not execute a tool.