How to Use a Color Picker on Mac and Copy the Hex Code

Designers, developers and anyone matching a brand colour eventually need the exact colour of something on screen. macOS has two free, built-in ways to get it, and both are a bit hidden.

Method 1: Digital Color Meter

Digital Color Meter is a small utility that shows the colour under your pointer as you move it.

1. Open it from Applications → Utilities → Digital Color Meter, or search for it in Spotlight.
2. From the pop-up menu in its window, choose Display in sRGB. It's the colour space the web and most design tools use, so values match.
3. In the View menu, choose Display Values → as Hexadecimal.
4. Move the pointer over the colour you want. Use ⌘ L to lock the position so you can move the mouse away.
5. Press ⇧ ⌘ C (Color → Copy Color as Text) to copy the value.

Tip: the aperture slider controls how many pixels are averaged. Set it to the smallest size to sample a single pixel, such as a thin line or a small icon.

Method 2: the Colors panel eyedropper

Any app that lets you colour text has the standard macOS Colors panel, and it includes an eyedropper that works anywhere on screen.

1. Open TextEdit (or Pages, Keynote, Mail) and press ⇧ ⌘ C in TextEdit, or choose Format → Font → Show Colors.
2. Click the eyedropper next to the colour swatch.
3. Click the colour you want anywhere on screen.
4. Select the Color Sliders tab and choose RGB Sliders. The hex value appears in the Hex Color # field, ready to copy.

Colour spaces: why values sometimes don't match

Your Mac's display may use a wider colour space (Display P3) than the web's sRGB. The same colour can have different numbers in each. If a hex code you picked looks slightly off when used in CSS or Figma, make sure you sampled in sRGB, as in step 2 of the Digital Color Meter method.

A faster way: a colour picker that remembers

Both built-in tools take a few steps, and neither remembers the colours you picked. If you sample colours regularly, a picker that lives in the menu bar and saves every colour is quicker. EasyPaste includes a Color Picker tool built on the system's own colour sampler: pick any pixel on screen and its hex code goes onto your clipboard and into your history as a colour swatch. Hex codes you copy from anywhere else also show up as swatches, so your palette builds itself as you work, and you can file brand colours into a category.

Frequently asked questions

Is there a keyboard shortcut for the colour picker on Mac?

Not system-wide. Digital Color Meter can be kept in the Dock and opened quickly, and in apps with a Colors panel ⇧ ⌘ C often opens it (TextEdit uses that shortcut). Menu-bar colour pickers can have their own global shortcuts.

How do I get the RGB value instead of hex?

In Digital Color Meter, choose View → Display Values → as Decimal or as Percentage. In the Colors panel, the RGB sliders show each channel's value.