Part 3 of 10
How to write the color section of brand guidelines
Every color as hex, RGB, CMYK and Pantone in text, how much of each to use, which pairs are readable, and what each color is for, with published examples.
The color section is mostly numbers. That makes it the easiest part to get exactly right, and the easiest part to get a little wrong. A color from a screenshot is near the brand color, but it is not the brand color. Write every value as text, in every format that people use, and say what each color is for.
What the color section needs
- The name of each color and its values: hex and RGB for screens, CMYK and Pantone for print.
- The values in the text of the page, and not only in a picture of swatches.
- What each color is for, and how much of it to use: a main color, supporting colors, and accents.
- Pairs of text and background colors that are easy to read, and pairs to avoid.
- A short reason for the palette, so that new uses fit.
How published guides write it
NHS
Pantone: 300 CMYK: 99/50/0/0 RGB: 0/94/184 #005EB8 RAL: 5017
Has: exact value. One color in five systems, with RAL for paint and signs. On the page, the values are on separate lines.
NHS
Our research shows that patients and the public strongly associate the NHS with the colours blue and white. 87% of people spontaneously recall these two colours when asked about the NHS Identity.
Has: reason. Grounds the blue and white rule in a survey figure rather than taste.
IBM
Each of the 10-color families have been divided into 10 swatches ranging from light to dark. RGB and HEX values are provided for digital applications along with Pantone® and CMYK values for print.
Has: exact value. Says which values are for screens and which are for print.
IBM
The following color combinations have been eliminated from the color families and should be avoided unless required for specific applications, such as data visualization.
Has: where it applies. Bans certain pairings and names the one use where they are still allowed.
Mozilla
Use mostly Black and White, with a pop of Green (approximately 45% Black, 45% White and 10% Green)
Has: exact value. Gives proportions as percentages, not only a list of colors.
Spotify
Extract artwork color for background (Android Palette). If not possible, use Spotify color #191414.
Has: exact value. The only color code in the page text. The palette image gives black as #121212 instead.
Dropbox
We use color to create harmony and focus. Utilizing color with careful intentionality not only strengthens visual identity but also enhances user experience, guiding users and reinforcing the brand.
Has: reason. A purpose with no rule attached. The color codes appear only after JavaScript runs.
GitHub
In most brand applications, green should be the key player. We use neutrals, black, and white to ground it and create focus.
Has: reason. Says that green leads and neutrals support it, and why. It gives no ratio, but example images show the balance.
Wording to copy
Copy this text into your guide. The example is for Larch Coffee, a made-up coffee roaster. Replace the highlighted parts with the facts for your brand.
Color
[Larch green]: [#2F5D50] on screen, [Pantone 5535 C] in print. For
[buttons and headlines].
[Cream]: [#F4EEE2] on screen, [Pantone 9224 C] in print. For
[backgrounds].
[Ink]: [#1B1B1B]. For [body text].
Use mostly [cream] and [Larch green]. Use [the orange accent] for no
more than [one element] on a page.
Pairs that are easy to read: [ink on cream], [white on Larch green].
Do not put [green text on cream], because the pair fails contrast
checks.
Common gaps
- The values exist only in a picture of swatches. Copy them into the text too.
- The screen values and the print values do not agree, and the guide does not say which values win.
- There are no readable pairs, so people check the contrast themselves, or do not check it.