Why is colour so complicated?
Shhhhhhh… don’t tell anyone but there are many web designers who don’t fully understand how colour works differently on screen and across print materials. Why? Because many of us haven’t needed to.
Even before adding print into the mix, colour already looks different on every screen:
“You don't know on what monitor your photos will be displayed, you don't know if this monitor has been calibrated or not, you don't know whether it's a tablet or a computer screen, you don't know which browser your user is using hence if it uses ICC profiles management and finally, last but no least, if it's a wide gamut screen or not! You got the picture…”
So with such a lack of control why try and control it? Also, any web designers out there who have done a deep dive on colour will know that it’s a hugely complicated area that is often subjective. Do a search for ‘Photoshop colour settings for web design’. Read the comments from blogs to get a feel for the strong opinions.
I recently took my own deep-dive and wanted to share a few of the more interesting things I’ve picked up:
The difference between Pantone Coated and Pantone Uncoated
This one came about when I received brand guidelines that simply stated the pantone colour number. E.g. “Pantone 43”.
Pantone colour is only appropriate for print so I needed to work out how best to represent this colour on screen. Looking at our Pantone swatch book I could see that “Pantone 43” coated and uncoated looked different. So why is this?
This is the difference between the type of paper that the ink is printed onto. The actual Pantone ink formula is the same on both sets. However how that colour looks is different. Generally, the coated paper produces a more saturated and vibrant result because it holds the ink at the surface of the paper.
Unfortunately I couldn’t get further clarification from the original designer so I made the call that the coated version with the higher saturation felt more fitting to screens.
Should we use the RGB values that Pantone gives us for web design
Depending on which Pantone colour swatch you have, Pantone gives an RGB value. So what does this mean, and how does Pantone get to that value?
Firstly we need to understand what colour spaces are
A colour can be described by its value and each device uses this value to determine what that colour output is. For example a monitor may describe an image of a dark red flower as #990000 but the printer would describe it as CMYK 8/100/96/37.
Colour profiles/spaces are a little like the translator that sits between these devices translating what these values are.
Each of these colour spaces have a different gamut of colours. What’s available for CMYK may not be available for RGB. Some Pantone colours simply can not be replicated using CMYK or RGB.
Secondly we need to know how Pantone gets those values, and what colour space they use
When I asked a customer representative, I was told that Pantone gets the RGB value by measuring the colour from a swatch using a Spectrophotometer. This gives a reading in the L*a*b colour space which has a gamut that contains every colour possible. The RGB and CMYK values are determined algorithmically from this.
So should we use the RGB value that Pantone gives us or not?
As we’ve learned above, the RGB value is pointless without the colour space. Again, according to the representative, Pantone uses the sRGB colour space. The thinking behind this is that most monitors are set to this so this would be the closest to a possible standard.
However what that colour looks like will be different on every monitor. Different calibration settings and profiles will affect things like hue, saturation and brightness. Additionally the colour itself will look different depending on the light in the room. The point is that just because you use the RGB value given by Pantone, it doesn’t mean that the colour will look the same everywhere or even visually match between the Pantone swatch and the screen you're looking at.
There’s an argument for testing the colour across a wide range of screens and adjusting the colour to average it out. The aim being to find a colour that you’re happy with across a range of monitors even though it may never look the same. However, with so many devices and screens this isn't an easy or entirely practical solution.
Choosing colours from scratch
There may not be a Pantone colour that is possible to represent as a RGB colour as they have different gamuts. This makes choosing colours in the first place difficult as you may choose a colour on screen that can not be closely matched to a Pantone colour or vice-versa. That’s before throwing CMYK into the mix which has its own gamut. It’s a pain in the backside fun choosing new brand colours that work consistently across platforms!
There’s an argument that when choosing brand colours you should choose something that fits within all gamuts. That way, at least a colour has a certain level of consistency even if it is different everywhere. However, it seems a shame to let printed material dictate a brand’s colour for brands that mainly appear online - this doesn’t seem very “digital first” and you could be missing out as some of the brighter, more saturated colours don't translate well to print.
Known Unknowns
“There are things known and there are things unknown, and in between are the doors of perception.”
― Aldous Huxley
As you can see, the world of colour can be quite confusing - and I haven’t even touched on how people perceive colours differently! The only thing we know for sure is that colours can not be the same everywhere.
I’ve used this article as a way of gathering and keeping my thoughts on this. I hope that this rambling can help you too. If not, then please check out all the references below that helped me.
Links
- A great primer on all things colour - definitely the first place to go
- Questions and answers about colour spaces - check out the comments to give you a headache ;-)
- So… what is L*a*b?
- Good colour profile article
- Colour related to the web
- Do browsers use colour management?
- Should we disable colour management for web design?
- … This comment thinks we shouldn’t
- … As does this article
- Nice explanation of printing techniques
-
Matt Keogh
Creative Director
