Lurking deep down in the depths of the Utilities folder are several great tools Apple has provided with Mac OS X that are perfect for a myriad of technical needs. One such tool, the DigitalColor Meter, rarely receives much affection, so this week I intend to shed some light on the subject.
The DigitalColor Meter is an application that comes installed with every Mac. Its primary use is to locate a color on your screen and provide the values of that color. Those colors can be provided as three different values such as RGB, Hexadecimal, and as a percentage. As a developer, I find it incredibly useful for finding the hexadecimal value of a color for use with HTML and CSS but it’s also great for mastering UI design, understanding gradients and shadows, and if you find yourself needing to know the location of your mouse on screen it even can provide the coordinates for the location at any time.
You can find the DigitalColor Meter located within the Utilities folder of the Applications folder on your hard drive. Once open, you’ll notice that the app is quite simple.
Move your mouse around the screen and the Aperture shows you the color you are currently hovering over. To the right of the Aperture, you can choose an RGB display value, view the color swatch that you’re hovering over — along with its RGB values — and the display that you are working with. The default Display native values are recommended, unless of course, you’re a seasoned designer with specific needs.
Most of your interaction with DigitalColor Meter will take place within the Menu bar or with Key Commands. Thankfull,y there are just a handful of commands to learn, which makes them easy to remember and the application simple to interact with.
First, we are going to look at the display value options. Located under View | Display Values of the Menu Bar, you will see a list consisting of three display value types; Decimal, Hexadecimal, and Percentage. Decimal is used to display RGB as red, green, and blue color ranges that range in intensity from 0 (being the lowest value) to 255 (being the highest value). These ranges are most commonly used with publishing applications like Photoshop. Hexadecimal displays the RGB spectrum in much the same way only using alpha numeric codes that range from 0-9 and A-F, 0 once again being the lowest and in this case F being the highest. These ranges are most often used to define the colors used in websites. Percentages, which are most often, used for print media, display the amount or percentage of each color being used to create the color that you see. This is the most human-readable.
Moving your mouse around the screen will display the colors within the aperture that you hover over, but what happens when you find a color and need to save that color for use? DigitalColor Meter provides a few ways to do this using some basic key commands.
The first and most obvious way is to lock the coordinates onto the color that you would like to capture and record the values manually. To do this, place your mouse over a color, and while holding the command key down press x (which will lock the mouse on the x axis) then while still holding down the command key press y (which in return will lock the mouse on the y axis). After locking down your mouse over the color that you wish to record, you will notice that the aperture no longer updates while moving the mouse around the screen. To unlock the mouse simply press command + y and command +x again.
The second way to record a color is to simply copy the color as an image or as a text value to the clipboard. To copy it as an image, place your mouse over the area of color that you would like to record, then press Option + Command + C. This will create a color swatch that can be pasted directly into most image editing applications. To copy it as text, place your mouse and press Shift + Command + C. This will record the values of the color for pasting into a text application. If you have any issues with the key commands keep in mind that these commands can also be accessed from the Menu bar as well.
The last feature of the DigitalColor Meter I’ll show you is the ability to track the location of the mouse.
To track your mouse, simply press Command + L which will bring up the location hub within the Aperture of the app. The display shows the location of the mouse in pixels on the x and y axis starting in the top left corner of your screen.
The DigitalColor Meter is great tool and can come in really handy when you least expect it. If you have any great uses for it, please share them with us in the comments below.