Ever looked at your logo on screen and then saw it printed, only to wonder why the colours don't quite match? Or been given a string of letters and numbers like '#FF0000' and felt a bit lost about what to do with them?
Ever looked at your logo on screen and then saw it printed, only to wonder why the colours don't quite match? Or been given a string of letters and numbers like '#FF0000' and felt a little lost?
If so, you're definitely not alone! The world of design colour codes can feel like a secret language, but understanding it is absolutely essential for keeping your brand looking on point across screen, print and signage.
In this post, I'm going to decode the four main colour systems most non-designers encounter: RGB, CMYK, PMS, and HEX and where should be used.
RGB: For Screens & Digital Products
RGB is the standard colour mode for anything viewed on screen - think PowerPoints, social media tiles, word documents etc.
What it stands for: Red, Green, Blue
How it works: Imagine three spotlights – one red, one green, and one blue. When you combine them in different intensities, they create every colour you see on your computer monitor, television, smartphone, or tablet. When all three are at their highest intensity, they combine to make white.
When to use it: Always for web graphics, social media posts, digital ads, online presentations, videos, and anything that will only be viewed on a screen. Using RGB ensures your digital visuals pop with vibrant, true-to-life colours.
Looks like: Typically represented by three numbers, one for Red, one for Green and one for Blue. The numbers can range from 0 to 255.
As an example: 255, 0, 0 is pure red, where as 0, 0, 0 in black and 255, 255, 255 is white.
CMYK: For General Print
CMYK is the standard colour printing mode used by commercial printers. It uses four different coloured inks (cyan, magenta, yellow and black) to create all the colours needed.
What it stands for: Cyan, Magenta, Yellow, Key (Black)
How it works: Your printer lays down tiny dots of cyan, magenta, yellow, and black ink. These dots overlap and mix optically to create the desired colours. Black ('K' for Key) is included because combining C, M, and Y doesn't create a rich enough black for printing; it usually results in a muddy brown.
When to use it: For most general print materials where a wide range of colours or photographic imagery is needed. Think brochures, annual reports, flyers, magazines, posters, and books.
Looks like: Typically represented by four percentages, one for each colour.
As an example: CMYK 0, 0, 0, 100 is black, where as 0, 0, 0, 0 is white and 0, 0, 100, 0 is bright, pure yellow.
PMS: For Brand Consistency
PMS colours are 'spot' colours – pre-mixed, specific ink formulas that are globally recognised and numbered using the Pantone system. Think of them as a highly precise recipe for a single colour.
What it stands for: Pantone Matching System
How it works: Instead of mixing C, M, Y, and K dots, a printer uses a specific, ready-made ink for a PMS colour. This ensures that a particular shade, say your brand's signature blue, looks exactly the same every single time it's printed, regardless of the printer, paper stock, or even the country it's printed in.
When to use it: PMS is used for brand elements like your logo or anything where absolute colour consistency is paramount. If your brand has a specific, non-negotiable colour, PMS is your go-to for print. It's particularly useful if you have a brand colour (like orange) that doesn't print well in CMYK.
PMS colours are often used in conjunction with CMYK, so it can add additional cost to printing. If you're printing a company brochure, for example, you might have your logo in a PMS, but the rest of the brochure would be CMYK.
It's also often used for things like merchandise, packaging, and signage where a specific colour needs to be matched precisely.
Looks like: A specific number (e.g., Pantone 185 C for a particular red, often with a suffix like 'C' for coated paper or 'U' for uncoated).
HEX: The Web's Colour Shorthand
A six-character alphanumeric code used primarily in web design and development to represent a specific colour. It's essentially a shorthand for RGB colours for digital use.
What it stands for: Hexadecimal colour code
How it works:
Each pair of characters in a HEX code represents the intensity of red, green, and blue, respectively. For example, #FF0000 means full red, no green, and no blue – pure red.
When to use it: For specifying colours in web development (HTML, CSS), digital design tools, and ensuring exact brand colour replication across your website and other online platforms.
Looks like: Starts with a hash symbol followed by six characters (e.g., #FF5733).
Why Does All This Matter? Consistency is Key!
Understanding these different colour models is crucial for maintaining a professional and consistent brand identity across all your platforms. Using the wrong format can lead to frustrating and disappointing results:
- Digital looking dull in print? You probably designed in RGB (for screens) instead of CMYK or PMS (for print). RGB colours are often much brighter and more vibrant than what can be achieved with CMYK inks.
- Print colours looking off on screen? CMYK and PMS colours don't always translate perfectly back to RGB.
- Website colours not matching your brand guide? Check those HEX codes!
- Brand colours inconsistent across different print runs? You might need to specify PMS!
Need help making your colours consistent? Book in for a free consultation.
