Colour codes explained: HEX, RGB, CMYK and Pantone

Why one colour has several codes

A screen creates colour with light. A printer creates colour with ink on paper. These are two different worlds, and each has its own way of describing colour.

So your brand colour is not one code, but a set of codes that belong together. Each code is the closest match to the same colour in a different medium. Use the wrong code and you get a colour that is slightly off: too dull, too bright or a different shade.

The four codes at a glance

These are the codes you will find in almost every brand manual:

• HEX. For websites, apps and everything online. A short code with a hash in front, which you paste straight into a website builder or design tool.
• RGB. Also for screens, but written as three values for red, green and blue. Handy in presentation software and Office programs.
• CMYK. For four-colour print, such as brochures, flyers and magazines. The printer mixes the colour from cyan, magenta, yellow and black.
• Pantone. A fixed spot colour from a colour guide. You use it when a printed colour must be exactly right, for example on packaging, business cards or textiles.

Pitfalls that make your colour shift

Most colour errors do not happen during design, but later. Someone picks a colour from a screenshot with an eyedropper. Or a colleague converts RGB to CMYK with a random online tool. The result looks close, but not quite right.

A second pitfall: recording only the screen colour. Then the printer has to come up with a CMYK value, and every printer does that slightly differently. After a few jobs you have three versions of the same brand colour.

Pay attention to the paper too. The same CMYK code looks different on glossy paper than on matt or uncoated paper. Ask your designer whether you need separate values for the paper types you use.

How to record your colours properly

A good colour page in your brand manual contains more than just codes. Keep these points in mind:

• Let a designer do the conversion. They choose the value per medium that comes closest to the intended colour, not whatever a calculator happens to give.
• Put all codes side by side. For each colour HEX, RGB, CMYK and Pantone if needed, in one place and in the same order.
• Give each colour a name. Everyone remembers ‘brand blue’ or ‘accent orange’ better than a string of letters and numbers.
• Record the role of each colour. Which is the main colour, which is for accents and which for backgrounds?
• Check the contrast. Text must be easy to read on the background behind it. State which combinations work and which do not.

Copy instead of retyping

Even well-recorded codes go wrong when people retype them. One wrong character in a HEX code and you have a different colour. So make sure colleagues can copy the codes easily, and agree that everyone takes the codes from the manual. Never from an old file or a screenshot.

In MarkBase, colours sit together with their HEX, RGB, CMYK and Pantone codes, and you copy a code with one click. If you work with a PDF manual, put the codes in the document as text, not as an image. Then at least people can select and paste them.