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

digitalcolormeterYou’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

DigitalColor-Meter

– – – – – – – – – –

PC

instanteyedropperimageYou’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

instanteyedropper

– – – – – – – – – –

TIP: If you want to translate RGB, CMYK, and hex# codes go here.

Here’s to consistent brand color usage for all!

29 Responses to What’s That Color?

  1. Sheila March 4, 2013 at 6:42 pm #

    Great tip, Christie! I will bookmark this ‘how-to’ for use in the future.

  2. Sarah Steele March 4, 2013 at 11:08 pm #

    Thanks for this Christie. I’ve bookmarked this as I just know I’m going to need it in the future. Great tips. Sarah

  3. Blissom Booblé March 5, 2013 at 3:40 pm #

    Definitely bookmarking this one. I love have access to this information. Thanks for blogging about it!

  4. Sabrina at MyMiBoSo March 5, 2013 at 6:55 pm #

    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!

    • christie March 6, 2013 at 9:43 am #

      Our branding is always a work in progress Sabrina!

  5. Bianca March 5, 2013 at 8:48 pm #

    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!

    • christie March 6, 2013 at 9:44 am #

      Yay! Always great to give tips that help out folks who are already tech savy!

  6. claire gillenson March 5, 2013 at 8:49 pm #

    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.

    • christie March 6, 2013 at 9:44 am #

      Thanks Claire. I like to break it down for everyone!

  7. Amber March 5, 2013 at 9:02 pm #

    Awesome tips!!

  8. Cathy March 5, 2013 at 10:40 pm #

    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.

  9. Sabra March 6, 2013 at 12:30 am #

    Thank you for the tips! I bookmarked this page too.

  10. Pam Pearson March 6, 2013 at 7:58 am #

    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!

  11. christie March 6, 2013 at 9:45 am #

    Thanks for mentioning Color Cop Pam. Always on the lookout for new ways to do things!

  12. Mindy Crary | Creati March 6, 2013 at 12:09 pm #

    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!

  13. illana March 6, 2013 at 1:51 pm #

    Nice!

    I use Color Picker for the very same thing… but excited to try these!

  14. Patti Capparelli March 6, 2013 at 9:06 pm #

    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.

  15. Tina | App Dev March 8, 2013 at 12:24 am #

    Love this post – you rock Christie!
    xo, Tina Pruitt

  16. Jeanine March 8, 2013 at 10:30 pm #

    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.

  17. Julie Geigle March 9, 2013 at 11:47 am #

    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. ♥

  18. Jessica March 12, 2013 at 11:25 am #

    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! 🙂

  19. Amanda Krill March 15, 2013 at 7:04 pm #

    Do you have any idea how much I love you right now??!?! Instant eyedropper is like the awesomest thing ever.

    • christie March 18, 2013 at 1:01 pm #

      You made my day Amanda! Glad to provide a tip that helped YOU!

Leave a Reply

Pin It on Pinterest

Share This

Share This

Share this post with your friends!