Skip to content

Where and when to use different colour systems

Colour systems examples of red in RGB, Hex, HSB, CMYK and Pantone

Share This Post

Why read this? : We look at the 5 different colour systems used in design projects. Learn how each works, and where and when you use them in marketing. Read this to make sure you use the right colour systems.

Marketers don’t often think about colour. But, it shows up in more areas of marketing than you’d expect.

For example, it’s in your brand identity. Your brand colours are on your packaging and in your marketing communications. Your brand colours influence how customers notice and perceive you.

That’s partly down to the psychology of colours. Colours become associated with certain ideas or perceptions. Green means nature, blue means calmness, and so on. 

Young child holding a blue paint tube and squeezing it out

But given there are over 18 decillion colours to choose from, you must be able to specify the exact brand colours you’ve chosen. You want your brand colours to be consistent. 

But colour specification varies depending on where and how it’s being used. That’s why, as per our colour in marketing guide, you have different colour systems to choose from.

Colour systems

This article will focus on where and when marketers are most likely to use different colour systems. The main difference depends on whether the colours appear on screen, or are printed on physical objects. 

Screen-focused colour systems make colours out of light. They use an additive approach to mixing colours. So if you start with no colour, that’s black. And as you add colours, you move towards white.

Physical-focused colour systems make colours from pigments – inks, paints, dyes and so on. They’re subtractive. All the colours together make black, and you remove colours to move towards white.

Colour systems examples of red in RGB, Hex, HSB, CMYK and Pantone

The 5 colour systems we’ll cover are :-

  • RGB.
  • Hex.
  • HSB.
  • CMYK.
  • Pantone.


RGB stands for Red-Green-Blue. It’s the most common system used to identify colours on screens. i.e. on computers, TVs or electronics and so on.

It specifies a colour by giving a score to how much Red, Green and Blue it has. Scores go from 0 (none of that colour) to 255 (the maximum amount of that colour). You identify specific colours by their 3 colour score. For example, our Ruby Red brand colour is Red 163, Green 22, Blue 33 (R163, G22, B33)

(As an aside, Green (not a primary colour) is used rather than Yellow (a primary colour) because of the colour properties of light. White light is made up of Red, Green and Blue. That’s why it’s RGB and not RYB). 

Where and when you use RGB

Marketers would mainly use RGB in digital marketing

For example, you’d use RGB to make sure the right brand colours are used in your digital media campaigns. You’d use it for other digital materials, like sales team presentations. 

It’s usually the starting point for screen-based colour conversations as it’s the most widely known. 

Plus, it also helps tell the designer the exact mix of base colours (Red, Green, Blue). That’s helpful if you want to adjust colours to create new colours to add to your colour palette, for example. 

overhead shot of many laptops and other pieces of technology on a table

It makes it easier to look at colour combinations such as analogous or complementary matching. (See our colour in marketing guide for more on these).


Hex works the same as RGB but changes the way it “names” colours. It creates a 6-character short code (a Hex number) for the RGB definition. The underlying colour is the same, it just has a different name.

Where and when you use Hex

Hex is also used on screens and is most commonly used with website designs. 

It’s dropped into HTML code to identify colours. So if you inspect any website’s HTML code, you’ll see all the colour references are in Hex (rather than RGB). 

Marketers generally don’t write HTML code though. However, some may use website software like WordPress or Woocommerce. That’s where you need to know your Hex references.  You plug these into the software to make sure the right colours appear on the site. On menu bars, call to action buttons and other key design areas. You can see our Ruby Red colour (Hex #A31621) used throughout this website, for example. 

There’s no practical difference between RGB and Hex other than the naming.

RGB is more “people friendly” because you can decode the make-up of the colour from it.

Hex is more “computer friendly” because it uses fewer characters to identify the colour. (So it takes up less computer memory space)

You may occasionally see it used outside website designs. But that’s usually where you get the RGB and Hex codes placed together, so the designer doesn’t have to convert them. 

Look at this example which uses the colour model from Keynote. Sometimes, because Hex is only one value, rather than three, it can be quicker to use if you’re looking at lots of colours. For example, if you use the same colour regularly.

colour wheel


HSB (Hue-Saturation-Brightness) is another screen-based colour system that uses light for colour. 

It differs from RGB and Hex because the colour name also includes details of the black and white properties of the colour, not just the base colours it uses. It’s mainly used by graphic designers to give them more fine control over the exact make-up of an on-screen colour. 

The Hue is the primary, secondary or tertiary colour which contains no white, black or grey. It’s given a value between 0 and 360 which corresponds to one of the 12 colours on the colour wheel

Colour wheel with primary, secondary and tertiary (hue) colours

Red is 0 for example, and Yellow is 60. Orange is 30 to show it sits between Red and Yellow. 

Saturation and Brightness lets the designer adjust the black, white and grey elements of the colour in a way the RGB system doesn’t. 

Each gets a score between 0% to 100%. In simple terms, 0% saturation, 100% brightness creates “white”. And 100% saturation, 0% brightness creates “black”. 

But when you then apply different saturation and brightness levels to the Hue, it creates new colours by changing the amount of white (tint), black (shade) and grey (tone) in them. 

For example, our Ruby Red brand colour is Hue 355, Saturation 87 and Brightness 64. (H355, S87, B64).

Where and when you use HSB

The simple answer here is that marketers hardly ever need to use HSB.

As we said at the start, marketers don’t give much thought to colour. And if they do, RGB/Hex covers almost all the cases where they need to look at colours on screen. 

HSB was originally designed as a way to make the way we work with colours more ‘human-centric’. Saturation and brightness affect the way colour works. Including them in the name helps the designer adjust those areas. 

Graphic Designer working at their desk on a design on their computer

There’s only the odd more specialised design area where you might come across HSB. It’s more common in photography editing, for example. Tints, shades and tones can make a difference to the effect and impact of an image. 

For example, if you’re using a professional photographer for an advertising shoot, they may use HSB to change the tone of an image. To make the colour richer, or more subtle. To lighten or darken the overall colour mix. But if they do that, they’ll explain what they’re doing and why. And it’ll be clear they’ve used HSB to make those changes. 


CMYK stands for Cyan, Magenta, Yellow and Blac(K). It’s the main colour system used for printing (with pigments), rather than for colours on screen.

It prints the colour onto the surface of the object, and those surfaces affect the colour. In particular, they affect how the colour absorbs light. CMYK colours generally look darker than screen-based colours because they don’t use light for colour. 

Adobe Illustrator with a visual of a blue games console controller and the words Game Player (as a T-shirt design)

Each colour has a scale between 0% and 100% for how much it’s used (in combination with the other 3 colours) to make up each individual colour. For example, our Ruby Red brand colour is Cyan 0%, Magenta 87%, Yellow 80% and Black 36%. (C0, M87, Y80, K36).

Where and when to use CMYK

You use CMYK with anything which involves ink, paints, dyes or other colouring agents being applied to a physical item. 

Think printing out a brochure or poster, for example. Or printing a design onto a t-shirt. It would be used for physical advertising such as newspaper adverts or billboards. Also for sending out letters or flyers to your CRM members.

All these would use CMYK to make sure the right colours were printed. 

Outdoor billboard with writing that says this will drive $1m in sales - probably

The challenge with print work is that the design work is usually done on a screen with graphic design tools. So you need to match the light-based colour to its print-based CMYK equivalent. This usually involves test print runs on the item itself where you visually check the colour.

It’s common when working with designers and printers to make sure the colours from the screen and print colour systems match.


Pantone (sometimes also called PMS or Pantone Matching System) is a more specialised variation of CMYK. It’s used where colour-matching accuracy is crucial. It uses samples and swatches which define specific colours. You visually match those to printed items for colour consistency. 

Where and when to use Pantone

In marketing, this usually means packaging development

Given the importance of packaging in supporting your brand identity, brands and designers often include a Pantone matching step in the development process. The printer will do test runs based on the colours provided by the designers. They’ll ask the marketer to check and approve these before doing a full print run. 

Pantone is based on a solid colour reference, as opposed to CMYK’s combination of colours. That means it’s a more specific definition of a colour. It doesn’t rely on getting the mix of CMYK right as it has its own specific colour profile. 

Common uses of colour systems in marketing

Marketers should understand the differences in these colour systems, and where each is used.

In most cases, graphic designers and agencies choose the system, unless the marketer does their own designs.

The marketer’s job is usually to ensure the consistent use of brand colours. Or where a non-brand colour is used, to approve that colour based on what it’s going to be used for. 

Lit up dollar signs on a dark background

Let’s look at some examples of where and when you might need to apply this knowledge of colour systems. 

Brand book and brand identity

Most brands create a brand book to ensure designers and agencies are consistent in their use of brand assets.

This will include the brand’s colour palette, as well as guides to using typography, logos and tone of voice on the brand. 

The brand book should give colour references in both screen- and print-based colour systems.

It should show correct colour examples being used. For example, in advertising, on websites, and on packaging and other printed materials.

Brand identity book contents

You send all your agencies copies of this book. And you reference it in all your briefs. You check all creative work against the colour standards in the brand book.

Creative approvals - communications

Your brand colours appear in many types of marketing communications.

For example, in your advertising, your PR materials and on sales promotion items. And of course, they’ll appear in your digital marketing and e-Commerce work.

Your regular designer or agency will usually make your brand colour palette a default when they work on your brand. (This is easy to do in tools like Photoshop and Illustrator).

Unless a colour obviously looks “wrong”, you generally trust the designer or agency to manage this. 

Where you’re more likely to talk about colour is when there’s a need to look at new colours. For example, when you’re thinking of refreshing your brand identity. Or when extending your product range for an innovation. Or just a creative idea to make a visual element stand out in your advertising

The key is to understand why you need the new colour and how long it will be used. For short-term activities e.g. a seasonal sales promotion, an unusual colour choice will grab your target audience‘s attention. But for longer- term activities, you have take more care. The new colour should complement or enhance your existing colour palette. You should avoid new colours which confuse or distract customers and makes your brand identity less consistent.

Creative approvals - packaging

One of the most common areas to talk about colour in marketing is packaging development.

Not only does it influence customer choice, but it’s an important cost element in your profit and loss. You want to get it right. You don’t want to write off costs if the wrong colour appears on your packaging. 

That’s why packaging colour checks usually use the more accurate Pantone (rather than CMYK) colour system. It’s why marketers usually go to the printer to double-check colours before a full print run.

Supermarket large display of multiple types of infant formula

Colour choices get even more interesting when you do brand extensions. You tweak something in your core product mix to create a new variant. For example, a different taste, flavour or style.

For fashion or technology items, changing the colour might itself be the brand extension. But if something else changes, changing the packaging colour is often how you show it’s a different product, but from the same brand. (See our role of packaging article for more on brand extensions). 

In such situations, you look at the job the colour has to do. It’s usually about finding a balance. The new colour has to be distinctive enough to show it’s different but consistent enough to show it comes from the same parent brand. 

Often the simplest way to do this is to invert the colours you use. Look at Coke and Diet Coke, for example. Those just invert where red and white are used on the packaging.

But if you have a range of products, that range has to use complimentary colours.

Apple, for example, are very good at picking colours for their phones which “go” together and feel right for the brand.

You can see Shapes in this image is another example where they pick colours which complement each other. They also use enough of their other assets (like their logo and typography) to help with consistency. 

Supermarket shelves showing different varieties of Arnott's Shapes snacks

Conclusion - Colour Systems

Colour seems easy until you start having to use it in marketing. That’s when you find out there are 5 different systems to manage the colours used on your marketing materials.

The main difference is whether the colours appear on a screen, or they’re printed onto physical objects.

RGB is the most common colour system you come across. The Rx Gx Bx format tells you how much Red, Green and Blue are in each specific colour.

Hex is a short-hand naming system for RGB colours mainly used on websites.

Colour systems examples of red in RGB, Hex, HSB, CMYK and Pantone

HSB is a more specialised system which includes settings for black, white and grey, used to adjust colours.

CMYK is used for printing items like brochures, displays and point-of-sale items.

Pantone is mainly used for packaging, as it gives you the most accurate check on printed colours.

Your designer and / or agency should know all these colour systems. They should advise which is the right one to use and why. However, when you also know how they work, and when to use them, it can save a lot of time in the design process. 

Check out our colour in marketing and colour psychology guides for more on using colours. Or drop us a line if you need help adding a dash of colour to your marketing activity.

Photo credits

Kid squeezing paint tube : Photo by Dragos Gontariu on Unsplash

Marketing Technology – Laptops : Photo by Marvin Meyer on Unsplash

Graphic designer using Adobe : Photo from Pixabay

Billboard (adapted) : Photo by Kate Trysh on Unsplash

Dollar lights : Photo by Chronis Yan on Unsplash

Three people pointing at laptop : Photo by John Schnobrich on Unsplash

Share this content

Leave a Reply

Your email address will not be published. Required fields are marked *

Latest blog posts

Subscribe to get Three-Brains updates