How to Find Your Custom Color Codes with a Style Guide (and Decode the Jargon)

Aug 15th, 2017 / Data Visualization / , , , , ,

“Ann, which colors should I use in my graphs?” You should start with your organization’s existing color palette.

Consultants, I suggest using your client’s palette, not your own. Show that you’ve gone the extra mile in customizing your work especially for them. This is one of the primary reasons that I’ve been running my own company for three years and am just now thinking about the branding and logo process—I simply haven’t needed to because my work has been produced for a specific client with their unique color palette. Also, there’s nothing gaudier in the consulting world than plastering your firm’s logo on every single page you’ve made. Focus on doing good work, and clients will hunt you down.

“Ann, I’m on board with using our palette. But when I’m designing graphs in my software program, I can’t seem to pick out colors that are a close enough match to our logo. How can I eyeball the colors better?” No eyeballing! You need to find your color codes from an existing style guide.

 

Locate Your Existing Style Guide

Most organizations already have a style guide (a.k.a. design guide or graphic standards guide). Your guide might talk about your logo, colors, or fonts. Your guide might even contain writing guidance, like whether you’re going to call it decisionmaking or decision-making or decisionmaking and that you should spell out numbers zero through nine and use numerals for number 10 and up.

I’m going to show off USAID’s Graphic Standards Manual as an example today. It’s publicly-available, but more importantly, it’s the most comprehensive guide I’ve seen and is worthy of showcasing here. In 94 pages, the guide covers everything—the logo’s history, its proper placement on a page, instructions for selecting images, fonts, colors, and much more. USAID has staff and consultants located all over the world, so this detailed manual helps all those people stay on the same page. I’m not saying you need a 94-page style guide. Most of you can cover everything you need in about five pages.

A screenshot from USAID's Graphic Standards Manual.

Are You Sure I Have a Style Guide?

Smaller organizations—food banks, afterschool programs, etc.—simply don’t have the budget to hire a graphic designer to produce a style guide. They usually have a logo, though. My next post will teach you how to find color codes from your logo using an eyedropper tool.

Larger organizations almost always have a style guide. You just might not know where to find it. Ask your teammates who work in communications. Their title might be something like Communications Specialist rather than Graphic Designer. Part of their job involves making sure that your externally-facing materials have consistent formatting so that you look professional.

Your communications person usually knows exactly where to find your style guide. It’s probably hiding within your company’s intranet, perhaps beneath a few layers of folders or behind a password-protected wall. These aren’t private documents exactly—anyone can tell what your logo, colors and fonts are just by looking at your website—so I’m finding that more style guides are available through a quick internet search.

Consultants, just email your client and ask for a copy of their style guide. I usually write, “Hi Client, could you please send me your style guide? I want to make sure all the products we’re making reflect your brand’s colors and fonts. Your style guide is probably 5 to 10 pages long, and it probably lives on your intranet. Your in-house communications team might also have a copy.” Half of my clients can find their style guide right away, and the other half need to ask their communications person (who can find the guide right away).

Find the Color Section of Your Style Guide

Page 28 is the important one:

A screenshot from USAID's Graphic Standards Manual.

Decode the Jargon in Your Style Guide

You’ve got your style guide. Now what?

  • Style guides usually include both primary colors and secondary colors. You’ll recognize your primary colors right away. These are usually the two or three core colors from your logo. You might recognize your secondary colors from your website, newsletter, and other documents. These are colors that complement your logo. A professional graphic designer worked their magic and chose a blend of primary and secondary colors that match, i.e., the right blend of pastels, bright colors, or muted colors.
  • Color definitions are the in-house name for your color. For example, they call their blue USAID blue. I see a few dozen style guides each year and only a fraction include color definitions.
  • SPOT colors, aka Pantone colors tend to be used by your internal graphic design staff or your external graphic design consultants. They’re also used in manufacturing, e.g., to make sure the physical objects you’re building in your warehouse match the physical objects being built in another warehouse. You hold up your Pantone color swatches and make sure your plastic, metal, or fabric item matches the correct swatch. From my experience, Pantone colors aren’t very common in style guides either, so don’t panic if you don’t see Pantone colors listed in yours. Just recently, I noticed that the U.S. Centers for Disease Control’s style guide only listed Pantone colors—no CMYK, hex codes, or RGB codes—and it was so surprising that I feel compelled to share that rarity here.
  • CMYK colors stand for cyan, magenta, yellow, and black. This is your photocopier machine’s language. CMYK colors tell your printer which shades of ink to print on your papers.
  • Hexadecimal web colors, or hex codes, are for your website. Hex codes begin with a number sign or hashtag, and they include six letters or numbers. These are the codes that your website people type into their HTML code to make sure your logo colors are reflected exactly right in your website. You might also find them in web-based data visualization programs. For example, colorbrewer2.org gives you the hex codes, CMYK codes, and RGB codes for each of their color palettes, but the hex codes are listed first. Google Drive products also ask for hex codes.
  • RGB colors stand for red, green, and blue. This is Excel’s main color language.

Don’t have a style guide? Can’t find it? In the next post, I’ll teach you to find color codes with an eyedropper tool.

Readers, is your company’s style guide publicly available? If so, link to your guide here. They all look a little different, and the more varieties you see, the easier it is to decode your own.

 

Related Courses

Data visualization best practices, practical how-tos, tutorials in multiple software platforms, and guest experts. Designed with busy number-crunchers in mind.
$599

Enroll Now

SPONSORED

#f-post-el-35{display:none !important}

#f-post-el-35{display:none !important}
#f-post-el-35{display:none !important}

Enroll Now