Understanding colour modes and how to them in design

When designing something, it’s super important to understand which colour mode to use in order to get the best results. The way colour is produced on screens versus in print is very different, which is where the two most common colour modes — RGB and CMYK — come into play. Knowing the difference between these colour modes and how to choose which one to use in a particular design will help you get the best end results.

So, let’s take a look!

What is RGB?

RGB stands for “red, blue, and green” which are the three base colours that this colour mode is built on. RGB is an additive colour mode, which means it uses light to display colours, and mixes the base colours to create all the different possible colours. White is produced by using the full intensity of all three colours, while no intensity produces black.

RGB is the colour mode used for electronic systems, including your computer monitor and phone screen. When designing for web-based applications, RGB is the colour mode you should be using.

What is CMYK?

CMYK, also referred to as process colour, or four colour, stands for “cyan, magenta, yellow, and key”. “Key” likely came from the name of the key plate used with black ink in four-colour printing. Unlike RGB, CMYK is a subtractive colour mode. White comes from the complete absence of colour (no ink), while black is produced from printing the full saturation of the coloured inks.

CMYK, as you can guess, is used for printing. If you’ve ever changed your printer’s ink cartridges, you’re probably familiar with this colour mode being used.

When to use each colour mode

So the basic rule of thumb is pretty simple:

• If the design you’re creating is for digital use (such as for web design, social media posts, or web banners, etc.) then stick to RGB.
• If the design you’re creating is intended for printing (brochures, stationery, business cards, signage, etc.) then use CMYK.

Why is it important to use the right colour mode?

A lot of design applications, including Adobe Photoshop, are set up with RGB as the default colour mode. This is probably because Photoshop is primarily used for photo editing, web design, or other things which will end up on screens.

But what happens when you design something on Photoshop, in RGB, and then print it?
Depending on the colours you used, you might notice that the printed version looks more faded, dull, and less saturated. There can be a pretty dramatic difference between what you see on the screen and what you see printed out.

The main reason is that RGB has a wider spectrum of colours that it can produce, which aren’t possible with CMYK. I’ve always noticed that bright oranges, light greens and bright blues, in particular, tend to be difficult to reproduce in CMYK.

When creating a design project that will likely use both digital and print outputs, I always start out by creating designs in CMYK, because it’s far easier to find matching RGB colours later, rather than doing it the other way around.