Hex colours, CMYK, RGB, Pantone® – what are they, what’s the difference, and why does it matter? All four are categories of colour types and different ones are used in different mediums. CMYK and Pantone® are used in printing and RGB and hex colours are used online. And online colours are what we’re concerned with here.

What is RGB?

RGB stands for red, blue and green. RGB colours are all the possible intensities of colour combinations that can be made from these three colours. And there are more than 16 million possible colours, every colour that the eye can see. They run in intensity value from 0 to 255 and every single colour has a value each of red, blue and green somewhere in these parameters. Numbers are used so that the exact colour can be selected and each colour has a string of numbers between 3 and 9 digits long.

What is a hex colour?

Hex is short for hexadecimal, and hex colours, like RGB, are also represented by digits. They are used by programmers to get the exact colour required. Hex colours indicate the intensity of every colour and are translated from RGB to web-friendly hex. They are extremely precise. The coding turns the three RGB values of between 0 and 255 into three 2-digit codes. For example, a shade of purple (which only contains red and blue) might be 150,0,150 as an RGB colour. As a hex code, this same colour is #960096. The science and data of hex colours is a lot more involved than we want to go into here but makes interesting reading, if that’s your thing (think counting in 16s rather than 10s…)

Why do we use hex colours on the web?

As we’ve seen, RGB colours can contain between 3 and 9 digits. That leaves quite a lot of room for error when it comes to programming. With hex colours, we know they are always 6 digits, whichever one of the 16 million+ colours we may be using. Luckily, there are lots of RGB to hex converters and colour hex picker wheels available online to avoid unsightly mistakes. So hex colours really come in to their own to avoid errors.

Helpful hex tips

Every pixel has its own unique colour and hex colours don’t blend very well between shades – they can end up looking like bands of colour. This is more common on older devices without the tech to show millions of colours, or in newer tech when viewing natural gradients. There are ways to program gradients to make this smoother.

Trying to select contrasting or complementary colours out of a possible 16 million+ options can be quite a task! Thankfully, there are hex colour palettes available and palettes showing what’s currently in favour to help you – thank you to the designers who have created these!

A good colour picker is essential, particularly when it come to matching colours on an existing site, the easiest to use come with Microsoft PowerTools which we talk about here in our Handy Software and Tools blog post.

If you unsure about your RGB, hex or any other colour or website design elements, give the EngineRoom team a call and we’ll be happy to help.