What Are The 4 Different Colour Models?

In the vast world of print and onscreen design, we rely on four main colour models: PMS (Pantone® Matching System), CMYK, RGB and HEX. Any successful businesswoman knows the importance of having a complete brand guide that details her logo usage, fonts, core values, and the colours tied to her brand. Colour plays a huge role in branding and keeping consistency across all platforms is crucial to any successful brand.

Keeping the colour precise and consistent is not easy, because there are millions of factors that can throw off consistency around using colour in the design. For example, there are endless varieties of browsers, mobile devices, TVs, and printing methods that make various designs look different depending on if you’re viewing them on screen or on printed collateral.

No one can control the inherent variations in billions of mobile devices and personal computers, but there are certain colour systems that are universal. These, when used effectively, will ensure that colour consistency can be upheld. And I will be teaching you about the main four colour models, printers and designers use.

What Are Colour Models?

When you ask a non-designer to tell you the names of all the colours, they’ll know red, blue, yellow and a few more. A designer, like me, will be able to name periwinkle, mauve, fuchsia and maybe another hundred. There are, however, thousands of regularly used colours and millions more that can be distinguished by the human eye.

To give a name to each of them would be impossible, so scientists have devised various ways of assigning numeric values to colours. In a nutshell, colour models are a system that helps us to define and describe colours through numerical values. There are many types of colour models that use different mathematical systems to represent colours, although most colour models typically use a combination of three or four values or colour components.

Some popular colour models used across the design industry are:

PMS – Pantone Matching Systems

CMYK – Cyan, Magenta, Yellow, Black

RGB – Red, Green, Blue

HEX – Hexadecimal Colour

Print vs Screen

Before we break down the four different colour models, I think it is super important to explain print vs screen and how this relates to the colour models.

PMS, CMYK, RGB and HEX — anyone who works on a computer will have seen these terms used to describe colour types, but many people don’t understand what they are, how they’re used and what the difference is between them.

There are two basic categories of colour types: print and screen. The colour on the printed page is subtractive, while the colour on the screen is additive (more on this in a mo). For now, it’s important to understand that the digital and print mediums render colour very differently from one another. You don’t use PMS colours on a website just like you don’t use RGB colours on a printing press.

Four of the most popular colour types that we’re going to discuss — PMS, CMYK, RGB and Hex — all fall into one of the two basic categories. PMS and CMYK are for print. RGB and HEX are for onscreen.

Colour Theory

Quick science lesson – Colour is the reaction of photosensitive lumps in our eye to the external stimulation in the form of light beams. When entering the eye, the ray is bent and disperses the spectrum. Colour is the observation of a certain frequency range of 400-800 trillion Hz. Two basic ways of mixing colours are present:

Subtractive: mechanical stirring pigmentation mixing basic colours.

or

Additive: optical mixing of light.

Did you know, that light is made up of energy waves that are grouped together on a spectrum called the electromagnetic energy spectrum?

Our eyes can only detect a small portion of this spectrum, which we call the “visible light spectrum”. At one end of the visible light spectrum are shorter electromagnetic waves that we perceive as blue; on the other end of the spectrum are longer waves that we perceive as red.

Beyond these visible limits are shorter wavelengths such as ultraviolet light and x-rays, and longer wavelengths like infrared radiation and radio waves. Red, green, and blue are the predominant colours of the visible light spectrum. These primary colours also form the basis of the additive colour model.

Now that we’ve understood the basic colour theory, it’s time to drill down a little deeper, look at each colour type individually, and explain what it is and how it’s used.

CMYK

Use: For print – use in offset and digital printing. Ideal for full-colour brochures, flyers, posters and business cards, etc.

CMYK colour (also called the four-colour process) is actually a method whereby a combination of tiny transparent dots of four ink colours: cyan, magenta, yellow and black are printed. Different combinations of large and small CMYK transparent dots overlap each other to create a wide spectrum of colours.

Whereas Pantone ink is one solid colour throughout, a CMYK colour is not. When you look at a CMYK printed piece through a magnifying glass, you can see a pattern of CMYK dots and how they overlap to make the final colour.

If you magnify the three CMYK colours, you can see how the dots form the overall colour. The cyan, magenta, yellow and black inks absorb coloured light, which is why CMYK is a “subtractive” colour model.

RGB

Use: For screen – the most commonly used colour profile in the world of computers, TV screens and mobile devices are RGB. RGB is the process by which colours are rendered onscreen by using combinations of red, green and blue.

RGB is the opposite of CMYK because it is an “additive” process. When you mix fully saturated versions of all three colours (red, green and blue) together, you get pure white. When you remove all three colours completely, you get black.

RGB is specific to digital applications only. This includes mobile devices, computer monitors, laptops, TV and movie screens, games and illuminated signs.

I often hear clients who design something onscreen in Canva and then get disappointed when the finished printed piece is less vibrant. RGB colours appear vibrant because they are illuminated and there is a larger range in colour gamut than what you’d get on the printed page.

HEX

Use: For screen – designers and developers use HEX colours in web design. A HEX colour is expressed as a binary six-digit combination of numbers and letters defined by its mix of red, green and blue (RGB). Basically, a HEX colour code is a shorthand for its RGB values with a little conversion gymnastics in between.

A hexadecimal colour follows the format #RRGGBB, where RR is red, GG is green, and BB is blue. These hexadecimal integers can be in a range of 00 to FF to specify the intensity of the colour.

A simple example of this is #FF0000. This colour is pure red because the red component is at its max value of FF and the green and blue components are at their lowest of 00. And #FFFFFF is white and #000000 is black.

Colour Matching Across All Systems

One of the key benefits of working with a brand designer, is they understand the importance of keeping your brand colours consistent across both print and on-screen, which is why you would have received either a brand board or brand guidelines outlining the different colour values you can refer back to.

But don’t panic if you don’t! You can just refer to this handy infographic down below, or if you have just started in business and have an image of a colour you often you, you can then upload it to a handy website called ImageColorPicker.com and it will generate the colour codes for you, just from using one image – how cool is that?

Or you can book a FREE 30-min discovery call with me if you wanna know more about my magical branding services and how I can help you keep your brand colours consitent.

..

Find out the ways you can work with me or follow for more tips & tricks…✨

Work With Me | Facebook | Instagram | TikTok | YouTube | Pinterest

∞