I’m dabbling in graphic design on my new iMac and am trying to figure out the easiest way to identify and match colors from other images. For example, if I wanted to match the color of a company logo, how can I figure out the RGB hexadecimal value of a specific pixel on screen?
There are many situations where it’s helpful to be able to exactly identify a color that you see on your computer screen. The most obvious is if you’re a designer, but perhaps you just want to find and match a color for paint so you can have a wall in your office that’s exactly the same as the accent wall from a favorite TV show or advertising campaign. More commonly, though, you’ll be wanting to match colors so individual graphical elements can blend seamlessly into background images, offering elements like rounded corners with drop shadows, etc.
There are a variety of ways to match a color on your screen but before we go further, I should warn you that unless you have a calibrated screen it’s possible what you see might not be quite what the computer itself sees. To understand why, imagine you have red glasses on. Everything you see will appear red, but the image actually being displayed has the full color gamut: Do you want the color from image you see or the image that is shown? Less dramatically but with a similar effect, things like Night Shift and True Tone on your Mac can affect what’s displayed too, shifting the entire gamut warmer or cooler.
With that said, most graphics editors have the ability to identify a color and show values. Let’s check out one of my favorite graphics apps for your Mac, GraphicConverter, for this ability, Then I’ll show you how to use the excellent MacOS 11 utility “Digital Color Meter” to accomplish the same thing on any Mac.
IDENTIFY COLOR ON SCREEN WITH GRAPHICCONVERTER
I’ve written about GraphicConverter before, it’s a fantastic graphics editor for the Mac system that’s been around forever. Its developer just keeps adding more and more features and it’s almost as powerful as Adobe Photoshop, but at a small fraction of the price. I use it every day, and used it to edit, crop, and tweak every image and screen capture in this article! Yes, I’m a fan. [check it out at lemkesoft.de if you’re curious]
Here’s the image I’ll use for demonstration purposes, a crop of some beautiful high desert rocks:
The goal is to identify the darker red of the formation and then glean the hexadecimal value for that specific color in RGB format, suitable for using in HTML or CSS code. I open up the image in GraphicConverter and then choose “eyedropper” from the toolbar:
Note: The toolbar is way taller with tons more options: I chopped it at the yellow line for space purposes.
With the eyedropper selected, it’s a simple matter of moving it to the exact point on the image where the desired color appears, then clicking. Now it’s loaded into the foreground color box (as shown above, actually, looking distinctly more brown than red). Click on the color box and the Color Picker window appears:
As you can see, GraphicConverter offers quite a few color choosing options, with the color wheel being the common default. Instead choose the slider (the second option), which is what’s shown above. So that’s grayscale, a relative measure of the luminosity of the selected color (shown on the lower left) but what about the RGB? Easy, click on “Grayscale Slider” and other options appear:
Since you seek RGB (red, green, blue) as your color base, choose “RGB Sliders“. Note also that if you were working with print, you could use CMYK or even HSB as your color. For RGB Sliders we now see this information:
Matched! The color has an RGB value of 110,37,20, which translates into the Hex or hexadecimal color of 6E2514. You can then use that directly in your Web page or graphic design work (handy tip: keep a notebook with colors jotted down so you can match them later too).
But let’s be candid, that’s a lot of steps. So what about this MacOS Digital Color Meter?
IDENTIFY COLORS WITH MAC DIGITAL COLOR METER
The faster, easier way to identify colors that show up on your screen anywhere at all – even in MacOS 11 itself – is by using the handy little Digital Color Meter utility. You can find it in the Applications > Utilities folder, or just use Spotlight to search for “digital color”. Once launched it’s pretty darn intuitive, with a tiny window that tracks whatever you have the cursor over on your screen. In under a second I can identify that same color:
Got our RGB, and this time it shows a closeup of a tiny portion of the screen, allowing me to fine tune and select exactly the pixel I want to match. This one’s 126,51,32, as shown. But how to get the hex value? That’s off the View menu:
Easy enough, change the display values from Decimal to Hexadecimal. Then find your color spot again and it’ll display exactly what you seek:
This time I included the cursor on the lower right so you can see just how far the utility zooms in to let you identify a specific pixel. The hex values are shown in a common notational format that utilizes a “0x” prefix, but if you don’t need that, just focus on the subsequent values, giving us a full RGB hex value of 883A21. Looks pretty similar to the previous color identified in GraphicConverter, but remember, that was 6E2514, so was a bit darker (lower numbers = darker).
Either way, you now have a couple of different tools that let you identify the hexadecimal RGB value for any pixel you can display on your computer screen so you can use that color in other contexts. And yes, you can walk into a paint store with an RGB value and they can exactly match it with their color blending equipment.
Note: Using a Windows PC? There’s a very similar color picker utility in Power Toys from Microsoft. Check it out!
Pro Tip: I’ve been writing about how to get stuff done on the Mac platform for many years. While you’re visiting, please do check out my extensive Mac help area for tons more useful tutorials! Thanks.