This guest post was written by BigBlueCurrant, a talented graphic, web and logo designers on DesignCrowd. BigBlueCurrant is ranked #21 in the DesignCrowd global rankings. He was profiled on the DesignCrowd blog in 2012.

Logo design: Achieving Colour Consistency Across Web and Print

The logo is often the starting point when businesses decide to create/refresh their brand, and with that usually comes the task of choosing a colour scheme that will look consistent across web and print.

So what's the best approach for choosing the colour scheme? Although this article often refers to Adobe Illustrator (AI) menus and options, the method should apply to whatever vector based software you use.

You've just done your sketches or you've got a good mental image of your design, so you fire up AI and create a new document when you are faced with the option of choosing either the RGB (web) or CMYK (print) colour mode.

There is plenty of information out there about these two modes and how the colours are made up, but in brief, RGB will provide far more colour options than that of CMYK.

For example, in RGB colour mode, if you select the colour (0,0,255) you will see the 'out of gamut' triangle warning, which basically means that this colour will not look as intended when printed; there will be a colour shift.

This example shows the 'out of gamut' colour, how it looks on screen and how it's likely to look in print:

As the RGB colour model contains most, but not all, of the CMYK colour model it would seem sensible to start in CMYK and therefore reduce the risk of a colour shift.

The more obvious CMYK colours to look out for when considering consistency are the ones that generate a zero value in their RGB equivalent. For example, 100% Cyan in CMYK is shown to be (0,159,227) in RGB values, but if you nudge that to (1,159,277) the colour becomes duller. Checking the value back in CMYK you can see that it's now (75,22,0,0), which demonstrates the colour shift from CMYK to RGB:

The quick and easy way to check your colours in AI is via the Proof Colors option from the View menu. This will simulate your web colours as print colours and vice versa, so you can see any possible colour shift. You can change the way the proof is set up via "Customize" from the Proof Setup menu. Here are the options:

So with the basics covered, what are the other main considerations when choosing a colour scheme for consistency?

Using Pantone spot colours

Pantone can achieve more vibrant colours within and beyond the RGB colour model than CMYK, and wherever it is reproduced, it is the same colour. It is one ink.

CMYK is a mixture of four different process colours (Cyan, Magenta, Yellow, blacK) and if you compare the output of the same colour values from different printers, you may find that the results are not identical.

Although this is a big thumbs up for Pantone, many international printing companies rely on the CMYK digital printing workflow, and so choosing a Pantone that doesn't convert well to CMYK could cause problems.

If the client is likely to print in Pantone ink, then to obtain consistency you could choose a Pantone colour that converts well to both CMYK and RGB, which for best accuracy would involve consulting a Pantone Color Bridge guide.

AI has the Overprint Preview option from the View menu that will simulate the colour of the Pantone you are using, and although this will not be as accurate as the book, it will help determine if there is a similar colour in the CMYK environment. If you see a shift in colour when switching between normal and overprint preview then probably not.

Colour calibration software

What you see on your monitor is not always what you get. One non-calibrated display can show the same colour much differently to the next. Also, if the lighting in your working environment changes then the same colour may look different on the same display at different times of the day. The quality of your monitor is also going to be a factor.

Colour calibration software (such as Spyder) will determine the ambient light within your environment and then assist to calibrate the monitor accordingly. You can then be confident in the colours you are providing and how you expect them to look.

Effects for web

More of an aside, but some clients will want logos with a blend of effects for the web (e.g. gradients, gloss, shadows using different opacity values and blend modes) as this may fit in with their ideas for their website.

As solid colours print better, you could provide a version for print and for web, with the latter being developed from the base colours selected for the colour scheme and therefore you don't have to worry about transparencies and the like when the former goes to print.

In Summary

• Start designing in CMYK colour mode
• Proof your colours as you go along
• If using Pantone colours, buy a Pantone Color guide
• Invest in a good monitor and colour calibration software

The information above comes from personal experience, discussions with other graphic designers and internet research. It is by no means the definitive guide to achieving colour consistency and doesn't even touch upon colour profiles. However, it can only help and anyone willing to improve or correct what is written is welcome.

We hope you enjoyed this guest post. If you have more tips on this topic, share them in the comments below!

If you want to get involved and see how our wonderful designers work with colour, create a logo contest today - use this discount coupon code.

Written by DesignCrowd on Thursday, September 26, 2013

DesignCrowd is an online marketplace providing logo, website, print and graphic design services by providing access to freelance graphic designers and design studios around the world.