Fun Fact: James Clerk Maxwell, the most influential 19th Century Physicist, the man who pioneered electromagnetism, one of Einstein’s three heroes alongside Faraday and Newton, is credited for being the Father of the additive colour method. His studies on this concept led to the first-ever colour photograph!

Hex

Hex

Hex is the most widely used colour format in web design. It is essentially exactly the same is RGB, except each colour’s three numbers are displayed more concisely.

Instead of using a number between 0 and 255 for the amount of each primary colour, we use the hexadecimal representation of that number.

Hexadecimal numbers

Hexadecimal is just another way to represent numbers, just like binary and decimal.

Binary numbers represent numbers using just 1s and 0s.

Decimal numbers, which we are all used to, represent numbers with ten characters, 0 up to 9. Larger numbers can be expressed using combinations of these ten digits.

Hexadecimal numbers represent numbers using sixteen characters. 0 up to 9 and then A up to F. After we reach F, we use combinations of these sixteen characters to express larger numbers.

For example, the number seventeen is 10001 in binary, 17 in decimal and 11 in hexadecimal.

In the above picture, we have Mint Green with a Hex code of #6BBDB9.

In the RGB picture, it has an RGB code of (107, 189, 185). If we convert these three decimal numbers into hexadecimal numbers we get (6B, BD, B9), which matches the Hex code!

HSL

HSL

HSL stands for Hue, Saturation, Lightness. This approach to encoding colours came around in an attempt to avoid some of the unintuitive results of manipulating colours in the RGB “gamut”. (A gamut is the space of all colours available when using a colour scheme such as RGB).

The problem was that, in the RGB model, in order to get a darker or lighter shade of, say, the above Mint Green, one has to vary each of the red, the green and the blue values of the RGB code.

The creators of HSL thought this change should be possible by changing just one dial, namely, the brightness.

So HSL was invented to provide a more intuitive approach to colour transformations.

Hue: This is essentially the root colour in the colour spectrum. It takes as its value a degree between 0 degrees and 360 degrees, where Red is at 0 (and 360) degrees, Green is at 120 degrees, and Blue is at 240 degrees with the other colours fitting in-between.

Saturation: Given as a percentage value, this is the ratio of Colourfulness to Brightness where Colourfulness is defined as the “attribute of a visual sensation according to which the perceived colour of an area appears to be more or less chromatic”.

Basically, how colourful is the colour?

Lightness: Also given as a percentage value, this is just like Brightness but relative to a chosen white point (whereas Brightness is an absolute measure).

This all sounds quite technical and perhaps the best way to describe HSL is with a picture.

PRINT FORMATS

Now let’s look at the print formats, CMYK and Pantone.

CMYK

CMYK

CMYK stands for Cyan, Magenta, Yellow and either Key or BlacK.

This is a print format and, as we have seen, since printed objects reflect light but do not emit light, we need to use a subtractive colour format. We start with a white piece of paper, or background, and we subtract wavelengths from the white light it is reflecting.

How does CMYK subtract from white light?

“Cyan is the complement of red, meaning that the cyan serves as a filter that absorbs red. The amount of cyan applied to a white sheet of paper controls how much of the red in white light will be reflected back from the paper.” -Wikipedia

In the same way, Magenta and Yellow, as the complements of Green and Blue respectively, control the amount of Green and Blue light reflected back from the paper.

The origin of the K in CMYK is disputed. Some say it comes from the last letter of Black, with the last letter chosen instead of the first because B would mislead people to think it stood for Blue. Others say it stands for the first letter of Key as in the key plate in a printer.

The majority of printing is undertaken using the CMYK format.

Pantone

Pantone

Pantone is the only one of our colour formats that is also a company!

Pantone offer a whole bunch of print colours outside of the CMYK gamut.

Their colours are often used by brand and design agencies and they have built up quite the brand of their own which culminates in their colour of the year declaration, a choice of one of their colours to reflect the mood of the times.

Since so many of the Pantone colours are not in the gamuts of the other colour formats, there is limited automated colour conversion available between Pantone and the other formats.

This results in designers going around with expensive Pantone colour Rolodex’s to ensure that the web colours match the print colours in their client work.

Pantone’s colour codes start with “PMS” which stands for Pantone Matching System. Then it gives each colour a number (like 7472 for the above Mint Green), which can be followed by C or U, which stands for Coated and Uncoated.

If you enjoyed this blog, please clap to share it.

To store your own brand colours in all of these different formats, visit www.pilcro.com (see image below). Once you have built your palette, you can share it with your team like you share a Google Doc.

You can store loads of other brand assets in your Pilcro Artboard too!