How to Pick a Color from Any Screenshot on Mac

Why you need a color picker

Developers need to grab colors constantly. Matching a design comp, extracting a brand color from a website, checking whether two UI elements use the same shade, or reporting the exact color value of a pixel in a bug report.

Common scenarios:

• CSS development. You see a color in a design mockup or existing UI and need the hex code for your stylesheet.
• Design QA. Verify that the implemented color matches the design spec by picking the pixel color and comparing.
• Bug reports. “The button should be #34D399 but it is rendering as #22C55E” is a much better bug report than “the button color looks wrong.”
• AI prompts. “Change the background from #1E293B to #0F172A” gives your AI assistant exact values to work with.

macOS Digital Color Meter

macOS includes a free utility called Digital Color Meter, hidden in Applications > Utilities.

1. Open Digital Color Meter from Utilities, or press Cmd+Space and search for it.
2. Move your cursor over any pixel on screen. The tool shows the color values in real time.
3. Use the dropdown to switch between color spaces (Generic RGB, sRGB, Display P3, etc.).
4. Press Cmd+Shift+C to copy the color value.

Limitations

• No hex output. Digital Color Meter shows RGB decimal values (like 52, 211, 153), not hex codes (#34D399). You have to convert manually or use a calculator.
• Cannot pick from screenshots. It only reads live pixels on screen. If you want to pick a color from a saved screenshot, you must open the image first and hover over it.
• No color history. Once you move your cursor, the previous color is gone unless you copied it. There is no palette or history of picked colors.
• Magnifier is small. The preview aperture is tiny. On high-DPI screens, it can be hard to target the exact pixel you want.

Digital Color Meter works in a pinch, but the lack of hex output and the manual conversion step make it cumbersome for developer workflows.

Browser DevTools color picker

If the color you need is on a web page, browser DevTools is the most direct way to get it.

1. Right-click the element and select Inspect.
2. In the Styles panel, find the color property.
3. Click the color swatch to open the color picker.
4. Use the eyedropper tool to pick any color on the page.
5. The hex code is shown directly and can be copied.

This works perfectly for web colors but cannot pick colors outside the browser window. If you need a color from your IDE, a native app, or a design tool, DevTools cannot help.

LazyScreenshots color dropper

LazyScreenshots includes a color dropper that extracts hex color codes from any screenshot or area on screen.

1. Capture a screenshot with Cmd+Shift+2.
2. Select the Color Dropper tool.
3. Click any pixel in the screenshot.
4. The hex code is copied to your clipboard instantly.

The color dropper shows a magnified preview so you can target the exact pixel. The hex code copies in the format developers use (#34D399), ready to paste into CSS, a prompt, or a bug report.

Tips for accurate color picking

• Check your color profile. macOS uses Display P3 by default on newer screens. If you are picking colors for sRGB web use, make sure your tool is set to sRGB to avoid slight color shifts.
• Zoom in. On retina displays, individual pixels are tiny. Use a tool with magnification to ensure you are picking the right pixel, not an anti-aliased edge pixel.
• Watch for subpixel rendering. Text rendered with subpixel anti-aliasing will show different colors on different subpixels. Pick colors from flat areas, not from text edges.
• Pick from the center. Borders, shadows, and gradients create transition zones. Pick from the center of a colored area to get the true intended color.