Why read this? : We look at the 5 different colour systems used in marketing design projects. Learn how each works, and where and when you use them. 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 these customer-facing activities work.
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.
But given there are over 18 decillion colours to choose from, it’s also important to be able to specify the exact brand colours you’ve chosen. You want your brand colours to be used consistently.
But colour specification can vary 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 focussed 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 focussed 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.
The 5 colour systems we’ll cover are :-
- RGB.
- Hex.
- HSB.
- CMYK.
- Pantone.
RGB
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 because 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.
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
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.
HSB
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.
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.
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
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.
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.
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
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.
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.
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 agencies suggest a brand identity refresh. Or in innovation when you extend your product range. And sometimes, it’s a creative suggestion to make a visual element stand out in your advertising.
The key here is understanding why new colours are needed. You also want to consider how long the new colour will be used.
For short-lived executions – a seasonal sales promotion for example, an unusual colour choice will grab the attention of your target audience.
But for longer-lasting marketing activities, you have to be more careful with new colours. They need to complement or enhance your existing colour palette. You want to avoid new colours which confuse or distract customers as this makes your brand colours 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.
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.
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.
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
