What’s That Color?
In “Design Jargon Translated – Color” I explain the different ways brand colors are described in design: RGB, CMYK, hex#, and Pantone. These are color specifications and codes that you need to know whether you’re DIY-ing your own branding materials or working with a designer.
Today, I’m going to show you how to quickly figure out color codes for yourself when you find a color out on the web that you’d like to replicate. This is also helpful if you don’t know your brand colors, but have a logo or header you can sample to get those colors.
Mac
You’ll be using an app called Digital Color Meter. This app lets you sample colors that are on your computer screen.
Step 1) Find Digital Color Meter
Go to your Applications folder, then Utilities folder. Digital Color Meter will be in your Utilites folder. Double click to open the app.
Step 2) Get the color you want to sample up on your screen
I’ve got Kuler.adobe.com up in my browser and I’m going to sample one of the colors in their palette.
Step 3) Sample the color
With Digital Color Meter active, drag your cursor across the image. Digital Color Meter will show you the RGB values of the color your mouse is over. You just need to write down those values and you’re good to go.
In this screenshot you can see the RGB values of the color my cursor is hovering over: R = 4, G = 99, B = 128
– – – – – – – – – –
PC
You’ll be using an app called Instant Eyedropper. This app lets you sample colors that are on your computer screen.
Step 1) Download and launch Instant Eyedropper
Go here to download the app and install. You can then add the icon for Instant Eyedropper to your task bar for easy access.
Step 2) Get the color you want to sample up on your screen
I’ve got Kuler.adobe.com up in my browser and I’m going to sample one of the colors in their palette.
Step 3) Sample the color
Click on the Instant Eyedropper icon in your task bar, hold down with your mouse and drag the crosshair icon up to the color you want to sample. With Instant Eyedropper you can specify RGB values or hex# to be displayed. When you’re over the color you want to sample, release your mouse. The color values are now copied to your clip board. You can open up a Word doc and “paste” the code into it.
In this screenshot you can see the hex# value of the color my cursor is hovering over: hex#CCA18B
– – – – – – – – – –
TIP: If you want to translate RGB, CMYK, and hex# codes go here.
Great tip, Christie! I will bookmark this ‘how-to’ for use in the future.
Thanks Sheila!
Thanks for this Christie. I’ve bookmarked this as I just know I’m going to need it in the future. Great tips. Sarah
Thanks Sarah!
Definitely bookmarking this one. I love have access to this information. Thanks for blogging about it!
You’re welcome Blissom!
Love how simple to understand this is, Christie! I’ll admit that my branding is a work in progress, but this is a great tip to ensure the colors I choose for the buttons on Facebook are in alignment with what I’ve chosen everywhere else!
Our branding is always a work in progress Sabrina!
This is neat! I didn’t know about this little trick of using the Digital Color Meter on my Mac. You just blew my design-mind, Christie!
Yay! Always great to give tips that help out folks who are already tech savy!
I love how simple you’ve made it for non-graphic designers:) This is a must-save for any entrepreneur working on their own websites.
Thanks Claire. I like to break it down for everyone!
Awesome tips!!
Thanks Amber!
I just love that eyedropper tool! I have always used illustrator and drug my colors into the program to figure out the codes. Thank you for sharing this! What a time saver.
Thanks Cathy!
Thank you for the tips! I bookmarked this page too.
Thanks Sabra!
It is so helpful to have a tool like this! I’ve used colorcop when I need to figure out what the exact color is for design. Amazing how many variations of color there are. Who would have thought. Thanks for introducing me to another app!
Thanks for mentioning Color Cop Pam. Always on the lookout for new ways to do things!
Christie, this is an awesome tip! I have always felt so incompetent at the visual elements of my business and branding, but now I have a neat new trick to try out, so I am not always waiting for someone else to do the techy stuff! Thanks so much!
Nice!
I use Color Picker for the very same thing… but excited to try these!
Ok!! That is a cool tip. The whole color thing around web design seemed so complicated. I will have to bookmark this to give it a try. Thanks, Christie.
Love this post – you rock Christie!
xo, Tina Pruitt
How cool! I have used similar programs to try to find colors in my own pictures to analyze skin, hair and eye color and match them up with color seasons.
When I finally discovered how to do this it changed my world as an entrepreneur – I love being self-sufficient. My friend told me about an app Firefox has called “colorzilla 2.8.” Just click on the firefox tab at the top upper left and then click on apps. I had been using colorcop but you have to download that one and there’s so many viruses nowadays I try to stay away from downloading stuff. ♥
Wow — this could come in handy in so many ways! I didn’t think I’d be capable of color sampling until your step-by-step directions! I’ll use this for brand stuff, definitely — and also for the remodeling I’m about to do on our house! 🙂
Do you have any idea how much I love you right now??!?! Instant eyedropper is like the awesomest thing ever.
You made my day Amanda! Glad to provide a tip that helped YOU!