How to build a brand colour system, not just a palette

Short answer: A palette is a set of swatches; a colour system is the rules for using them — exact values in every format (HEX, RGB, CMYK, Pantone), which colour plays which role, contrast and accessibility, tints and dark mode, and documentation that travels. Build the rules, not just the colours, and keep them in one current place.

A palette is a set of colours someone chose. A system is a set of rules for using those colours: which colour goes where, in which format, at which weight, against which backgrounds, and under what conditions any of those rules can flex.

Most brands have a palette. Very few have a system. The difference shows up the first time the brand is used across more than one context, when someone is deciding which blue goes on the website versus the packaging versus the slide deck, and the guidelines say "midnight blue" without a hex code, an RGB value, or any instruction about what midnight blue is supposed to do.

Step 1: Lock the values in every format

The first job of a colour system is precision. Every colour in the brand needs its exact values documented across every format that will be used.

For digital: hex (for web and most design tools) and RGB (for screen-specific contexts). For print: CMYK and, for high-volume or brand-critical print, a Pantone PMS reference. For design software: check what your primary tool uses and make sure those values are set there too, not eyeballed from a screenshot.

The reason this matters: hex and RGB are device-rendered and will shift slightly depending on the display. CMYK is ink-mixed and will shift depending on the print process. A brand that looks coherent on a MacBook and coherent on a printed brochure has had those shifts accounted for. One that has not will look inconsistent in ways no one can easily name.

Document the values in a table. Name each colour (something that describes its use, not its appearance: "primary", "secondary accent", "background neutral" are more durable than "coral", "slate", "off-white"). List every format value beside the name.

Step 2: Define the roles each colour plays

Colours need roles, not just names. A role tells anyone using the brand what a colour is for, which prevents the problem of people choosing freely from the palette when they should be constrained to one or two options.

Define at minimum: the primary colour (the one that leads, used most often and first), the secondary colour or colours (supporting, used to accent or differentiate), the neutral or background tones (what everything sits on), and any functional colours (success, warning, error states for digital products; call-out colours for presentations).

Then write the rule for each. "Primary blue: used for headlines, primary buttons, key graphic elements. Not used as a background colour except in large-format hero contexts." That sentence is more useful than a swatch.

Step 3: Set the contrast and accessibility rules

Colour accessibility is not optional for any brand that appears on screen. The Web Content Accessibility Guidelines (WCAG) specify minimum contrast ratios for text against backgrounds: 4.5:1 for normal text, 3:1 for large text. Failing these ratios means your brand is illegible to a meaningful portion of users.

For each colour combination you will actually use, check the contrast ratio. There are free tools for this; a hex input gives you the ratio instantly. Document the approved pairings (primary blue text on white background: passes AA), the pairings that fail (light yellow text on white: fails), and the contexts where a failing combination might still appear for decorative purposes only, with no text over it.

This step is not only about accessibility. It prevents the "I'll just put the text in this colour because it looked fine on my screen" decision that creates legibility problems at scale.

Step 4: Handle tints, shades, and dark mode

Most brands will at some point need to use a colour at reduced opacity, a lighter tint, or a darker shade, whether for hover states, background fills, or dark mode variants.

Define how this works before someone improvises. Specify the tint steps you endorse (20%, 40%, 60% opacity of the primary, for example), the dark mode equivalents of the main palette, and whether shades and tints are part of the system or whether they require a design decision. A system with no guidance on tints will develop its own informal tints over time, and they will not be consistent.

Step 5: Document it so it travels

A colour system is only useful if the people who need it can find it and use it. Documentation that lives in one designer's Figma file is not a system. It is a single source that breaks when the designer leaves.

The documentation needs to include: the full value table, the role definitions, the approved pairings and the reasoning behind them, and at least one visual example of each colour in use. It needs to be in a format that a developer, a freelancer, a new hire, and an AI content tool can all work from, which means plain text and numbers alongside the swatches.

Where you hold this matters. A PDF that gets emailed around will be out of date within a year. The system should live somewhere that can be updated and accessed from a single link.

Why does a colour system outlast a palette?

A palette chosen by a good designer can be beautiful. Without a system around it, it will be beautiful for about six months, and then it will be interpreted, stretched, supplemented, and gradually replaced by whatever the next person decided looked close enough.

A system holds because it answers the questions before people have to ask them. Which blue? This one. At what contrast? This ratio. On which background? These ones. The decisions are made once, documented, and available to everyone who needs them.

Brand Atlas holds your colour system in the Colour System section of your brand, in every format, with every rule, and ATLAS.md makes the full system available to every person and AI tool that needs a brief. Your brand is worth protecting, starting with the exact values. See how it works.

Frequently asked questions