The Science Of Colour In Web & Print
When designing for web, so much more goes into it than simply chucking together some html and images. Have you considered the age of the device your website is being viewed on, or even the device itself? What about where the device is being used and the surrounding lighting and exposure? All of these things can have a huge impact on how your website looks.
Did you know that the quality of a screen, be it desktop, laptop or handheld can deteriorate over time?
You may not have realised that in a perfect world, monitors should be calibrated once a month to show true colours. Pretty crazy, right?
So that beautiful website you have designed looks great on your brand new giant iMac screen, in your office, next to a large window letting in loads of natural light on a sunny day in June at 2pm. But your client finds themselves looking at the same website in his front room at 8pm on his 7 year old 15in Windows laptop under a cheap 50w light bulb, and is instantly unhappy with the shade of purple you have used. He then prints a screenshot of the website to show his staff on a cheap printer, and that original beautiful shade of purple has completely changed again!
Factors that affect how a website or printed media can look
There are a lot of factors that can affect how a website or how printed media looks on any medium:
– The age of the device
– The lighting where the device is being used
– The quality of the paper used to print it
– The quality of the device used to print it
– The quality of the rip used for the printer
What is a rip?
In web design, RIP stands for ‘raster image processor’. It’s the software your printer uses to translate the colours used in your image into the physical printed image. The better the printer, the better the quality of the print (commercial printers usually being the best!). But then, if you plug your really expensive printer, into your 7 year old laptop, it’s likely the two won’t look the same. Argh!
Buying paint and shirts whiter than white
When you select paint at your local DIY centre, it more often than not looks completely different to that sample you saw on the wall, quite simply because of… light. The type of bulb you use in the room, or the fact that the curtains are open and it’s a sunny day affect the colour you see versus the industrial fluorescent strip lighting used at the DIY centre where you bought the paint. However, advertisers and products can actually use this to their advantage, such as the clothes detergent Arial, formerly known as Persil.
You may remember the old Ariel advert on TV boasting “whiter whites” for your washing. That’s because it contains a fluorescent compound that reacts with sunlight, making your white shirts and pants look awesome on the washing line. Most white paper comes with it as well!
So how can you keep it consistent everywhere? The simple answer is, you can’t.
Ok ok, there is something you can do to maintain an ounce of control in this world full of chaos.
– Understanding and accepting that your website or print job isn’t going to look the same everywhere, and testing on a few different views to see the differences
– Learn how to correctly configure your Adobe applications colour profiles to best fit the job.
– Learn how to correct the colour your monitor is outputting using colour calibration tools and software.
– Learn how to set up your monitor for different lighting and print requirements.
– Print proofing
– Create media profiles for RGB and CMYK
When you create graphics for web, you would use RGB (Red Green Blue) colour, for print, you would use CMYK (Cyan, Magenta, Yellow, Key (Black)).
How do you see it?
Check out the videos below to understand more behind the science that make us see colours differently, and understand why this dress caused so much controversy!
However, if you unfortunate enough to have a client who is colour blind, well, there isn’t a lot you can do, other than find out if they are actually colour blind (or if you are!).
There are tests you can do online such as this one: http://enchroma.com/test/#&ui-state=dialog