One of the trickiest things in both graphic design and web design is matching colors. We’ve grown up with color all around us all our lives, so one would think that color would be an easy thing to do – but it’s not. Here’s the skinny…

Print Design Color Issues

The print industry has been using the CMYK method of printing for over a hundred years – it’s commonly referred to as “four-color” printing as they use four ink colors in various intensities and combinations to create a full-color graphic. The four ink colors are Cyan, Magenta, Yellow, and blacK (CMYK); the print shop will use a printing press with four units, one for each color ink, to produce four-color work, laying each ink color on the paper in succession, building the image. It’s really cool to watch!

To confuse the issue a bit more, there is something called “spot color.” Sometimes a company has a logo or graphic that has just one or two colors that will be used consistently and extensively. If that’s the case, the designer who created the logo most likely used spot colors in the design, choosing a Pantone Matching System (PMS) color swatch. PMS colors are a very specific code that gives the pressman very detailed instructions on how to custom mix an ink that is the precise shade the designer wanted. Many print shops will use spot colors on pieces that have just two or three colors (such as business cards or letterhead) rather than using a full four-color press. Some jobs are big enough that larger print shop may utilize presses with five, six, or more units – four for the full-color CMYK and other units to lay the premixed spot color on the paper. (This may be used in an in-house print shop for large corporations. I’m willing to bet Coca-Cola had their own print shop, and they probably pre-mix their trademark red color as a spot color.)

Okay, we now have CMYK, and PMS spot colors. Now we’ll get to black. Quite often a nice deep black on a printed piece wasn’t just black ink, but is rather “rich black.” Plain black ink can be made even darker if you add in some cyan, magenta, and yellow inks – each adds density to the black. (If you mix a little black with yellow, you get a darker yellow. If you mix a little yellow with black, you get a darker black.) So I’ll often build a rich black color using 35% cyan, 20% magenta, 15% yellow, and 100% black, and will use that color swatch to make nice deep blacks in my designs.

Are you bored yet? I hope not, this stuff is interesting to me…

I use gradients quite often in my designs because, well, I like ’em. A color gradient is when you have one color merge into another color – like when you have a box (for example) that goes from red at the top to black at the bottom. Black is again more problematic than one would think when you do gradients. Due to the way print shops use CMYK, every graphic, every color is made up of tiny little dots of color (remember how comic books had dots large enough you could see?), and each of the colors has their dots running at a different angle (a “line screen”), a gradient can sometimes have banding – strips in the smooth transition from one color to another that look awkward. In order to avoid this, I’ll often mix black with whatever color I’m blending into the gradient. If I have a box that’s red at the top and black on the bottom, I’ll create a swatch that’s 100% spot red amd 100% black, convert it to CMYK, and use THAT as the black in the gradient.

It sometimes gets complicated. Some of my designs I’ll have three or four different swatches of black. Imagine how excited I get when we use, say, blue. My little brain boggles. And I also need to know what kind of paper a job will print on – there’s a completly different set of colors from coated (glossy) paper than there is for uncoated!

Thankfully for my wondrous customers I take care of all this gobblty-gook behind the scenes, and I only work with print shops who are consumate pros at this sort of thing.

But here’s what my customers DO need to know: what you see on your computer screen when you proof a job may be drastically different than what I see on mine, which may vary just a little bit from the final product that ships from the print shop. The pressmen at the print shops I use contantly calibrate their equipment to ensure very precise colors. I have a special tool and professional software to color-calibrate my computer monitors and take half an hour or forty-five minutes each week to make sure all my monitors are accurate. But chances are that when I send a proof to my customer, they’re looking at it on an uncalibrated monitor, which may vary greatly from mine. And to make matters worse, computer monitors do not use CMYK – they convert it to RGB (more on that in just a moment).

Web Design Color Issues

Thankfully there aren’t as many issues with web colors as there are with print.  Computer monitors don’t see colors in CMYK, but rather in RGB (Red Green Blue). Light mixes together differently than ink mixes together, so using those three colors a computer monitor can mix them together into millions of shades and hues.

Neato!

So instead of thinking of CMYK, spot color, rich black, and using PMS colors, the web uses a “hex” color scheme. To be honest, I don’t have the foggiest clue how they came up with the protocol, but every color has its own six-character code. Black is #000000. White is #FFFFFF. What’s good is that the software I use can translate CMYK to RGB to PMS to hex with unnerving ease and precision.

The main problem I run into with web colors is, again, unless you have the proper equipment and software, your monitor probably isn’t color-calibrated – so what I see on my screen when I design your website may look a bit different on your screen. And different yet from your tablet or phone!

So, while the technology behind web design makes the handling of color much easier for the designer, every single person who views the website will get a slightly different experience based on their screen. In contrast, color is much more difficult in the print world for the designer, but everyone who sees the brochure (or whatever) will see exactly the same thing…

This kinda stuff keeps me up at night.

So if you’ve ever had any questions on why your website looks different on your work computer and your personal computer, this is part of it! (Another big part of the difference is fonts, which I’ve written about before.)