The short version
- Brand color codes should give every colour in four formats: hex for the web, RGB for screens, CMYK for printing and a Pantone reference for spot colour and physical goods.
- Each colour in a style guide also needs a name, a role and a list of approved text pairings with their contrast ratios.
- Hex and RGB describe exactly the same screen colour, so they can be converted precisely, while CMYK and Pantone values need a colour managed conversion and a printed check.
- If your brand appears mostly in print or on products, choose the Pantone reference first and match the screen codes to it.
- Name colours by role, such as primary or ink, so the guide still makes sense if a shade changes later.
On this page
Brand color codes belong in a single table in your style guide, with one row per colour and a column for each medium: hex for websites, RGB for screens and video, CMYK for print, and a Pantone reference for spot colour, signage and merchandise. Add a name, a role and the approved text pairings, and anyone from a developer to a sign maker can reproduce the colour without guessing. Most inconsistency comes from people inventing their own conversion because the guide only gave them one code.
The brand colour codes table
Here is a complete example for a fictional brand with a red primary, a blue secondary, an ink and two neutrals. Copy the structure; replace the values with your own.
Hex
#C8102ERGB
CMYK
Pantone
Hex
#0047BBRGB
CMYK
Pantone
Hex
#101820RGB
CMYK
Pantone
Hex
#D9D9D6RGB
CMYK
Pantone
Hex
#F5F3EERGB
CMYK
Pantone
What each colour code is for
- Hex (
#C8102E) is the web's shorthand for an RGB colour. Developers, Figma and most design tools want it. Hex colour codes explains how to read one. - RGB (200 16 46) is the same colour written as red, green and blue values from 0 to 255. Video editors and some apps ask for it. Converting between hex and RGB is exact; see hex to RGB.
- CMYK (0 92 77 22) is the mix of cyan, magenta, yellow and black ink for four colour printing. It depends on the press and paper, so it should come from your printer or a colour managed conversion.
- Pantone (186 C) names a premixed spot ink from a physical swatch book. It is the most reliable way to get the same colour on business cards, signs, fabric and packaging. The suffix matters: C is coated paper, U is uncoated.
- Optional: oklch or HSL values help web teams build tints and dark mode variants. Include them if your developers work that way.
How to work out your brand colour codes
- 1
Decide your lead medium
If the brand lives mostly on screens, start from hex. If it lives on packaging, uniforms or signs, start from a physical Pantone swatch and match the screen colour to it.
- 2
Choose the Pantone match in person
Look at a real Pantone guide in daylight, not a screen preview. Pick the closest coated and uncoated chips and note both.
- 3
Get CMYK from your printer
Send the hex and Pantone reference and ask for their colour managed CMYK values, then approve a printed proof.
- 4
Fix the screen values last
Adjust the hex so it looks like the printed sample on a few calibrated screens. Hex and RGB then follow exactly from each other.
- 5
Record approved pairings
List which colours may sit on which, with contrast ratios, so nobody puts red text on navy.
Pantone vs hex covers the matching step in more depth, including why a screen preview of a Pantone chip is never quite right.
Document approved pairings and contrast
Codes tell people how to make a colour. Pairings tell them how to use it. A short contrast table prevents the most common misuse, which is putting two brand colours together that both look strong and fail as text and background.
Contrast
Use
Contrast
Use
Contrast
Use
Background
Contrast
Use
Background
Contrast
Use
The method behind those numbers is in colour contrast and accessibility.
Sharing colour codes with developers
Give developers the colours as named tokens, not a PDF they have to retype. Role names keep the code readable and survive a change of shade.
:root {
--brand-primary: #c8102e; /* Signal red, Pantone 186 C */
--brand-secondary: #0047bb; /* Harbour blue, Pantone 2728 C */
--brand-ink: #101820; /* Ink, Pantone Black 6 C */
--brand-mist: #d9d9d6; /* Mist, Pantone Cool Gray 1 C */
--brand-paper: #f5f3ee; /* Paper */
}Avoid
- One hex code and nothing else
- Colours named "red 2" and "new blue"
- CMYK copied from an online converter
- Pantone chosen from a screen preview
Do
- Hex, RGB, CMYK and Pantone for every colour
- Names that say what the colour is for
- CMYK from your printer, checked on a proof
- Pantone chosen from a physical guide
Keeping the codes where people design
A colour table in a PDF only helps if people open it. Put the same palette wherever designs are actually made. In Gradiently, the brand kit (part of Pro) holds your colour palettes beside your logos and fonts, and the Designer uses them when it lays out a design, so the right codes travel with every post. The rest of the guide, from type to tone of voice, is covered in brand style guide.
Questions people ask
What colour codes should a brand style guide include?
Hex, RGB, CMYK and a Pantone reference for every colour, plus a name, a role and approved text pairings with their contrast ratios.
Is hex the same as RGB?
Yes. Hex is RGB written in base sixteen, so #C8102E and 200 16 46 are exactly the same colour.
How do I convert a hex colour to CMYK?
Online converters give a rough starting point, but CMYK depends on the press and paper. Ask your printer for a colour managed conversion and approve a printed proof.
Do I need a Pantone colour for my brand?
If your brand appears on signs, packaging, clothing or merchandise, yes: a Pantone reference is the most reliable way to get the same colour on different materials.
What does the C or U after a Pantone number mean?
C means coated paper and U means uncoated. The same ink looks different on each, so note both if you print on both.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile