you need the hex. the Mac shows you rgb.
updated · by Anton Shakirov
macOS ships a pixel-accurate eyedropper called Digital Color Meter, and most people searching for this already have it open and cannot find the hex. it is two menus away — and behind it sits a problem nobody warns about: the number it gives you may not be the number in the design file, and that is not a bug.
the built-in way to get a hex code
- open Digital Color Meter — Applications → Utilities, or ⌘Space and type the name.
- View → Display Values → as Hexadecimal. this is the step people miss.
- hover over the pixel you want. ⌘L locks the reading so it stops following the cursor; ⌘X and ⌘Y lock one axis each, which is how you follow a gradient.
- ⇧⌘C copies the value — Color → Copy Color as Text. the item under it, ⌥⌘C, copies the colour as a swatch image instead.
two settings next to those get missed as often. the Aperture Size slider decides how much screen goes into one reading: all the way down for a single pixel, wider to average a noisy area. Magnification, 1x to 8x, shows which pixel you are on — which matters when you want a one-pixel border.
the other eyedropper, inside the system colour picker
click any colour well in Notes, Pages or Keynote, use the loupe, open the sliders tab, choose RGB, read the Hex Color # field. same result, more clicking, and only while some app has a picker open. what a dedicated one adds on top of both: the colour picker in hop
the aperture and both copy shortcuts are written down in Apple's own guide, which runs to about a page: Digital Color Meter User Guide
why the hex does not match the design file
if you have read anything else on this, you were told the colour space sits in View → Display Values, next to the hex setting. it does not. that submenu holds only the format of the number — as Decimal, as Hexadecimal, as Percentage, as Float. the space itself is a separate row of items in the View menu one level up, and a pop-up inside the window.
there are eight: Display native values, native EDR, native EDR Linear, Display in sRGB, in P3, in Adobe RGB, in BT.2020 and in L*a*b*. the app opens on the first — the light your panel is emitting — and your panel is not sRGB. so the same pixel hands you a hex several steps from what the designer typed. the meter is right and so is the file; they answer in different units.
Apple keeps the two apart in its own wording — the format is «choose View > Display Values», the space is «click the pop-up menu, then choose a color space»: select a different colour space
the hex off a screenshot is P3 too
if what you are after in the screenshot is the writing rather than the colour, that is a different job: copy text from a video or an image
the colour is the same trap one step along. a screenshot taken on a wide-gamut Mac carries the display's profile, not sRGB — «screencapture -x -t png», then «sips -g all», and the profile line comes back Display P3 on this machine. which number you read then depends on the app opening the file and whether it honours the tag.
and the command line will not read the colour for you: sips crops, pads, resamples and moves profiles around, but nothing in it returns a pixel's value.
the other half of the mismatch is in the design tool: Figma sets new files to sRGB, and switching one to P3 either keeps the values or keeps the appearance — the same distinction in other words: manage colour profiles in design files
how far apart the two numbers actually are
«several steps» is vague, so here is the arithmetic, run twice — through macOS's own ColorSync, and through the sRGB → XYZ → P3 matrices by hand. both agreed to the digit. Apple's own system colours, likely to be in the file already:
| the colour | sRGB, what the file says | P3, what the meter reads |
|---|---|---|
| system blue | #007AFF | #3478F6 — 52 steps of red |
| system green | #34C759 | #65C466 — 49 steps of red |
| system orange | #FF9500 | #F19A37 — 55 steps of blue |
| system red | #FF3B30 | #EB4E3D — 20 steps of red |
fifty steps in a channel is not a rounding error, and it is why numbers copied off the screen never quite land. it is worse the other way: a saturated P3 red, #FF0000 in that space, sits 22% past sRGB's red primary. converted, it clips to #FF0000 — the same hex as a red nowhere near as vivid. two different colours, one number, and no eyedropper can undo it.
so: Display in sRGB for css, a brand guide or anything on the web. Display in P3 inside an app that is wide-gamut and you know it is. native only when the question is what the screen is doing, which is calibration and not design. the EDR items read content above the standard range, which no hex can hold.
the short answer
one colour, once: open the meter, as Hexadecimal, Display in sRGB, ⇧⌘C. that is the whole job and nothing beats it. the simple case ends the moment there is more than one colour — the meter shows one reading and forgets it when the cursor moves, and the space is a setting you have to remember you set.
how hop picks a hex off the screen
press hop's shortcut and macOS's own loupe appears: click a pixel and the colour joins a list, already copied. pick eight colours off a page and all eight are still there, in order.
each pick goes into hop's clipboard history at the same time, alongside the text and files you copied around it: clipboard history
where that helps, and where it does not:
| what you are doing | Digital Color Meter | with hop |
|---|---|---|
| one colour, and it has to be exact | the honest winner — L*a*b*, Adobe RGB, BT.2020, aperture, 8x magnification. nothing in the App Store reads one pixel better | not needed, open the meter |
| eight colours off one page | one reading at a time, gone when the cursor moves | each pick joins the list and stays in the order you took it |
| the css wants hex, the ticket wants rgb, the plugin wants hsl | one notation at a time, changed in a menu | all three in their own columns, each a button |
| you took a colour an hour ago and lost it | gone | still in the clipboard history |
- the order never changes under the cursor, so the row you aim at is the row you get.
- the length of the list and how many rows show at once are settings, not a number chosen for you.
- no screen-recording permission is asked for: the loupe hands back one colour and nothing else. an eyedropper that wants to record your display is asking for far more than it needs.
and if the colour you want is one you copied earlier and cannot find again: find something you copied earlier
the loupe is Apple's, not ours: NSColorSampler hands back a single colour, or nothing if you cancel — no entitlement, no screen capture: NSColorSampler
when the hex is not what you expected
- you sampled text or a thin line and got a blend. antialiasing makes the edge pixels a mix of text and background — sample the middle of a thick stroke, or zoom first.
- the surface is semi-transparent. a colour over a blurred sidebar is composited on screen and exists nowhere in the design; the value you want sits underneath, where no eyedropper can see it.
- Night Shift or True Tone is on. both change what the panel emits, so the native reading moves with the time of day. sRGB readings are unaffected.
- you are sampling a jpeg. compression shifts colours near edges by a few steps; the flat middle of an area is the place to click.
- the screen is hdr, or you are sampling video. values above the standard range do not map to a hex at all, and what you get is a tone-mapped approximation.
an eyedropper that asks to record your screen is why a picker can feel heavier than it should, and that permission has a habit of coming back: the screen recording permission that keeps coming back
if you are weighing dedicated pickers against each other rather than against the meter: how hop compares as a ColorSlurp alternative
frequently asked questions
- how do i show hex in digital color meter?
- View → Display Values → as Hexadecimal, then ⇧⌘C to copy. it opens showing rgb in decimal, which is why so many people conclude it cannot do hex.
- why is the hex different from the one in Figma?
- the meter is reporting in your display's native colour space, and the file is in sRGB. the setting is not inside Display Values — that submenu only changes the format of the number. the colour space is its own row of items in the View menu, and the same list is a pop-up inside the window. choose Display in sRGB and the numbers line up.
- what is display native values edr?
- a reading that allows values above the standard range, for hdr content on a display that can show it. there is a linear variant next to it. neither is what you want when you are after a hex code for the web — those numbers have nowhere to land in six digits.
- does a screenshot have the same colour problem?
- yes, and it is easy to miss. on a wide-gamut Mac a screenshot is tagged with the display profile rather than sRGB — Display P3 on the machine this was checked on. so the file carries the same trap the live screen does, and which number you read depends on the app you open it in.
- can i pick a color from a video or another app's window?
- yes — an on-screen eyedropper reads pixels wherever they are, including video, another app, or a screen share. it reads what is displayed, not what the file contains.
- does a color picker need screen recording permission?
- it depends how it is built. one using the system loupe gets back a single colour and needs no permission at all; one that captures the screen to sample it needs full screen-recording access, which is a much larger thing to grant for a hex code.
- how do i keep several colors instead of one reading?
- Digital Color Meter shows one value at a time and forgets it when you move. a picker that keeps a list is the difference — with hop the picks stack up in order and each row's hex, rgb and hsl is a separate button.
the tool behind this
color pickerany pixel on screen, in hex, rgb and hsl at once.done with color picker
other things people do
about the author
Anton Shakirovmakes hop
makes hop and every page on this site. eighteen tools under a single menu bar icon, MIT licensed and open source. reads and answers issues and email himself.