Looking for a FREE Mac color picker app to help you with your blog design? Look no further than Digital Color Meter. It comes already installed on your Apple computer! This is how you use it.
Finding hex codes from images is an important part of creating:
- a beautiful blog,
- eye popping social images, and
- a consistent brand.
If you have an Apple computer (iMac, MacBook, MacBook Air, or MacBook Pro) you already own a free Mac color picker.
It's an app called Digital Color Meter.
What Does Digital Color Meter Do?
Digital Color Meter does a lot of things that I don't fully understand.
But I do use this app often for a few specific tasks for my blog.
Primarily I use this Digital Color Meter as a hex code generator - a tool to convert RGB to HEX colors from an image or web asset that I find online.
For example, let's say I come across a random website and I love the aesthetic.
I really want to incorporate one of the shades that I see into some of my own social media images.
To do a color grab, I simply fire up Digital Color Meter on my Mac and get the hex color using the eyedropper tool.
It's really easy - but there are few settings you need to configure so you can actually find the hex color code.
Before I dive in - if all this RGB and HEX code talk is like a foreign language to you - no worries.
Just know that when creating assets that will be viewed online (as opposed to actual printed materials) for your blog you will use a hex code to identify the colors.
You can see a really good discussion of it here on the Neglia Design Blog.
How to Open Digital Color Meter On A Mac
Digital Color Meter is located inside the Utilities folder inside your Applications Folder.
When Digital Color Meter opens your cursor will turn into an eyedropper type tool that allows you to do a color grab from any image or that is displayed on your monitor.
Just scroll around your desktop to see it in action.
How to Find the Hex Color from An Image
To find the hex color from an image in Digital Color Meter you will need to choose this option from the only dropdown box on the app:
"Display Native Values"
When you do this you will see 3 lines appear underneath the dropdown box:
- R: 0x??
- G: 0x??
- B: 0x??
To get the hex color simply take the last two digits from each line (these are the values that appear where I have placed the question marks) and string them together in order to form a six digit hex code.
It is probably easier for you to watch the process, so I created a really quick video that shows you how it's done.
Where to Use Hex Color Codes for Your Blog?
Now that you know how to find hex color codes you are probably wondering where you would use this information on your blog.
There are lots of places that you would use this - even if you don't get into the coding part of blogging.
For example, my WordPress theme - Monochrome Pro (you can read more about my favorite features of this theme here)- gives you the option to customize your
- link color,
- accent color, and
- footer color.
All you need to do is pop in the hex color code in your customization options.
Just a note - sometimes you need to type a "#" (number sign) before the six digit hex color code.
When you create social images you will want to use consistent colors throughout the image if not for your entire brand.
So, just grab the hex code you like and pop it in on those platforms.
Digital Color Meter makes it really easy.
But here's the thing - it might actually be TOO easy. Trust me, you will start jotting down hex codes for colors that you like on little sticky notes everywhere.
Don't worry - here's the method that I use to keep track of all my blog colors and stay organized. You can give it a try too!
If you use an Apple Computer you have a Mac color picker built right in.
- Find Digital Color Meter in the Utilities folder inside your Applications folder.
- Set the dropdown menu to "Display Native Values"
- String together the last two digits that you see in each line (in order) to create a six digit hex code.
- Use this method to keep track of your brand colors.