How to pick a colour from anywhere on your Mac screen

macOS has had a screen colour picker for decades and hides it well. There are actually two, they behave differently, and neither gives you hex without being asked. Here is how to use both, and what to do when you need the value more than once.

Digital Colour Meter

It lives in /Applications/Utilities. Find it with Spotlight, or open Finder and press ⇧⌘U. It shows a magnified view of whatever is under the pointer and the colour value of the centre pixel.

1. Switch it to hexOut of the box it reports decimal RGB. Choose View › Display Values › as Hexadecimal. Worth doing first, because the setting does not always survive a relaunch.
2. Point at the pixelMove the pointer. ⇧⌘L locks the horizontal position and ⇧⌘M the vertical, which is how you stop the reading moving while you go for the keyboard.
3. Copy it⇧⌘C copies the colour value as text. ⌥⇧⌘C copies the magnified image instead.

Its aperture is adjustable, which matters more than it sounds: on a photograph or a gradient a single pixel is often not the colour you meant, and widening the aperture averages the surrounding pixels into a more representative value.

The system colour panel

Apps with a colour well, including TextEdit, Pages, Notes, Xcode and most design tools, open the standard macOS colour panel. That panel has a magnifying-glass button. Click it and you get an eyedropper you can click anywhere on screen. The colour lands in the panel, and its hex field is under the second tab.

This is the faster route when you are already in an app that needs the colour. It is the slower one when you are not, because you have to open something with a colour well first.

Colour space, and why two tools disagree

A pixel does not have one true hex value. The number depends on which colour space you read it in, such as the display's own profile, Display P3 or sRGB. On a modern wide-gamut Mac display those differ visibly. Digital Colour Meter lets you choose, under the pop-up at the top; the default is the display's native profile, which is why a value sampled there can look wrong when you paste it into CSS.

For anything headed for the web, you want sRGB. That is what CSS hex means, what browsers assume, and what design tools export.

When you need it more than once

Both built-in tools give you a value and forget it. Sample four colours off a screenshot to rebuild a palette and you are pasting each one somewhere before you take the next.

Stowpad's picker is available anywhere with ⌘⌃⇧P. Click a pixel and the colour goes into your clipboard history as a colour: it shows as a swatch, and you can paste it later as hex, eight-digit hex, rgb(), rgba(), hsl() or hsb() without sampling it again. Values are reported in sRGB.

The default Point mode uses the same system sampler as the colour panel and needs no Screen Recording permission at all. The optional 3×3 through 15×15 averaging modes use it in memory and keep only the resulting sRGB value. They do not save an image. This is set out in the privacy policy, section 04. The colour picker is in the free tier.