Chalkbox color Q&A swatch pattern

A Color Q & A for the layperson

We get a lot of questions about color, so we thought it would be helpful to lay out the basic need-to-know terminology (the lingo) you might bump into when talking color with a designer. We could leave these undefined and enjoy that fleeting, hollow sense of superiority. But that would be lame.

A few ground rules we’ve set for ourselves here:

  1. Keep it simple and accessible.
  2. Skip the jargon.
  3. Insert humor where possible.

Now let’s get to your questions!

I heard Josh mention once that color is really hard. But you’re designers. Shouldn’t it be easy?

Josh: You got me. There are two things I find challenging with color. The first challenge is probably more obvious—color selection. Finding just the right colors that fit just the right audience, while staying far enough away from the competition, is not easy.

The second challenge, though, is more technical. Color is ‘built’ differently, depending on the application. Our job as designers is to prepare the right recipes for a color so it stays as true as possible across the most common applications. This also is not easy.

Chalkbox color Q&A swatches

Across the most common applications? Huh?

Josh: Dang. Jargon alert! Sorry.

If your brand color is green, you might apply that to your business card in the form of ink, on your website in the form of colored pixels, on your building sign in the form of paint, and on your staff uniforms in the form of colored thread. These are some of the possible ‘applications’ of a color.

In a perfect world, your green would look exactly the same in all of these different applications. Realistically, though, that is impossible; our job is to give you and your vendors the best color recipes to keep these different applications of your brand color as close to each other (as true) as possible.

color variations across media

So, they don’t all use the same recipe?

Josh: Unfortunately, not even close. Let’s focus on the two color models you might be most familiar with: RGB and CMYK.

CMYK ink rosettes detailCMYK color model
CMYK = Cyan/Magenta/Yellow/Black. It’s all about ink and paper.

CMYK is used for most printed color around the world. If you’ve looked at a poster way, way, way too close, you might have noticed all the little colored dots. These are layered dots of cyan, magenta, yellow, and black ink. (Your laser printer and digital printing presses use toner instead of ink, but with the same result. And what’s the difference between toner and ink? Let’s save that for another exciting post! Or not.)

Almost all printed photographs use these four colors to build a representation of the real world around us. If you’ve got a magnifying glass, hold it up to a newspaper or magazine and have a look.

The CMYK mix for our green is 80 cyan, 17 magenta, 76 yellow, and 51 black.

Is this like the three primary colors from elementary school?

It’s just like mixing those red, yellow, and blue primary colors you learned about in elementary school. Except some smart folks figured out that photographic reality is better represented in print using cyan, magenta, and yellow. And because those three don’t actually produce a real or satisfying black when they all overlap, those smart folks added black ink to do that job.

Curious about this CMYK Subtractive Color Model? Enjoy!

RGB pixelsRGB color model
RGB = Red/Green/Blue. It’s all about screens and light.

RGB is for digital screens, projection, or other applications of color using light. If you’ve ever sat way, way, way too close to the TV or a computer monitor, you may have noticed that each point (or pixel) is actually made up of three little bars of color. Those are red, green, and blue. When one or more of those three bars (R, G, or B) is dimmed or shut off, it changes the color of that pixel. If the pixel appears blank or white (like on this web page), it means all three colors are at full strength.

When we provide a ‘recipe’ for color in RGB, we’re specifying how much R, G, and B to put in the mix to match the desired end color as closely as possible.

The RGB mix for our green is 40 red, 114 green, and 79 blue.

Want to know more about the RGB Additive Color Model? Enjoy!

OK, but I heard someone talk about ‘hex color.’ What is THAT?

Josh: You probably don’t need (or want) to know this, but when your web designer says ‘hex color,’ or ‘hex code,' (short for ‘hexadecimal’) it’s a coding-friendly way to specify an RGB ingredient mix using a six-digit code called a hex triplet. Full strength of any of the three is represented by an ‘FF,’ and complete absence of one of the three is represented by ‘00.’ The hexadecimal code for white would be ‘FFFFFF.’ For black, the hex code would be ‘000000.’ Colors in between are less tidy. For example, the green from earlier is represented by '28724F.' It’s math, and math is sometimes hard. If you really must know more, eat your heart out here.

How do you figure out the recipes?

Great question. What used to require a bunch of trial and error is now a bit easier. Our industry has a color standard we use as a starting point. That standard is the Pantone Matching System, which is what a designer or vendor means when they talk about ‘Pantone’ or ‘PMS color.' Whether you need printing, digital signage, or embroidery, just about every vendor you talk to out in the world will be familiar with this standard. If they aren’t, be wary.

If you’ve ever bought house paint, you probably already know how the Pantone Matching System works. In a drawer at my desk, I have a book of all the Pantone color swatches. This looks almost exactly like the display of paint swatches at the hardware store. When I find the color I want, I can write down its code. For example, the PMS code for our green is 555. When we use the color ‘PMS 555’ on your business card artwork, your print vendor goes into their special ink-mixing area to combine Pantone’s ingredients for that color. That gets mixed in a bucket (like your house paint), and then loaded into the printing press.

Later, when you look at that color on that business card, you won’t see any cyan or magenta dots; there aren’t any. It’s just the pure, solid, purple ink.

paint swatches detail

RGB and CMYK rely on your eyes (or the limitations of your eyes) to blend those little dots of ink and pixel bits. Pantone premixes those components. And the best part? Pantone has even more smart folks figuring out RGB and CMYK recipes that will be nearly exact matches.

Here’s what it all looks like in practice. Occasionally, we’ll modify one of the Pantone-recommended CMYK or RGB mixes, but that would usually be for a special application where the Pantone-accurate match looks different than intended.

Pantone Matching System is what we use as our color standard. Nearly every designer does—or should—use the same standard.

Thanks for reading! If you have any questions about design, whether about color or about how to get started on a project, we'd love to help you figure out what's next. Please reach out anytime.