WHY DO COLOURS APPEAR DIFFERENT ACROSS DIFFERENT SCREENS AND DEVICES?

Ever had that experience where the colour you see on a screen displaying your new logo or promotional material is just perfect, only to then see it in print and find yourself shocked that it isn’t at all like the colour you saw on the screen? Read on to find out why this can often occur.

Back when I worked in printing I recall spending a reasonable amount of time holding a Pantone book, or a supplied piece of material, and looking between that and a swathe of printed little square blocks of colour produced by a digital printer, dashing outside occasionally to check how the colours looked under natural light (or perhaps just as an excuse to get two minutes of fresh air), either agonising between two very similar yet nonetheless different ‘matches’, or despairing that there just wasn’t anything near a match, and preparing myself to get back to the customer and reluctantly tell them that they would have to settle for a colour that really wasn’t all that much like the colour they actually wanted.

An experience such as this is part of the process of colour matching. A customer gives you an existing print, a piece of material, or Pantone reference, that they would like their print to match, and it’s up to the person producing their printed work to get the colour to appear as close to this as possible. Sometimes it’s possible to get a good match; sometimes even a near exact match. Other times it’s a case of having to go with the least worst option.

In the past at least a designer or a printer only really had to concern themselves with how a colour might look as a result of the print process. The web has thrown in a whole new dimension. Now it’s a case of how things will look on a monitor, on a phone, and across a range of different browsers and devices. With photographic images you can often relax and accept that a variation from screen to screen, or between a physical print and the screen, isn’t going to be that noticeable (unless a sky becomes purple or some grass changes to turquoise). But when it comes to logos, branding and corporate identity, it can be serious! Of course, some people aren’t too precious about whether the text in their logo is just the right shade of blue, but some, understandably, are. If your company is a well known brand, you will want to do everything you can to keep colours consistent. Brand identity can be very important, and colour is a huge part of this. So how can colour variance issues be dealt with?

Part of it is simply awareness and acceptance. Being aware helps manage expectations. If you expect to see some variation, then you are not going to be hugely shocked and disappointed when you see it occur, and you can also plan for how to deal with it. Expect it to be a little different and you won’t feel too irritated when you see that it is a little different. And if it’s almost the same – great, you’ve had a pleasant, unexpected surprise, and you’re happy! However, a word of caution here. While it’s possible to get a reasonable and consistent match in print, but the appearance of a colour on computer monitors or mobile devices is a bit of a lottery. It might look right on one screen, but view it on another and it quite possibly won’t. So just why is it that the ‘same’ colour can appear so differently between screen and print, and from sceen to screen? Firstly, let’s look at colours on the web. 

WEB COLOURS

The colours you see on a screen are composed from red, blue and green (RGB) – and they are created by light. A screen starts off black, and then red, blue and green light is added at varying levels of brightness – from completely ‘off’ to fully ‘on’ – to make a colour. The three colours together at full intensity makes white. Different devices (whether they be a desktop computer, laptop or mobile phone), display colours differently. This makes it impossible to get a consistent colour across all devices. Even if you could manage to get your logo the exact colour you desire on one device, it would look different on another. Indeed, if you were to then adjust the display settings on the device upon which the colours appeared correctly, they would change.

PRINT COLOURS

Printed images and graphics are usually made from four coloured inks: cyan, magenta, yellow and black (CMYK). They are added together in varying proportions to make up different colours; add them all together at 100% each and you get black. The “swathe of little square blocks of colour” mentioned above in the first paragraph was a print-out of various colours made up of CMYK  values from 0 to 100%. The block with the closest comparison to a colour you hoped to match to would give you the CMYK values to input into the artwork that was to be printed. Usually the material CMYK inks are printed onto is a shade of white. This is the opposite to a screen, where the ‘canvas’ starts as black.

So as you can imagine, getting a colour to look the same, or even very similar, on both printed material and across screens on various devices, is unlikely. I like to picture the prospect of matching an RGB colour to a CMYK colour as a very strange kind of race, where two runners set off at different times and begin and finish at opposite ends of the track, and in this unusual race, ideally, you would like them to finish at the same time, or at least as near as possible. This would be more manageable if they were at least running in the same direction and starting at the same time, or even starting from different points at the same time, because they might try to at least keep up the same pace. But starting from different points at different times, and finishing in different places, clearly makes this near impossible.

SO WHAT IS THE SOLUTION TO MINIMISE COLOUR VARIATION?

Printing is arguably a more straightforward matter. When it comes to printing the best way to manage colours is proof, proof, proof! If you are having a print run and you would like some part of it to be a particular colour, take a sample to the printer and ask them to match it as best as they can, or agree to a Pantone colour. If they’re local, pop in and ask to view the a proof, or see if they will post it to you. This way you will at least know what you are getting, and hopefully it will be a close as can be to what you want. When it comes to colour on the web the task becomes much more difficult. A CMYK or Pantone reference can be translated to an RGB colour, but it won’t guarantee a match. Even the closest thing might be some way off, and it will look different across the many screens and devices used to browse the internet. It might be wise to try to view it on as many different devices as possible, but even in this case, screen brightness, the light in the room, and other factors can affect this. If you try to minimise colour variation to the best of your abilities, and manage your expectations accordingly, then even if you won’t necessarily be happy with the end result, you’ll at least not be too unhappy with it…