Macworld Masterclass: Colours for all

Choosing reliable colours for print, web and iOS

By

  • mw colours 08 Intro
  • mw colours 01 Step 1: Print versus screen
  • mw colours 02 Step 2: Gamut
  • mw colours 03 Step 3: sRGB and monitor profiles
  • mw colours 04 Step 4: iPad gamut
  • mw colours 05 Step 5: sRGB then?
  • mw colours 06 Step 6: Synthetic colour space
  • mw colours 07 Step 7: Red Green and Blue
  • mw colours 08 Step 8: Illustrator and Photoshop
  • mw colours 09 Step 9: Out of gamut
  • mw colours 10 Step 10: Compensating for CMYK
  • mw colours 11 Step 11: What is web safe?
  • mw colours 12 Step 12: Pantone
  • mw colours 13 Step 13: Colour tolerances
  • mw colours 14 Step 14: Bling, bling
  • mw colours 15 Step 15: Grand finale
  • mw iPad screengrab Bonus tip: Profiling your iPad
  • More stories
Next Prev

Intro

Let’s start this Masterclass with its conclusion – using sRGB is the safe option when choosing colour for print, web and iOS. What follows are brief explanations as to why this is true, and for the uninitiated what sRGB means and how to select colours from it.

We’re going to be dealing with a specific part of colour management – selecting colours that will work across a variety of output methods. Clearing the fog that surrounds colour management is a challenge, and here we’ll be looking at Mac OS X and Adobe’s Design Suite; in particular Photoshop because its colour options are the most direct. On this occasion we won’t be looking at device calibration, though products are available for iPad profiling, which we’ll cover at the end of this Masterclass.

Next »

Next Prev mw colours 08

Let’s start this Masterclass with its conclusion – using sRGB is the safe option when choosing colour for print, web and iOS. What follows are brief explanations as to why this is true, and for the uninitiated what sRGB means and how to select colours from it.

We’re going to be dealing with a specific part of colour management – selecting colours that will work across a variety of output methods. Clearing the fog that surrounds colour management is a challenge, and here we’ll be looking at Mac OS X and Adobe’s Design Suite; in particular Photoshop because its colour options are the most direct. On this occasion we won’t be looking at device calibration, though products are available for iPad profiling, which we’ll cover at the end of this Masterclass.

 

Step 1: Print versus screen

In the Finder, press Cmd-Shift-U or go to your Mac’s Utilities folder – the ColorSync Utility is located here. Open it and select the Profiles icon. Click System, go to the sRGB profile, then Control-click the 3D image of the profile and select Hold For Comparison. Now select Generic CMYK Profile.

 

Step 2: Gamut

With the sRGB and CMYK Profiles open, click and drag the 3D image to view it from multiple angles. The CMYK colour space is much smaller than sRGB. Control-click the profile images and select Clear Comparison. Look through the list of profiles to find your monitor profile found under either Displays or User.

 

Step 3: sRGB and monitor profiles

Unlike the comparison of CMYK and sRGB, your monitor profile and sRGB should be of a similar size and shape; they have a similar gamut. Any differences are due to the quality of monitor – the better the monitor the greater its gamut – or are the result of calibration and profiling.

 

Step 4: iPad gamut

Colour on iOS devices can be specified in several ways including CIE 1931 XYZ and sRGB. Here, the former is being compared with sRGB. CIE 1931 XYZ is a theoretical space equivalent to the gamut of standard human vision. Currently no monitor, iPad or otherwise, can display this range of colour and tone.

 

Step 5: sRGB then?

For the near future iPads and iPhones will have a similar gamut to computer monitors, so just like preparing photographs for the internet sRGB makes an ideal space from which to choose colours for design work for screen-based viewing. But what about print? Open Photoshop’s Color Picker in the tool bar.

 

Step 6: Synthetic colour space

The first screen grab compares sRGB and CMYK; generic versions of screen colour and print colour. This screen shows Adobe’s Color Settings for traditional print design. Look at the Working Spaces section – for traditional print design Adobe RGB (1998) is used rather than sRGB.

 

Step 7: Red Green and Blue

For reprographic print all colours have to be converted to CMYK. Photoshop, Illustrator and InDesign all have Color Settings, which are found in the Edit Menu. By default they are set for the US. To change this go to Color Settings, click More Options, and from Settings choose Europe General Purpose.

 

Step 8: Illustrator and Photoshop

Having Color Settings in sRGB means the Color Picker will be limited to safe colours. The quickest way to set all the necessary colour management settings is by choosing Europe General Purpose or Europe/Web Internet. Here the Color Picker is displaying two gamut warnings.

 

Step 9: Out of gamut

Step 8’s screen grab was from Illustrator, this one is Photoshop. Both show two gamut warnings. The Hazard triangle is an alert that the current RGB colour cannot be printed lithographically, while the cube warns the RGB colour is not hexadecimal, or web safe.

 

Step 10: Compensating for CMYK

To set an RGB value that’s printable in repro, click the Hazard Triangle. The RGB red will now work in repro. But the second warning remains. This isn’t a problem unless you are looking to choose an HMTL compliant object colour, such as a background or font colour in a website.

 

Step 11: What is web safe?

HTML colours are specified using six characters, hence hexadecimal. Here the red is #cc3333, which is both RGB and CMYK safe. But unless you need to specify a colour by hexadecimal values there’s no need to use Only Web Colors. Instead, click Color Libraries.

 

Step 12: Pantone

When creating a logo, a designer will review colour swatches – Pantone is commonly used in the UK. A seasoned designer will know that an ink will appear with varying hues and tones on different papers. There are Pantone swatches for the same ink reference as it will appear on coated and uncoated paper.

 

Step 13: Colour tolerances

Lithography is used to print magazines. The ink used can be Process or Solid. The former uses cyan, magenta, yellow and black ink to create colours on press. Solid colours are pre-mixed tins of ink that might contain varnish, white ink or a metallic colour such as gold.

 

Step 14: Bling, bling

Solid colours can be out of gamut for CMYK and have visual qualities that just don’t look right on screen. Here the Color Libraries in Photoshop has been used to select Pantone 871 C and lush gold ink, with real gold. When it comes to Pantone swatches, it’s best to stick to process colours.

 

Step 15: Grand finale

The guidance given here is not absolute. Rules can be broken, but sticking loosely to the sRGB and Process colour rules should mean that the colours you choose will display reliably across a variety of screen based devices and print. Why reliable not accurate? See the box out on iPad profiling.

 

Bonus tip: Profiling your iPad

If you are reading this on a winter’s night, in print or your iPad, switch the lights off and on in your room. It’s worth noting that an iPad or computer monitor appears to get lighter or darker when the lights are on or off.

Datacolor, the maker of the Spyder range of colour profilers, has been the first to market a solution for profiling iPads. Whatever merits there are for profiling Apple’s tablet, the variable ambient light conditions in which iPads are used make profiling a minor concern. Such profiling makes sense only in controlled light conditions.

Surface Pro (2017) vs Surface Pro 4

Surface Pro (2017) vs Surface Pro 4

20 groundbreaking 3D animation techniques

20 groundbreaking 3D animation techniques

How to mine Bitcoin on Mac

How to mine Bitcoin on Mac