Brand Palette Guide

How to build a complete brand color system — with defined roles, documented tokens and accessibility-verified combinations.

What Is a Brand Palette?

A brand color palette is the formal set of colors that define a brand's visual identity. It is not just "a few colors we picked" — it is a documented system with defined roles, tested combinations, and rules for when to use each color.

Professional brand palettes typically include 5–7 core colors plus an extended range of tints and shades for practical use.

The Seven Core Brand Colors

1. Primary

The single most recognizable color of the brand. Appears in the logo, primary CTAs, and as the dominant brand accent everywhere. Every other color supports this one.

2. Primary Dark

A darker shade of the primary, typically 15–20% lower in lightness. Used for hover states, active states, and text on light backgrounds.

3. Primary Light

A lighter shade of the primary, typically 40–60% lighter. Used for backgrounds, tints, and selected states. Often paired with dark text for readability.

4. Secondary

A supporting color that adds variety without competing with the primary. Usually 30°–120° offset on the hue wheel from the primary. Used for secondary buttons, secondary highlights, and supporting brand moments.

5. Accent

A high-attention color used sparingly. Usually complementary to the primary (180° offset). Reserved for alerts, notifications, and elements that must not be missed.

6. Neutral Dark

The darkest neutral in the system. Used for body text and icons on light backgrounds. Often a very dark tint of the primary hue rather than pure black.

7. Neutral Light

The lightest neutral in the system. Used for backgrounds, surfaces and subtle dividers. Often a very light tint of the primary hue.

Beyond the Seven: The Extended Palette

Real projects need more than seven colors. The extended palette adds:

  • Full 50-900 scale for the primary color
  • Full 50-900 scale for neutrals
  • Semantic colors: success, warning, danger (5 shades each)
  • Brand color background tints: 3-5 very light variants of the primary

The Brand Color Palette Generator produces the full system automatically from a single base color.

Brand Palette Construction Steps

Step 1: Choose the primary color

  • Brand personality: Match the color psychology to the brand's intended feel
  • Differentiation: Study competitors and choose a color that stands out
  • Versatility: The color should work in logos, icons, small text, large areas
  • Print-safety: Ensure the CMYK equivalent is acceptable

Step 2: Derive the supporting colors

From the primary, derive secondary and accent using harmony rules. Split-complementary is often the best base for a primary + secondary + accent combination because it provides strong but controllable contrast.

Step 3: Create neutrals

Tint the primary hue at very low saturation (3–10%) to create neutrals that harmonize with the brand color. This is what makes a design feel cohesive rather than assembled.

Step 4: Expand to scales

Expand each core color into 5–10 steps for practical use. This gives designers and developers the range they need without inventing new colors.

Step 5: Verify accessibility

Test every text-on-background combination your design will use. Any pair that does not pass WCAG AA needs adjustment — either the text or the background.

Step 6: Document the system

Every brand palette should have a document that specifies:

  • Exact hex codes for every color
  • RGB and CMYK equivalents (for screen and print)
  • The role of each color (what it is for, what it is not for)
  • Approved combinations (text on background)
  • Ratio guidance (60-30-10 or similar)
  • What not to do (color pairings to avoid)

Color Psychology Quick Reference

  • Red: Energy, urgency, passion, appetite. Food, sports, entertainment.
  • Orange: Friendly, playful, enthusiastic. Consumer brands, retail, food delivery.
  • Yellow: Optimistic, sunny, attention-grabbing. Logistics, food, children's products.
  • Green: Natural, growth, wealth, health. Finance, sustainability, wellness.
  • Blue: Trust, stability, calm, corporate. Finance, tech, enterprise.
  • Purple: Luxury, creativity, mystery. Beauty, premium goods, creative tools.
  • Pink: Playful, feminine, youthful. Beauty, fashion, consumer apps.

These are conventions, not universal laws. Cultural context matters — red means luck in China but danger in much of the West.

Common Brand Palette Mistakes

Starting with the wrong base color

Many brand palettes fail because the base color is chosen for personal preference, not market fit. Study the industry before committing.

No documented roles

If the palette is just "here are 8 colors", designers will use them inconsistently. Every color needs a defined role.

Colors that clash at boundaries

Adjacent brand colors (primary next to secondary) may look fine in isolation but vibrate when placed together. Test combinations in real layouts, not just isolated swatches.

Not accessible at scale

A brand color that passes contrast at 48pt headers may fail at 14pt body text. Test at the actual sizes the color will be used.

No print equivalents

If the brand appears in print, the CMYK equivalents matter. Not every RGB color is reproducible in CMYK — check before finalizing.

Brand Palette Documentation Template

A complete brand palette document includes:

PRIMARY
  HEX: #155EEF
  RGB: rgb(21, 94, 239)
  CMYK: cmyk(91%, 61%, 0%, 6%)
  Role: Brand color, primary CTAs, links
  Not for: Body text, large backgrounds

PRIMARY DARK
  HEX: #0F4BD1
  Role: Hover states for primary elements

PRIMARY LIGHT
  HEX: #EAF1FF
  Role: Primary-tinted backgrounds, selected states

SECONDARY
  HEX: #7C3AED
  Role: Secondary buttons, supporting highlights
  Not for: Primary CTAs

ACCENT
  HEX: #EC4899
  Role: Alerts, notifications, high-attention elements
  Not for: Body text, large areas

NEUTRAL DARK
  HEX: #15243B
  Role: Body text, primary text color

NEUTRAL LIGHT
  HEX: #F8FAFF
  Role: Page background, subtle surfaces

When to Update a Brand Palette

Brand palettes are not static. Revisit when:

  • The brand positioning changes significantly
  • The product expands to new media (print, mobile, AR, etc.)
  • Accessibility standards evolve (WCAG 2.2 now, WCAG 3.0 in future)
  • Competitive landscape shifts dramatically
  • The palette has been stretched beyond its original design intent

Most brands update their palette every 5–10 years. Frequent rebranding is rarely effective.

Related Tools

Frequently Asked Questions

Open Brand Palette Generator →