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 Comments

  1. Sheila on at

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



  2. Sarah Steele on at

    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. Definitely bookmarking this one. I love have access to this information. Thanks for blogging about it!



    • christie on at

      You’re welcome Blissom!



  4. 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 on at

      Our branding is always a work in progress Sabrina!



  5. Bianca on at

    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 on at

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



  6. 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 on at

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



  7. Amber on at

    Awesome tips!!



  8. Cathy on at

    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 on at

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



  10. Pam Pearson on at

    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 on at

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



  12. 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 on at

    Nice!

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



  14. 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 on at

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



  16. Jeanine on at

    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 on at

    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 on at

    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 on at

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



    • christie on at

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