How to Optimize Colors for On-Screen Use

 
 

On-screen color proofing is always problematic. You find a neat little color for your project, you proof it on your screen, you proof it on all the screens, you double-check with Pantone Color Bridge – and in the end it looks slightly different on your client’s projector.

But this one time the color we selected and proofed on our calibrated monitors looked completely different on our client’s screen. Instead of yellow, it looked like a dirty greenish something. This is never acceptable, but since this company was Swiss, this had the effect comparable to the apocalypse.

“What would our potential customers think when they see this color?”

Although we had been in business for more than 8 years by that time, for some reason, we hadn’t encountered this ‘yellow problem’ before. We didn’t really expect such risk in going with yellow as a main color, as we had no such experience before with other colors we used.

peti_MEDIUM.jpg

Peter Molnar

CEO & Co-Founder

 
 
Image 1: Yellow in a rainbow   Photo by Calvin Chou on Unsplash

Image 1: Yellow in a rainbow

Photo by Calvin Chou on Unsplash

Image 2: Yellow in the colour spectrum refracted by a prism   Photo by Dr. Jonathan P. Here of The Creative Science Centre

Image 2: Yellow in the colour spectrum refracted by a prism

Photo by Dr. Jonathan P. Here of The Creative Science Centre

 

The science behind the ‘yellow problem’

Yellow in the spectrum

We found that the area of the color spectrum we perceive as “yellow” is narrow, way narrower than some other basic colors. While an amount of movement on the color spectrum from ‘yellow’ leads to orange, brown or green, the same amount of movement from blue or red colors stays in the blue or red area.

Yellows are not only sensitive to changes of hue, but to changes in saturation as well. While blues and greens with lower saturation become darker tones of the same color, yellow with lower saturation becomes greenish-brown.

 
Image 3: Yellow in adobe colour selector (shared colour space of CMYK and RGB)

Image 3: Yellow in adobe colour selector (shared colour space of CMYK and RGB)

 

Problems with screens

Screens, monitors and projectors use additive color mixing. Additive colour mixing is when you light a dark area (e.g. a screen that is black by default) with colored light, and use this technique to generate a wide range of colours. As a standard, colors are generated from Red, Green and Blue light. What we see on devices that use additive color mixing is highly dependent on the color setup of that actual device. Such devices offer a wide range of local setup options to compensate environmental factors. E.g. if you use a screen in daylight, it should be brighter in order for the content to be properly seen. In a room or in the night time however, the same screen with the same setup gets disturbing for the eye and should be set for lower brightness.

Altogether, setup options are as follows:

  • Brightness – controls the amount of white in the image, makes the screen brighter with more

    backlight

  • Contrast – makes lighter pixels even lighter and darker pixels even darker

  • Colour balance (hue) – moves all colours of the image on the colour spectrum

  • Colour intensity (saturation) – by increasing saturation, the colours in the image become more

    pure, which means the amount of primary colours (red, green and blue) is increased.

  • RGB sliders – it is possible to set the intensity of each primary colour (red, green and blue)

    separately

As a consequence of the wide range of setup options, unfortunately, many devices are not set up properly. This makes it impossible to select colors that appear the same on all devices. There are, however, some color management options to mitigate the risk of ending up with false colors at a presentation.

 
 

How we used this knowledge

Based on our findings, we refined the color selection for Zippsafe. Luckily, the most used brand colors were black and white – as these are ideal for color proofing on screens, we didn’t have to do much with this. We used a pure white and a rich black.

Yellow was a much greater challenge – we refreshed it to a purer version that is easier to reproduce. We also had to consider proper usage in prints, but that calls for another blog post. I only share the end results here.

On screens

The final color contains no Blue, while Green and Red balance is pushed in favor of red – this means a lower risk of sliding into the green area. Greenish tones are not acceptable, as they are perceived further away from Yellow. Orange in the other direction is less problematic.

In printing

The final color uses few Magenta and no Cyan and Black color, so it is less dependent of color calibrations (independent of Cyan and Black and less dependent of Magenta calibrations)

Zippsafe is one of our favourite clients, a Swiss startup offering innovation in an area most of us would think of as boring: they re-invented lockers and offer serious space saving with their flexible-textile storage solutions. Among other tasks, we were assigned to redesign their brand. Their color was yellow, and after considering some other options, we decided to keep it. We only had to solve one tiny problem: this yellow has to look the same in all environments, on prints, on screen, and on their products too.

zippsafe-final-color
 

5 tips to avoid color failure

If you still have the option of using a color that is perceived on a large area of the color spectrum, such as blue or green helps a lot. With these colors, you basically don’t have to worry about your color appearing as another color on poorly set up screens. Using non-saturated colors: black and white is even more effective – these colors should be available on all screens. but you don’t always have to, or want to go the easy way. In such cases,

We have these 5 tips for you

  1. Select colors from the middle of a colour-area on the colour spectrum, or

  2. In special cases: pick a spot on the color space that is further away from the color effect you want to avoid. (In our case this was the greenish-yellowish-brownish area between green and yellow)

  3. Review nearby colors and map possible color calibration effects, and refine your color selection accordingly!

  4. Colors should be in a place that is less distorted by color adjustments. To find such areas, it’s easiest to use a TV screen with a color spectrum and tweak all the settings from end-to end. Look for spots where colors don’t change.

  5. Colors should be as pure as possible (should contain as few colours as possible in RGB)