Working with Pantone colours

One of the hardest things you can do as a designer is work with colour. But it is also one of the most critical. Along with a typeface it is often the only distinguishing characteristic of a design.

Defining brand colours is important. It is often used to develop more complex colour systems.

For example, a brand colour is often used as the background colour for a button. Tints or shades of that colour are then used to indicate interactive states: :focus, :hover, :active and so on.

A brand colour can also be used to derive a broader colour palette. Websites often need variety to indicate things like success, failure, error and so on. Using that single brand blue often isn’t enough!

So it is important to define the brand colour.

Check that document

In terms of workflow, often all you have to go on is a document. Sometimes it is some sort of a brand guide where the designer has listed colour values. Other times it’s literally just the logo.

As branding is intended for print, colours are invariably defined using a Pantone colour system. However for the web we need to know the RGB values.

But all too often these documents are not consistent. For example:

  • the brand guide will state Pantone 187 U, but the colour applied is actually Pantone 187 C, or
  • the RGB colour values stated do not match when you inspect using the colour picker, or
  • the RGB colours stated and colour picker match, but the artwork colour is CMYK and not a Pantone colour

The file format of the document can vary too. If you’re lucky you will get the source .ai document. The reason I say lucky is because you can inspect the colour values applied to the artwork itself.

When you work with a file like a .png or even a .jpg you are working with converted colours. These are not always reliable or consistent.

My default now is to double check colour values. That way I can build a de facto list of colours. I can also use this as a reference when checking colour values in dev tools.

Colour conversion: Adobe vs Pantone

A key thing to remember about Pantone colours is that they cannot be reproduced on screen. In Pantone’s own words:

On screen digital color simulations do not match the physical Pantone Color Standards. Refer to Pantone Color publications to obtain actual physical color standards.

What you see is always an approximation. After all the screen you are using is RGB.

If you inspect Pantone 187 C in Illustrator you get:

Colour Space Value
RGB 170 24 44
CMYK 23 100 88 15

But are these values accurate? Well one way you can check is to use the Pantone Colour Finder. Here they state that Pantone 187 C is:

Colour Space Value
RGB 166 25 46
CMYK 7 100 82 26

Spot the difference? It is slight but perceptible.

Is one of these wrong? Well no. The values are different due to how the colours are converted. Pantone do it one way, Adobe another.

Incidentally Affinity Designer matches what Pantone say:

Colour Space Value
RGB 170 24 44
CMYK 23 100 88 15

Does it matter which one you use? Again no. My preference is to go with what Pantone say. It’s their colour after all. But what does matter is that you are consistent.

— Alexander Blackman