If you are a web developer, a graphic designer, or a video editor, you frequently encounter situations where you need to identify the exact color of an element on your screen. Perhaps a client has provided a logo, or you see a beautiful shade of blue on a website, and you need the precise hexadecimal (Hex) code to use in your CSS file. The traditional, cumbersome method involves taking a screenshot of the entire display, opening Adobe Photoshop, importing the image, and using the eyedropper tool. Fortunately, every modern Mac comes with a hidden, built-in utility designed specifically to bypass that entire process.
How to Open the Digital Color Meter
Apple includes a tiny, dedicated app called the Digital Color Meter in the Utilities folder of macOS.
- Press Command (⌘) + Spacebar on your keyboard to open Spotlight Search.
- Type Digital Color Meter and press Enter to launch the application.
A small, floating window will appear on your screen, featuring a highly magnified grid. As you move your mouse anywhere on your screen—over a web browser, a video player, or a document—the grid acts as a magnifying glass, showing you the exact pixel your cursor is resting on, alongside the live RGB values of that specific color.
How to Copy the Color Code
By default, the app might display the color as RGB percentages or 8-bit values. To get a standard web developer Hex code, you must change the format and copy it to your clipboard.
- With the Digital Color Meter active, look at the very top menu bar of your Mac.
- Click on View, hover over Display Values, and select as Hexadecimal.
- Now, carefully move your mouse cursor over the exact color you want to steal.
- Without clicking the mouse, press the keyboard shortcut: Shift + Command (⌘) + C.
You can now open your code editor or design software and press Command + V to paste. The exact, perfect Hex code (e.g., #1A73E8) will instantly appear, completely eliminating the need for screenshots and heavy editing software.