Tack+

The color picker on Mac: grab a color and copy its code

· 3 min read

A color on a website, in a mockup, in a photo, and you want its code: macOS has no global shortcut for it, but it has the tools. Here's how to sample any pixel on screen and copy its hex code, from the most manual way to the fastest.

The short version

  • Digital Color Meter (Applications › Utilities): hover over the color, then ⇧ ⌘ C to copy its value as text.
  • For hex: View › Display Values › as Hexadecimal; pick the sRGB color space for colors meant for the web.
  • In any app that opens the macOS color panel (TextEdit, Pages, Keynote): the panel's magnifier samples a color anywhere on screen.
  • Tack+: one click on the eyedropper, one click on the pixel, and the #RRGGBB code is on the clipboard.

With Digital Color Meter

Digital Color Meter comes with every Mac, in Applications › Utilities. It constantly shows the color under the cursor.

  1. Open Digital Color Meter and choose the color space from the pop-up menu: sRGB for a color meant for the web or an app.
  2. To read the code in hex: View › Display Values › as Hexadecimal.
  3. Put the cursor on the color you want, then Color › Copy Color as Text, or ⇧ ⌘ C, without moving the mouse.

Two handy shortcuts: ⌘ L locks the sampled area so you can move the cursor afterwards; ⌥ ⌘ C copies the color as an image, a small square swatch.

The catch: you have to open the app, aim, and keep the cursor still while pressing the shortcut. And values depend on the color space: the same pixel gives a different code in sRGB and in P3.

With the macOS color panel

In apps that open the system color panel (TextEdit, via Format › Font › Show Colors, Pages, Keynote and many others), the panel's magnifier samples a color anywhere on screen. The sliders tab, in RGB mode, then shows its hex code, which you can select and copy.

Convenient when you're already in one of those apps; a detour when all you wanted was the code.

In one click, with Tack+

Tack+ tucks your Mac into a thin line at the edge of the screen: push the cursor against the edge and the panel opens. Its tools row has an eyedropper.

  1. Open the panel and click the eyedropper.
  2. The macOS magnifier appears: click the pixel you want, anywhere on screen.
  3. The code is copied, in uppercase hex (#F5F0E6): paste it with ⌘ V.

Like any copy, the code joins Tack+'s clipboard history: yesterday's picks are still there, and you can pin the ones from a brand palette.

The same tools row has a selection screenshot, a focus timer and a notepad.

Three ways, side by side

Digital Color MetermacOS color panelTack+
To startOpen the app in UtilitiesOpen an app with the color panelPush the cursor against the edge
To sampleAim, then ⇧ ⌘ CMagnifier, clickMagnifier, click
Hex codeYes, once set upYes, RGB tabYes, copied right away
Color history—Colors you save by handIn the clipboard history

Frequently asked questions

Does the Mac have a built-in color picker?

Yes: Digital Color Meter, in Applications › Utilities, reads the color under the cursor, and the macOS color panel has a sampling magnifier in the apps that use it.

How do I copy a color's hex code on a Mac?

In Digital Color Meter, show values in hexadecimal (View › Display Values), hover over the color and press ⇧ ⌘ C. With Tack+, a click on the eyedropper and then on the pixel copies the #RRGGBB code directly.

Why does the same pixel give different codes?

Because the code depends on the color space: Digital Color Meter can show the display's native values, sRGB, P3 and others. For the web, read them in sRGB.

Does Tack+'s eyedropper work anywhere on screen?

Yes: it uses the macOS sampling magnifier, which works on any pixel, in any app.

Read next

All guides (15)