Brand Colours: Build Recognition Through Consistency

People do not experience a brand colour as an isolated swatch. They meet it on a sign, a social post, a button, a receipt and a help page. Recognition grows when a small set of colours appears in the same jobs often enough to become familiar. The aim is not to own a feeling or to claim that one hue works everywhere. It is to build a colour system that people can learn, use and read.

Start with a recognisable colour job

A brand palette should say what each colour is for before it says how attractive the collection looks. Begin with one distinctive lead colour, then give it a limited, repeatable job: the main call to action, key navigation state, packaging detail or campaign marker. A recognisable colour used everywhere becomes visual noise; one used in predictable, high-value moments becomes a useful cue.

Add a dark ink, a light surface and one supporting accent. This gives the lead colour space to stand out while covering the unglamorous but important work of reading, hierarchy and layout. The supporting colours should extend the system, not compete to become a second logo.

Lead: the signature colour for the most important branded moments and primary action.
Ink: a dependable dark colour for long-form text, icons and dense navigation.
Surface: a light or dark base for pages, cards and generous empty space.
Support: a secondary colour for selected states, charts or lower-emphasis controls.
Accent: a scarce highlight for badges, campaigns or a single local emphasis.

Write this as a one-page decision sheet. Include the hexadecimal value, role, approved foreground pair and examples of where the colour must not be used. This avoids the familiar drift where a bright marketing colour slowly becomes body text, error feedback and every button simply because it is available.

Make consistency do the recognition work

Use the same lead colour in the same kinds of moments across channels. For example, a service could reserve a deep blue for sign-in, primary buttons and active navigation, while its printed information cards use the blue only for headings and wayfinding. The page layout, type and photography can change around that cue without breaking recognition.

Test this rule on three deliberately different applications: a small mobile screen, an email or social asset, and a physical or large-format touchpoint. If the colour only works in a polished mock-up with a large logo, the system is too dependent on context. If it still identifies the primary action at small size, beside photography and in a stripped-back layout, it is doing a useful job.

Consistency is also why a fixed role is more durable than a list of names such as “sunrise”, “ocean” and “moss”. Names may help a creative team remember a palette, but a developer and content editor need to know whether the colour is primary, on-primary or surface. Google’s Material guidance uses role pairs such as primary and on-primary for this reason: the role describes the relationship between a component and the colour placed on it.

Choose accessible pairs, not just attractive swatches

Contrast is a property of two colours in their actual context, not a badge a brand colour carries by itself. For normal text, WCAG 2.2 Level AA requires at least 4.5:1 contrast against its background. Large text may use 3:1, but only when it is at least 18pt normal weight or 14pt bold, approximately 24px and 18.5px. Treat the 4.5:1 rule as the normal text default, particularly for labels, prices, form help and navigation.

Here are two copyable pairs with calculated contrast ratios. Use the first for body text on a warm light surface, and the second for white text on a solid blue primary button:

/* #0B1F33 on #FFF4E8 = 15.39:1 */
--colour-ink: #0B1F33;
--colour-surface: #FFF4E8;

/* #FFFFFF on #1D4ED8 = 6.70:1 */
--colour-on-primary: #FFFFFF;
--colour-primary: #1D4ED8;

A bright signature colour may be excellent for a shape, border or illustration but fail as small text on white. Do not force it into every role. Keep the hue for fills or large graphic moments, then use a darker related shade for text links or select a neutral ink. Although text inside a logo or brand name has a contrast exception, ordinary interface text does not become exempt because it follows a brand guide.

Also avoid relying on colour alone for a result or instruction. A field that is only outlined in a status colour can leave people unsure what changed. Pair the colour with a clear message, an icon or a pattern, and ensure the state has a visible focus or border treatment. This makes the interface clearer even for people who see the colour perfectly.

Turn the palette into tokens

Tokens keep the palette consistent as a product grows. CSS custom properties allow a value to be defined once and reused; semantic names make a later palette change safer than searching for hexadecimal codes. Keep raw values separate from role tokens. A role can then change without rewriting every component.

:root {
  --brand-blue-700: #0058A3;
  --ink-950: #0B1F33;
  --paper-50: #FFF4E8;

  --colour-primary: var(--brand-blue-700);
  --colour-on-primary: #FFFFFF; /* #FFFFFF on #0058A3 = 7.18:1 */
  --colour-text: var(--ink-950);
  --colour-surface: var(--paper-50);
}

.button--primary {
  background: var(--colour-primary);
  color: var(--colour-on-primary);
}
.card {
  background: var(--colour-surface);
  color: var(--colour-text);
}

Do not name a token after one component unless it can only ever be used there. --colour-primary can serve a button, a selected tab and a progress state; --checkout-button-blue encourages duplication. For a campaign, override a small group of approved role tokens inside the campaign container rather than sprinkling one-off hex codes through templates.

Run a practical palette review

Place the palette on a real screen with a heading, two paragraphs, a form error, a selected control, a disabled control and a primary button. A row of swatches cannot reveal weak hierarchy.
List every foreground and background combination that can meet in normal use. Check each text pair, including hover and selected states, rather than checking only the home-page hero.
Reduce the accent budget. If three different colours all demand attention on the same screen, make two of them supporting tones or remove them.
Check the system without colour: can someone identify errors, required inputs, links and selected states from wording, icons, borders or underlines?
Document the approved pairs and distribute the tokens, not just a PDF of swatches. Review new components against those pairs.

Common pitfalls are using a fashionable pale accent as text, placing live text over photography without a stable overlay, and giving success, warning and error states brand-themed names without plain labels. Another is changing the lead colour for every campaign. Campaign variation can be lively, but retain one stable recognisable cue such as the primary action colour, ink colour or a consistent colour proportion.

Use editorial references with care

Our brand-inspired palette pages are editorial mood boards, not official brand palettes, licences, endorsements or standards. They are useful for studying how a limited lead colour, quiet surfaces and a clear ink can be organised, but they are not instructions to reproduce another organisation’s identity. For instance, compare the warm lead-and-dark-ink structure in Signal Orange with the blue, yellow and charcoal roles in Flat-Pack Morning. For dark interfaces, Community Green for Spotify and Signal Server for Discord show why a light reading colour needs to be planned alongside a vivid signal colour.

Explore the Brand-Inspired Mood Boards and Minimal & Monochrome collections for editorial starting points, then build a system with your own distinct roles and tested pairs. Before release, run every production combination through the contrast checker, or browse all tools for the next step.

Related guides

Suggested palettes

All guides All palettes