How to choose brand colors

Choosing brand colors goes wrong in two familiar ways: picking hues purely by taste with no structure, or picking them from a color-meaning chart that promises emotions it can't deliver (see color psychology in branding for why those charts mislead). This guide takes a third path — a small, role-based system that is legible by design.

Step 1: Define palette roles

Instead of "five colors I like," assign each color a job. A dependable structure is:

• Anchor — your darkest color, used for most text and headings.
• Primary — the signature brand color, used for primary buttons and links.
• Accent — a supporting color for highlights and small emphasis.
• Soft — a light tint for subtle backgrounds and cards.
• Surface — your lightest color, used for page backgrounds.

Roles keep you consistent: everyone knows the Primary is for the main call to action, not decoration. The free color palette generator outputs exactly this five-role structure so you can start from a coherent set rather than a blank canvas.

Step 2: Start from personality

Anchor your choice in your brand's character rather than a trend. If you've chosen a brand archetype, let it steer the mood: calm and credible, bold and high-energy, warm and earthy. Pick a Primary that fits, then build the rest of the roles around it.

Step 3: Make it accessible

This is the step most palettes skip, and it's the one with an actual standard. The W3C's Web Content Accessibility Guidelines (WCAG) 2.1 define minimum contrast ratios so text is readable for people with low vision:

• 4.5:1 — minimum contrast for normal-size body text (Level AA).
• 3:1 — minimum for large text (roughly 24px, or 18.66px bold) and for user-interface components and graphics (Level AA).
• 7:1 — the stricter Level AAA target for normal text, if you want extra headroom.

Check every text-on-background pairing you'll actually use — Anchor on Surface, white on Primary, and so on — with a contrast checker. If a combination fails, darken or lighten one side until it passes. Accessible color isn't a constraint on good design; it's part of it, and it widens your audience.

Step 4: Test in context

Colors never appear alone, so never judge them alone. Preview your palette on real components — a button, a header, a card — and beside your type. The palette generator's live preview card and the mini style-guide generator both exist for this: they show the palette doing its job, not sitting in isolation. Distance-test it too: shrink the preview or step back from the screen to confirm it still reads.

Step 5: Document and lock it

Once it passes, write the palette down: each hex code, its role, and where to use it. This becomes a section of your brand style guide, so the palette survives contact with new teammates, freelancers, and future you. Undocumented palettes drift; documented ones compound.

Quick checklist

1. Assign five roles: Anchor, Primary, Accent, Soft, Surface.
2. Choose a Primary that fits your personality.
3. Verify every text pairing meets WCAG AA (4.5:1 normal, 3:1 large).
4. Preview on real components and at a distance.
5. Document each hex and its role in your style guide.

Follow the steps in order and you'll end up with a palette that's not just attractive but usable — one you can defend and one everyone can read.

Building tints and shades

Five brand colors rarely cover every real interface need — you'll want lighter and darker versions for hover states, borders, disabled buttons, and dividers. Rather than inventing new hues, derive a small scale from each role color by adjusting lightness while keeping the hue steady. A common approach is to generate a few steps lighter and darker than the base, then use those steps consistently. This keeps the palette cohesive: everything still reads as the same color family, just at different intensities.

Two guardrails keep a scale usable. Re-check contrast at each step you'll put text on — a mid-tone that looks fine can quietly fail the 4.5:1 target. And resist adding brand-new colors for one-off needs; almost everything can be solved with a tint or shade of an existing role. When you're happy with the base five, capture them and their key tints in your style guide with hex codes and usage notes so the system survives handoff. If you'd rather start from a curated set than a blank canvas, generate one with the palette generator and adapt it — the roles are already assigned, so you can go straight to checking contrast and building your scale.