Let’s Talk Colour – Designing for Online and Offline Mediums (Part 2)

Colour swatches on desk and person designing on tablet.

In last week’s blog, we explained the differences between offline, print-oriented colour frameworks (PMS and CMYK) and online, screen colour frameworks (RGB and HEX). We also covered when to use each of them.  

But what if you are designing for both online AND offline? Colour needs to appear the same to the naked eye on both mediums. Have you ever noticed how corporate colours on outdoor signage or fleet vehicles can look completely different on a website viewed on a phone or laptop?  This is not uncommon, and you are not losing your mind. The way colour is represented in different mediums wreaks havoc on achieving consistency in your online and offline collateral. 

Managing this consistency across multiple mediums can be a pain, but because we are aware of the differences, it’s possible for a designer to create outputs that work for both online and offline simultaneously.  

Wingman’s client SUM Ltd came to us last Fall with what seemed like a straightforward request. Although they had consistent branding both online and offline, somewhere along the line they misplaced the raw artwork and branding guidelines for their logo. Wingman was asked to re-create their logo and construct a brand book for its usage. We needed to print shirts and other collateral, as well as redesign their website. So, all the four colour framework equivalents were needed.  

In swift form, we were able to isolate the additive frameworks for online display determining the correct RGB and HEX values (RED: #b62939|R182 G41 B57 and GREY: #4c4c4e|R76 G76 B78). To determine the CMYK, we utilized an online conversion tool. Fortunately, there were only two key colours as the print-ready CMYK was bang-on (RED: C20 M96 Y79 K10 and GREY: C66 M59 Y56 K37).  

The Pantone equivalent value posed a more difficult solution. The conversion tool was accurate for the red and got us close to finalizing the PMS colour equivalency. Pantones that were similar made up several options for SUM Ltd’s red: 

Eyeballing the above, the Wingman crew narrowed the colour down to 200C, 1805C or 7621C. The chosen PMS colour ended up being 200C.  

The grey required a much keener eye, as there was a wider spectrum of options. The SUM Ltd grey equivalency conversion returned us with blends of green, blue and purple. Pantones close to our RGB, CMYK, and HEX equivalents produced the below palette: 

As our trained eyes could clearly ascertain, SUM Ltd’s grey was grey so we narrowed the selection to 446C or 7540C. We were wrong. According to the client, the Pantone closest to their 30+ years of branding was PMS colour 447C.  

So what did we learn? 

Consistency of colour management is important but not always easy.  

This project re-enforced the importance of process, documentation, and strong adherence of your brand elements. We recommend you have a Brand Book created that outlines colours, fonts, clear space, and logo usage to ensure consistency across all areas of your business.  Keeping a brand colour consistent doesn’t end with the designer but continues with the client. 

Colour conversion tools exist and are a great start. 

Thankfully, there are many online conversion tools you can use as a starting point. However, we caution you to use your eyes and conduct a physical test before approving the print of any offline collateral. Relying on these tools alone will be insufficient as it takes a detailed eye, colour matching, and lots of testing to reach consistency consistently. 

Get a second opinion. 

As many as 1 in 12 men are colour blind. 1 in 200 women are colour blind. Many don’t even know it. Have more than one person review the colours in its end state (prepare several copies of print or view digital images on multiple screens).  

Understand the differences between colour for on-screen vs print. 

Designing colour for screens uses RGB or HEX, which is an additive framework. The more of each colour is shone on the screen brings you closer to bright white. Within RGB, there are 256 different hues of red, green and blue, totalling 16,777,216 possible colours.   

Colour in print is subtractive and is made by laying inks on top of each other — effectively subtracting parts of the spectrum of light reflecting to our eyes. This is done using combinations of cyan, magenta, yellow and black inks (CMYK) arranged in fine dot patterns to create a simulation of other colours. Each CMYK has 100 percentage points so there are roughly 10,000,000 combinations of colours for print in this manner. As mentioned last week, there are roughly 1,800 pre-mixed and registered spot colours (Pantone Matching System) for exact colour management on elements such as logos.   

Online designs can still be printed. 

If you designed something for the screen and then decided to print it, no need to panic. Many printers (the machinery) have built-in tools to transition from one color profile to another. Most printers (the print-house staff) diligently ensure the output print replicates the file. If it is in online RGB, they will convert it for you. It is especially important to review your proofs carefully.  

Proof everything. 

Different types of paper, finishes, and printing methods can change the outcome of a colour. Even printing from one vendor to the next can give you different results. Always test your colours first or get a proof before rolling out any print material. Even if you’ve printed a project in the past, there’s no guarantee you’ll have the same results. 

Use a Pantone swatch book that also has a very closely associated CMYK

Pantone swatch books are an invaluable resource with hundreds of accurate print colours based on PMS. If you know your design will be printed, start with the Pantone Matching System (PMS) colour platform in your initial design. This ensures that no matter where it’s printed, it will always turn out the same. 

Colour identification and correction can be a difficult and arduous task, especially for the untrained eye. Wingman Direct Marketing (WMDM) has developed a keen understanding of the relationship between RGB, CMYK, HEX and PMS and can assist your business with its print execution needs. Whether you’re developing brochures to hand out at your next convention or committing to a nation-wide direct mailout, our agency has successfully completed numerous print campaigns ranging from a few hundred pieces to a few million. We got your backBook a Wingman today to get started.

Leave a Reply

Your email address will not be published. Required fields are marked *