Helen Bee from B Double E holding an ipad with a page from brand guidelines showing colour fotmat guide.

Painting with Pixels: a guide to understanding colour formats

Colour plays a vital role in design. It’s a powerful visual element – colour can evoke emotion, communicate messages and influence perception. Colour is a massive topic that I’ve written about before (see below for more colour-themed blogs), but today I’m going to write specifically about colour formats – what they are, and – importantly for you – when to use what where.

It’s something I always include in my brand guidelines – both a guide to what the colour formats are and the brand colours themselves. You’ll also get a mini colour guide if we work on your website together.

Pages from brand guidelines by Helen Bee from B Double E showing colour and file format guides.
Pages from Mark Ryes’ brand guidelines.

The basics of colour formats

There are a lot of different colour formats. Each format has its own specific use. Colour for websites is made differently to paint for example. Websites make colour with light, paint is made by combining pigments that reflect light. So each has its own colour format or colour recipe.

Light and paint create colour in different ways. Combine red, green and blue paint and you get a brown colour. BUT if you combine red, green and blue light you’ll get white. It’s physics and I’ve always been rubbish at physics so here’s someone else that can explain it better than I ever could…

This blows my mind. Our eyes are insanely complicated things. And my eyes will work differently to yours – we all see things slightly differently. And that’s before we bring different ways to view colour – screens, paper, material – they all show the ‘same’ colour in different ways (they all absorb light differently). Which is why we need different colour formats. And why some colour formats work best in certain situations.

We also need to consider colour accessibility. As I mentioned above, we all see colours differently, and different mediums display colours differently – phones, monitors, leaflets, clothing all show the ‘same’ colour differently. Colours even look different dependent on the colour sat next to them – who remembers the photo of ‘the dress’ that to some appeared blue/black and others white/gold? Colour can play tricks on us! This is a great example of why colour accessibility is such an important part of any branding or website design. But that is going to be a topic for another blog.

Sample brand guidelines by Helen Bee from B Double E showing a website colour palette and colour use guide.
Website colour style guide and accessibility guide from one of Helen’s web projects.

The 3 most common colour types and when you should use them

RGB (Red, Green, Blue)

RGB colour is created by combining different amounts of red, green and blue light (hence RBG).

Common uses: Digital screens, such as monitors, TVs, and cameras. Image file types are JPG (or JPEG), PNG, GIF.

HEX (Hexadecimal)

HEX is based around RGB – using #RRGGBB. Each letter or number (ranging from minimum value 00 to FF maximum value) give the intensity of R G B which make up the colour.

Common use: websites

CMYK (Cyan, Magenta, Yellow, Key/Black)

Commonly used in printing, colours are made by subtracting varying percentages of each cyan, magenta, yellow and black inks.

Common use: print (magazines, posters, brochures). Image files types are Vector (AI, ESP, SVG)

Pantone (Pantone Matching System/PMS)

Primarily used in print, though sometimes to manufacture paint or fabric. It allows for colour matching in print but it’s an expensive way to print. I don’t include Pantone colours as standard in my branding projects as most voiceovers will never need them.

Common use: branding, logo design, print production

Other colour types

There are a lot more colour formats, but JPG, HEX, RGB and Pantone are the ones most voice artists will have heard of and use (apart from Pantone, but I thought it was worth mentioning why I don’t include that one!)

More about colour

Want to dig deeper into colour and how to use it in your branding and websites? Here are some suggested places to read more:

Share this post:

See all blog posts