Know your colour systems

Colour is not an exact science. When you create or save a document or graphic file it’s important to think about how it will be output as this will affect the colour quality greatly.

There are two basic types of colour system based on using primary colours to create all the other colours you need:



RGB colour systemThe additive system is based on mixing (adding together) the primary colours Red, Green and Blue (RGB) and is used for screens — TV, computers, tablets and smartphones. There are two main variations on the RGB system: hexadecimal and HSL.

RGB colours are specified in numbers between 0 and 255, or as percentages. For example:


  • R 255,G 0, B 0 or
  • R 100%, G 0%, B 0%


  • R 0,G 255, B 0, or
  • R 0%, G 100%, B 0%


  • R 0,G 0,B 255, or
  • R 0%, G 0%, B 100%


  • R 0,G 0,B 0
  • R 0%, G 0%, B 0%


  • R 255,G 255,B 255
  • R 100%, G 100%, B 100%


The hexadecimal system is used for the web and is based on RGB. Colours start with the has sign (#) and then give the Red, Green and Blue values each as two characters, either numerals or letters, known as a hex triplet (‘hex’ from the Latin for six). For example:

  • White: #FFFFFF
  • Black #000000
  • Blue #0000FF
  • Grey #808080
  • Dark Salmon #E9967A

Originally in web design a very limited palette of 16 named colours was used as these were the only colours that would safely reproduce accurately in nearly all browsers and operating systems. A wider ‘web safe’ palette of 216 colours was later introduced. However there are also a number of other web colour palettes and ongoing debates about how many colours are truly ‘web safe’, which you can read about on Wikipedia, though just being aware that web colours are limited and have their own system will suffice for most people unless they are specifically designing for the web.


Also known as Hue-Saturation-Luminosity (HSL), this is a method based on the RGB system.  It puts more emphasis on the intensity of colours which is why it is commonly used in colour correcting photos. If you have a photo-editing package you will probably find this option there.


CMYK colour systemThe subtractive system uses the primary colours Cyan, Magenta, Yellow and often Black (CMYK) and is the system used for printing.

In printing, colour is usually specified by the Pantone® system. Pantone assigns detailed colour references to ensure as accurate colour reproduction as possible, including variations for printing on coated and uncoated paper.

As well as the four CMYK primary colours you can specify ‘special colours’. Many corporate identities will use a special colour to try to make it difficult to make false copies of work.

When you are printing, all colours can be reproduced from Cyan, Magenta and Yellow, using a three cylinder printing press, one cylinder for each colour. Desktop and office printers use the same principle but using colour cartridges. However a fourth ‘colour’ black is often added to ensure a true, crisp black — just using Cyan, magenta and Yellow can often result in a muddy brown rather than black.

You will often hear printing using the primary colours Cyan, Magenta and Yellow and Black referred to as ‘four colour process printing’.

If you are using a special colour an extra cylinder is added to the printing press. This will give a more accurate colour but will add to cost. More than one special can also be used, again adding to cost and increasingly restricting the number of printers you can use: not all presses can have extra cylinders added.

I referred above to ‘as accurate colour reproduction as possible’. This is an important point. No colour reporduction is 100% accurate. there are a lot of factors which affect how people see colour, including:

  • the paper stock you use
  • the paper finish (a shiny ‘coated’ paper or a matt ‘uncoated’ paper)
  • the type of light you are viewing the colour under — daylight, fluorescent light and incandescent light, for example, will all make a difference

Proofing is important. If you proof from a pdf file on a computer the colours will look very different as you will be seeing the colours on an RGB screen but trying to guess what they will look using the CMYK system! Talk to your printer about how important colour accuracy is and the different proofing systems they offer. You can get proofs straight from the press, and that may be essential, but they will also be much more expensive than a pdf proof.



Watch an animated summary

Colour systems animated gif