colour part 1: the difference between rgb and cmyk

COLOUR PART 1: THE DIFFERENCE BETWEEN RGB AND CMYK

http://www.piccianeri.com/the-difference-between-rgb-and-cmyk/

http://www.piccianeri.com/

In my previous post on how to save images for the web with Photoshop I emphasised that you must make sure the image colour mode is RGB, and not CMYK, when you save for the web.

In this post you can find out what the difference is between the RGB and CMYK colour systems, and why it is important to know it.

http://www.piccianeri.com/how-to-save-images-for-the-web-with-photoshop/

http://www.piccianeri.com/how-to-save-images-for-the-web-with-photoshop/


What is RGB colour? What is CMYK? and what is the difference between RGB and CMYK? It’s essential to know this, if you need to work with images on the web and in print.

It is essential to understand that colour is created by light. Without light, we cannot see colour.

Simply put: colour is perceived by the eye as a result of the way an object emits or reflects light. Colour in itself doesn’t exist: it’s a human perception

COLOUR IS LIGHT


of wavelengths of electromagnetic energy that make up the visible spectrum of light. This perception also varies depending on a number of factors: physiology, psychology, culture.

This applies both to the colours that you see on a screen, and the colours of any reflective surface – in the first case the colour is emitted, in the second the colour is light reflected on the surface.

Let’s have a look at how that works.

COLOUR IS LIGHT



THE RGB COLOUR SYSTEM

In the image below, you can see a visual representation of the RGB colour system, in which colour is created by light.



The RGB acronym stands for Red, Green and Blue: the primary colours for the RGB system.

When they overlap, they form white.

This is why they are called additive colours: they are colours obtained by emitted light directly from a source, and when the three primaries overlap, the result is white light.

RGB colour is made of LIGHT. Red, Green and Blue are LIGHT BEAMS.





So, right off, this is the difference between RGB and CMYK.

In the RGB colour system the colour is emitted directly, so it shines through.

In the CMYK colour system, the light is bounced off the surface. It’s not transparent: it’s reflective.





RGB is the colour system used on your computer screen and on your tv, on your telephone and tablet, at the cinema, on your camera.

Any time it involves a digital platform – it’s RGB. Simple.

There are 256 colour levels (0 to 255) in the RGB colour system. Thanks to this, we can form other colours.





This is what the RGB colour slider looks like in Photoshop:

In this example, 0 red, 128 green and 120 blue give a teal green colour.





Below, you can see what happens when you have a full beam (255) for each of the primary colours: white is the result.

It’s the linear representation of the three light beams overlapping that we saw at the beginning.

The addition of the three primaries creates white – this is why the RGB colour system is called additive.





On the other hand, zero red, zero blue and zero green produce black.

Black is nothing other than the absence of light.

Zero light = black.





So this is why, when you save for the web, you must make sure that your image is saved as RGB. This is the colour system that your screen, and your browser, and the internet, will understand.

The RGB colour system comprises a very wide range of colours (called gamut): if you multiply the levels of the 3 RGB values, 0 to 255, by one another, you get nearly 17 million colours:

256x256x256 equals 16,777,216.





Things are quite different in the real world, where most objects get their colour through a combination of reflection, absorption and scattering of the light that hits on them.

This is why the behaviour of colours changes entirely when you print things out.

The first reason is that, as we saw earlier, colours in the real world, outside of screens, are mostly produced by light bouncing off surfaces, not shining through them (unless it’s glass or other see-through surface of course).

THE CMYK COLOUR SYSTEM




The second reason is that in order to print colours you need to use coloured ink.

The colours of these inks are: cyan (blue), magenta (a bright pink), yellow and key (black).

This is what the CMYK acronym stands for. All colours in print are formed by mixing a percentage of these 4 colours.

The third reason is that the colour of the paper you use will also produce a variation in colour.





The CMYK colour system is called subtractive, because each of the colours when printed subtracts from white.

Also, when these 4 colours overlap they form 100% black – so, the opposite of RGB, where the 3 colours overlapping forms white.





The same teal colour we saw above, translated from RGB to CMYK:

You can see from this colour slider how you can mix colours in CMYK: 86% blue, 30% magenta, 55% yellow and 9% black give you the same teal green colour.





It’s worth repeating, however, that the colour you see on your screen will not be the same when printed.

Colour transferred from on-screen RGB to print CMYK changes considerably: don’t be disappointed when it does.

Always ask your printer, or print a sample before.





It’s also best to use round numbers when you make up CMYK colours: always round up the percentage to the nearest 5% or 10%.

So for that teal colour I would probably advise:C85, M30, y55, K10.

Graphic designers often use big printed swatch books so they don’t get their colours wrong once they are printed – it would be a costly mistake. Much better to make sure they know what you are getting, before you go to print.





This is an enlarged example of how the CMYK printing process works: a photographic image is separated into the 4 primaries CMYK, in the form of small dots.





This colour system, as said before, is called subtractive, because each of the colours when printed subtracts from white.

Also, when these 4 colours overlap they form 100% black – so, the opposite of RGB, where the 3 colours overlapping forms white.





THANK YOU. I HOPE YOU FOUND THIS USEFUL. YOU CAN READ THIS POST ON MY WEBSITE, TOO.

IF YOU ARE INTERESTED IN COLOUR, YOU CAN ALSO DOWNLOAD THESE

2 X COLOUR CHEAT SHEETS.THANK YOU!



http://www.piccianeri.com/downloads/2-colour-cheat-sheet-basic-colour-facts/

colour part 1: the difference between rgb and cmyk

Design