# Brand color codes: how to document hex, RGB, CMYK and Pantone

[Canonical HTML page](https://gradiently.design/guide/brand-color-codes)

A brand colour is only consistent if everyone who touches it has the right code for their medium. Here is the table every style guide needs, what each code is for, and the order to work them out in.

## 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.

**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.

| Name and role | Hex | RGB | CMYK | Pantone |
| --- | --- | --- | --- | --- |
| Signal red, primary | `#C8102E` | 200 16 46 | 0 92 77 22 | 186 C |
| Harbour blue, secondary | `#0047BB` | 0 71 187 | 100 62 0 27 | 2728 C |
| Ink, text | `#101820` | 16 24 32 | Rich black from printer | Black 6 C |
| Mist, neutral | `#D9D9D6` | 217 217 214 | 0 0 1 15 | Cool Gray 1 C |
| Paper, background | `#F5F3EE` | 245 243 238 | 0 1 3 4 | Unprinted stock |

A style guide colour table. The CMYK figures are simple arithmetic conversions shown for illustration; replace them with the values your printer gives you from a colour managed conversion.

- Signal red: #c8102e
- Harbour blue: #0047bb
- Ink: #101820
- Mist: #d9d9d6
- Paper: #f5f3ee

The same five colours as swatches. A guide should always show the colour itself next to its codes, so a wrong digit is obvious.

## 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](https://gradiently.design/guide/color-codes-explained) 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](https://gradiently.design/guide/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.

> **Not every screen colour can be printed** Very saturated blues, greens and oranges sit outside what CMYK ink can reproduce. If your brand colour is one of them, decide now whether print uses a Pantone spot ink or a slightly duller CMYK version, and write that down. [RGB vs CMYK](https://gradiently.design/guide/rgb-vs-cmyk) shows why.

## 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](https://gradiently.design/guide/pantone-colors) 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.

| Text | Background | Contrast | Use |
| --- | --- | --- | --- |
| White | Signal red | 5.9:1 | Buttons, banners, any size |
| White | Harbour blue | 8.0:1 | Any size |
| Ink | Paper | 16.1:1 | Body text |
| Signal red | Paper | 5.3:1 | Headlines and links |
| Signal red | Ink | 3.0:1 | Large display text only |

Contrast ratios calculated with the WCAG formula. Body text needs at least 4.5:1, large text 3:1.

The method behind those numbers is in [colour contrast and accessibility](https://gradiently.design/guide/color-contrast-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.

```css
: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 */
}
```

The same table as CSS custom properties, with the Pantone reference kept in a comment for anyone who needs it.

### 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](https://gradiently.design/guide/brand-style-guide).

## FAQ

### 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.