Too often we see companies whose colors on their website aren’t quite the same as their business cards, their brochures don’t match their trade show booth and so on. Generally this is the result of the marketer or designer not understanding the proper use of color across different mediums and not having clearly defined brand color compositions for each process.
At Northview, we believe the key to successful branding is consistency. Because of this we believe every company should have a brand identity guide that defines the proper use of their logo, official fonts and official colors. With color it’s not as simple as saying our colors are blue and red. Knowing your company’s Pantone colors is a great start, but not enough, since that is only used on a very specific printing process.
In this post we’ll help you understand CMYK, 4 color process, RGB, Hexidecimal, PMS, Pantone and Spot Color so you can better communicate with designers and printers in order to keep your colors as consistent as possible.
CMYK & 4 color process
In elementary school we all learned the basics of mixing primary colors by finger painting… red + yellow = orange… yellow + blue = green… and if you’re like my 2 year old you mixed them all together to make it a big brown / black mess.
That is essentially how 4 color printing process works. Only instead of starting with blue, red and yellow, you start with a particular shade of those colors: Cyan, Magenta, Yellow and Black. 4 color process uses the color space known as CMYK. (I guess they didn’t want to use B for black because people may confuse it as blue). The 4 colors are combined, one layer at a time in multiple runs, to create the desired colors. Colors are defined by the % of each color used. For example, a specific teal color would be represented as C=70 M=6 Y=31 K=5.
Just like with finger painting, if you mix them all together you’re putting more ink on the page and it ultimately gets black. This is because the colors are “subtractive,” so as you add colors or ink it visually reduces color and leaves you with a muddy brown or black color when mixed all together.
Believe it or not, using C=0 M=0 Y=0 K=100 is not the best black you can get. For a nice, rich black, you should instead use what is called a True Black using a mix of C=75 M=68 Y=67 K=90. As you may be able to tell from the image below, the True Black is much richer.
After seeing this example you may jump to the conclusion that C=100 M=100 Y=100 K=100 would be an even better black. However, this is not the case because in most printing situations this would put far too much ink on the page.
4 color process is definitely the most popular printing method and you’ve likely seen these CMYK markings on the tabs of cereal boxes and other packaging around your house. These registration marks are used by printers to confirm their color mixes are properly set during printing. With 4 color process, a very subtle shift in color is considered acceptable because paper, temperature, ink levels, and printer adjustments effect the exact color that is printed. For items that need an exact solid color printed, a spot color is used. We’ll dive into that a little later in the post.
RGB & Hexadecimal
Displaying colors on computer monitors and TVs doesn’t work like it does with a CMYK 4 color process. If you mix all the colors together on a computer monitor, you get white instead of black. That is because the colors are “additive” and referred to as “RGB.” RGB uses Red, Green andBlue to create color. As you add colors, you’re adding more light from the monitor’s backlight source to create the different colors. Add all of them and you’ll ultimately end up with white.
Because they are completely different color spaces, you can often have undesired results when trying to print RGB design files using a CMYK process. In fact, because they are different color spaces there are even certain shades of colors that can’t even be achieved with CMYK.
While CMYK values for each color use a percentage between 0-100%, RGB uses a value between 0-255. With R=255 G=255 B=255 being a full white and R=0 G=0 B=0 being black.
RGB colors used in web design are often represented in hexadecimal values that a browser can read. These are either 3 or 6 digits values preceded by a hashtag. Hexidecimal colors (or Hex color codes) are made up of numbers 0-9 and then letters A-F. As a hexidecimal white would be #ffffff and black would be #000000.
Pantone is a corporation that created a proprietary Pantone Matching System (PMS) color space. It provides a color matching system to provide uniformity when discussing and producing color. Pantone colors are printed as spot colors which means the color is printed in a single run as opposed to being created by a mix during multiple runs like with CMYK process.
If a company is looking at printing just a couple of solid colors for, say, their logo on a sign, promotional USB drives, or on the cover of presentation folders, they will often just print the solid spot colors using only the official Pantone colors. Using a defined spot color as opposed to a “mixed” color creates a more exact color match.
CMYK, RGB & Pantone – bringing it all together…
An integrated marketing strategy means your brand will be carried out across multiple mediums and therefore represented in RGB, CMYK and Pantone. As a marketer, having a basic understanding of each color process is important to avoid costly mistakes. Because CMYK and RGB colors are created using completely different color spaces, shades of certain colors in RGB are simply not able to be reproduced in CMYK. This creates a problem when trying to convert RGB graphics into CMYK and vice versa. As represented in side by side comparison, you can see that some of the very brightest blues and greens that can be created on a website in RGB simply cannot be created with CMYK color process.
At Northview, we use the Pantone Color Bridge swatch guide, because it shows us the Pantone color on the left and the CMYK equivalent on the right. You’ll notice that the pictured Pantone blue looks very much like its CMYK equivalent. However, this very bright Pantone yellowish-orange looks very different printed in CMYK. This is something that as a marketer you need to be aware of so that there are no surprises when printing. Mistakes on the web can be simple to fix, but printing mistakes can be very expensive.
If you’re developing a new brand or campaign, it’s wise to choose colors that can easily be produced across all mediums and color spaces to ensure your brand is consistently represented, otherwise you may be disappointed when that super bright logo you made for your website doesn’t print quite like you wanted it to for your trade show booth.
Using Pantone & CMYK together
While Pantone colors are best suited for exact solid colors, a standard CMYK mix is the only way to achieve a wide range of colors that may be needed to print photos and other graphics that require 4 color process. Therefore to achieve more control, brands will use a combination of their primary brand Pantone color and CMYK. That’s exactly what we do with the catalogs we design. You can see both the standard CMYK registration marks (just like on the Cheez-it box) as well as this companies official green being pointed to by the pen. We use both their official PMS green and CMYK in the catalog design when we need to use their official green to achieve brand consistency but also need to print photos. this client prints over 100,000 catalogs a year so making sure we get those brand colors right is essential!
- Know your color mixes. Not just for Pantone, but for CMYK, RGB and Hexadecimal too.
- Have a brand identity document with these defined colors mixes and share it with any designers and printers you work with. Be the defender of your brand!
- If you’re creating a new brand or color palette, think ahead to where it will need to be used and choose colors that can be produced across all those mediums.
- Know what printing method you’re going to use before you design something. Any images (like photos) that are in RGB but that are going to be printed in CMYK should be converted to CMYK (and manually adjusted if needed) to ensure they print like you want them to. If you only preview the photos on your digital camera and monitor, you may be surprised by the results when you get your CMYK print back.
- If you aren’t sure …. Just ask 🙂