Colour Palette

What Is a Colour Palette?

A colour palette is the defined set of colours a brand or product uses, with exact values for each medium and rules for which colour does what. A complete palette specifies values in HEX or RGB for screens, CMYK and often Pantone for print, and names each colour by its role.

A palette is more than a list of swatches. It sets proportions (how much of each colour appears), pairings (which colours can sit on which backgrounds) and functions (which colour signals a link, an error or a call to action). Without those rules, the same five colours can be combined into layouts that feel unrelated or fail accessibility checks.

Why a Colour Palette Matters

• Recognition: Using the same colours consistently across the website, packaging, signage and social media makes the brand easier to recognize.
• Usable interfaces: In a website or app, colour indicates state and action. A clear palette keeps buttons, links and alerts predictable.
• Accessibility: WCAG requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text and essential interface elements. Checking pairings once, in the palette, saves fixing them on every page.
• Consistent production: Defined print and screen values stop colours drifting between a printer, a sign maker and a web developer.
• Faster decisions: Designers and developers work from tokens instead of picking near-matches by eye.

Key Components of a Colour Palette

1. Primary or accent colour: The most distinctive colour, used sparingly for emphasis, calls to action and brand moments.
2. Neutrals: Darks, lights and greys for text, backgrounds and borders. On most sites, neutrals cover far more area than the brand colour.
3. Secondary colours: Optional supporting colours for illustration, charts or product categories, chosen to work with the primary rather than compete.
4. Functional colours: Success, warning, error and information states, which should be clearly distinct and never rely on colour alone to carry meaning.
5. Values for each medium: HEX/RGB for digital, CMYK and Pantone for print, with notes where a screen colour cannot be reproduced exactly in print.
6. Usage rules: Approved text and background pairings with their contrast ratios, rough proportions, and light and dark mode variants.

Common Colour Palette Mistakes

• Testing swatches, not pairings: A colour can look strong on its own and still fail contrast as text on your background.
• Too many brand colours: Each extra colour adds combinations to manage and dilutes recognition.
• Using the accent for everything: When headings, icons, links and buttons all share the accent, nothing stands out.
• Relying on colour alone: Red borders on form errors are missed by people with colour vision deficiencies; add text and icons.
• Screen-only values: Bright digital colours, especially vivid oranges and blues, often shift in CMYK. Define print values deliberately.

Best Practices for a Colour Palette

1. Start from the brand strategy: Choose colours for the positioning and audience, then check how they sit against competitors.
2. Check every pairing: Record contrast ratios for each text and background combination you plan to use, and mark which uses are allowed.
3. Define tokens by role: Name colours by purpose, such as --colour-accent or --colour-text, so themes and dark mode can change values without rewriting components.
4. Build tints and shades systematically: If you need lighter or darker steps, generate them consistently and test them, rather than picking them ad hoc.
5. Proof in print: Request printed proofs for key colours before large runs, and record the approved values.

Colour Palette at PerfectPixels

Our own palette is deliberately small: Ember (#FF4A1C) as the accent, Ink (#0B0B0A) and Graphite (#2E2E2B) as darks, and Paper (#F1F0EB) as the light neutral. Checking pairings shaped how we use it. Ember on Ink measures about 5.9:1, so it works for text on dark backgrounds, while Ember on Paper is just under 3:1, below even the large-text minimum, so on light backgrounds we use Ember for fills and accents, and a deeper Ember (#C4250A, about 5:1 on Paper) whenever it has to carry text or thin lines. We build palettes the same way for clients as part of brand identity work and document them in brand guidelines and design tokens.

Frequently Asked Questions

How many colours should a brand palette have?

Many strong brands work with one or two signature colours plus a set of neutrals, and add secondary or functional colours only where they have a clear job. The right number depends on what the brand needs to communicate, such as product categories or data visualization.

What does colour psychology tell me about choosing brand colours?

Colour associations are real but depend heavily on culture, industry and context, so treat general claims with caution. Distinctiveness within your market, consistency and accessible contrast tend to matter more than any single colour's supposed meaning.

Do I need different colours for dark mode?

Usually you need adjusted values rather than a new palette. Pure white text on pure black can feel harsh, and saturated accents can look different on dark backgrounds, so define dark mode tokens and recheck contrast for each pairing.

Related Resources

• Brand Identity
• Brand Guidelines
• User Interface (UI)
• Dark Mode Design

Further reading: Understanding use of colour (WCAG 2.2) — W3C WAI.