If you are a web developer, graphic designer, or digital artist, you frequently need to identify exact colours you see on your screen to match them in your own projects. While you could take a screenshot and open it in a bulky application like Photoshop to use the eyedropper tool, macOS includes a tiny, built-in utility designed specifically for this purpose: the Digital Colour Meter.
This lightweight tool allows you to hover your mouse over any pixel on your screen and instantly copy its exact colour code (in RGB, HEX, or percentage formats) directly to your clipboard.
How to Open the Digital Colour Meter
Because it is a developer utility, the Digital Colour Meter is hidden inside the Utilities folder, rather than your main Applications folder.
- Press Command + Space to open Spotlight Search.
- Type Digital Colour Meter and press Enter to launch the app.
Alternatively, you can open Finder, navigate to Applications, then open the Utilities folder, and double-click the app.
How to Sample a Colour
When the application opens, you will see a small floating window containing a zoomed-in, pixelated view of wherever your mouse cursor currently is on the screen.
- Move your mouse around the screen until the centre square in the Digital Colour Meter window is resting on the exact colour you want to copy.
- To prevent the mouse from accidentally moving while you try to read the numbers, you can lock the position. Press Command + L (or click View > Lock Position in the menu bar). The sampled colour will freeze, allowing you to move your mouse away.
- Press Command + L again to unlock it when you are finished.
How to Copy the Colour Values
The numbers displayed in the window represent the Red, Green, and Blue values of the colour. You can copy these values as text so you can paste them directly into your CSS code or design software.
- To copy the values as a standard text string (e.g.,
255 128 0), press Shift + Command + C.
Changing the Colour Format
Depending on what you are working on, you may need the colour values formatted differently.
- Click View in the top menu bar.
- Hover over Display Values.
From here, you can choose how the numbers are presented:
- As Decimal: Standard RGB format from 0 to 255 (best for photo editing).
- As Hexadecimal: Formats the colour as a HEX code, such as
#FF8000(best for web development and CSS). - As Percentage: Displays the RGB values as percentages from 0% to 100%.
Once you change the display value to Hexadecimal, pressing Shift + Command + C will now copy the HEX code to your clipboard instead of the raw numbers.
Adjusting the Aperture Size
If you are trying to sample a colour from an image that has a lot of noise or a slight gradient, picking a single pixel might result in an inaccurate, overly dark, or overly light colour.
You can tell the Digital Colour Meter to sample an average of several pixels at once. At the bottom of the tool’s window, drag the Aperture size slider to the right. The sampling box in the centre will grow larger, and the tool will calculate the mathematical average colour of all the pixels inside that larger box.
By utilising the Digital Colour Meter, you can capture exact brand colours, website backgrounds, or UI elements in seconds without needing to launch heavy graphic design software.