How to Build a Brand Color Palette
A brand color palette is a small, documented set of colors, and each one has a job. One common structure is one or two primary colors, a secondary color or two, an accent and a few neutrals. Building one means assigning those roles, testing text and background pairings against WCAG contrast ratios, and specifying each color for screen and print.
Brand Identity Desk editors
What goes into a brand palette
Palettes are easiest to build by role. The primary color is the one people should link to the brand first, and it shows up in the logo, the main navigation and the main buttons. Secondary colors fill in around it in subheadings, cards, icons and secondary buttons. Accent colors are used sparingly for alerts, badges and calls to action. Neutrals such as white, gray and black organize the layout and keep text readable.
Tints and shades of each core color give digital teams more range without adding new hues.
Building the palette step by step
The work starts with what already exists, and competitors' colors belong in that review too. A brand that picks the same range as its rivals is harder to spot among them.
Audit how color is used today across the website, product, print and social, noting what works and what's missing.
Write down what color has to do for the brand, such as stand apart in its category, sit behind long-form text, or mark errors and success inside a product.
Choose the primary color, then one or two secondary colors and an accent.
Add neutrals for backgrounds and body text, plus tints and shades of each core color.
Test each color in place, such as text on backgrounds, buttons on page sections and accents next to neutrals.
Specify every color for screen and print and record the values in the brand guidelines.
The contrast ratios a palette has to meet
WCAG 2.2, the W3C's accessibility standard for web content, sets the numbers. Success criterion 1.4.3 (Level AA) asks for a contrast ratio of at least 4.5:1 between text and its background. Large text, meaning at least 18 point, or 14 point bold, needs 3:1. Criterion 1.4.11 (Level AA) asks for 3:1 for the visual cues that identify buttons, form fields and other interface components, and for parts of graphics people need to understand the content. The stricter Level AAA criterion 1.4.6 raises text to 7:1 and large text to 4.5:1.
These ratios are thresholds, and a computed 4.499:1 does not pass 4.5:1. Text that is part of a logo or brand name has no contrast requirement. Brand guidelines don't exempt anything else, so a pale brand color used for body copy still has to pass. Criterion 1.4.1 (Level A) adds that color can't be the only way information is shown, so an error state needs a label or icon as well as red.
Specifying colors for screen and print
Each color needs a value for every medium it appears in. RGB and HEX describe screen color. A HEX code such as #1A4D8F writes an sRGB color as three pairs of hexadecimal digits for red, green and blue. CMYK values describe four-color process printing in cyan, magenta, yellow and black ink. A spot color is a single ink, pure or mixed, printed in one run.
Some printed color-matching guides place each spot color beside its closest CMYK simulation, with sRGB and HEX values printed beneath it, so the print and screen versions can be compared side by side.
Writing the palette into brand guidelines
The color page of a brand guide lists each color's name and role, its HEX, RGB and CMYK values, any spot ink reference, and the text colors approved on top of it with their contrast ratios. Recording the approved pairings once spares every new designer from testing the same combinations again.
Frequently asked questions
How many colors should a brand have?
There's no fixed number. One common structure is one or two primary colors, one or two secondary or accent colors, and neutrals such as white, gray and black. Tints and shades of the core colors add more range.
What is the 60-30-10 rule?
It's a rule of thumb from interior design that designers also use to balance a palette across a layout. The dominant color covers about 60% of the visual space, secondary colors about 30% and the accent about 10%. The accent share is meant for calls to action and alerts.
Do logos have to meet WCAG contrast ratios?
Text that is part of a logo or brand name has no contrast requirement under WCAG 2.2. Where a logo acts as a link or other control, the W3C recommends using a version with enough contrast if the brand guidelines allow one.
What's the difference between HEX, RGB and CMYK?
HEX and RGB describe the same screen color in two notations. RGB gives red, green and blue values from 0 to 255, and HEX writes each value as a pair of hexadecimal digits. CMYK describes printed color as amounts of cyan, magenta, yellow and black ink, so a palette needs both sets of values.
