Tools
How to Choose a Brand Color Palette
How to choose a brand color palette that scales from website to product. A practical 7-step process with roles, contrast checks, and system rules.
Contents
Introduction
Most brand color palettes start in the wrong place: a moodboard of pretty combinations.
A scalable brand palette starts with decisions about roles, contrast, and memory — not preferences. You are not choosing colors. You are designing a system that has to work on a white website, a dark app screen, a tiny favicon, a black t-shirt, and an investor deck — without losing meaning or hierarchy.
At Designing Dots, we pick palettes by how they function under stress. The brands that look premium across touchpoints have a system behind the colors, not just good taste.
This is the 7-step process we use.
Step 1: Define constraints before inspiration
Before you open Are.na or Coolors, lock constraints.
- Category constraint: What palette would be disqualifyingly unfit? (e.g., neon on dark for a private bank). This removes blind spots early.
- Product constraint: What are your UI neutrals and semantic colors? Your brand palette must map into product without introducing new action colors.
- Accessibility constraint: All text-on-color combinations need at least 4.5:1 contrast for AA. If you need 3:1 for large headlines only, note it as exception, not rule.
- Production constraint: Will this be embroidered, printed on recycled kraft, anodized? Some bright synthetic colors fail in physical.
Constraints don't limit creativity. They give you a real brief.
Step 2: Choose your base strategy
A durable palette is built on proportion, not number of colors. Use the 60-30-10-10 model:
The 60-30-10-10 Model
- 60% Base: Dominant neutral field — white, warm gray, or near-black — that sets the editorial tone.
- 30% Core: Your primary brand signal. One hue family, with 3-5 tonal variants.
- 10% Action: High-contrast accent reserved for primary CTAs and focus moments.
- +10% Support: Secondary nuance — can be a contrasting hue, pattern token, or gradient used intentionally.
Why this works: It forces hierarchy. When everything can be brand-colored, nothing is.
Example: Base = Off-white #FAF7F2 + Charcoal #111827, Core = Ink Blue #173A5A with variants, Action = Citrus #FF5A2F, Support = Sandstone #E7DDD0.
Step 3: Select hue by positioning, not personal preference
Use this filter:
- What must we signal to win? (Competent, joyful, rebel, premium, caretaker, etc.)
- What signals are already owned by competitors? Plot them and avoid collisions unless you can own execution better.
- What is the distinctive memory hook? The one thing people will remember in 5 seconds.
At Designing Dots, we've seen that the strongest small brand insight is often negative space: B2B tool that chooses editorial beige and black when everyone is bright blue SaaS signals confidence through restraint.
Test three directions, not ten:
- Direction A — Credible: Aligned with category expectations, differentiated through execution.
- Direction B — Contrarian: Intentionally opposite of category to stand out, needs stronger proof to earn trust.
- Direction C — Human: Warmer, more editorial, built for voice and content.
Step 4: Build tonal range, not just swatches
A palette of 5 flat HEX values is not a system. For each hue family, build a scale.
For Core and Action:
- 50 (lightest background tint), 100-300 (subtle backgrounds), 500 (base), 700-900 (pressed/hover/dark mode).
For Base:
- White to Gray 50-900 with attention to warm vs. cool undertone. Warm grays feel human; cool grays feel technical. Pick one family and stick to it.
Checks:
- Does your Core 500 pass AA contrast on white AND on Base lightest?
- Do you have a readable inverted version for dark mode? (Core 200 on charcoal base)
- Are Action hover states defined or do developers invent them later?
This is where brands break in product. Without defined tonal scales, developers create 12 new blues during sprint.
Step 5: Assign roles and write usage rules
Each color must have a job. Document it.
Role definitions:
- Text primary/secondary/disabled — which gray values.
- Background primary/secondary/sunken.
- Border default/strong.
- Action primary/secondary/destructive/focus ring.
- Data viz palette — distinct from brand palette to avoid mixing marketing and analytics colors.
Usage rules example:
- Action color never used as background fill for large sections, only for buttons and inline highlights.
- Core 500 never used for long paragraphs.
- Support color never used for CTAs, only for illustration backgrounds and dividers.
This document is what allows a non-designer marketer to build a deck that still looks on-brand.
Step 6: Stress test on real assets
Don't approve a palette in a style tile. Approve it on:
- Homepage hero on mobile and desktop, light and dark
- Pricing table with 3 tiers and comparison rows
- Case study quote card
- Sales deck cover and data slide
- Social post and favicon 16px
- T-shirt or tote if relevant
Ask: Where does hierarchy break? Where does Action compete with Core? Where do we lose readability?
We also run a desaturation test: put all assets in grayscale. If structure collapses without color, color was doing too much work.
Step 7: Document and govern
Your final deliverable should be:
- Palette card with HEX, RGB, CMYK, Pantone (if needed), WCAG contrast notes.
- Usage matrix showing allowed pairings (text on background).
- Do / Don't examples: correct and incorrect usage cropped from actual assets.
- Token mapping for product handoff: e.g., --color-action-primary = Citrus 500.
- Governance note: Who approves new colors? What is process to add one? Default answer should be we don't.
At Designing Dots, we lock new palette introductions for 6 months after launch. It forces the team to explore within system instead of expanding it.
Why this matters for startups
Early-stage teams often choose a palette that works for website launch but fails on second-order uses: investor updates, merch for events, integration marketplace listing, or product UI. Rebuilding palette at 20 employees costs weeks because colors are in code, swag, and templates.
A system built with base + core + action + support scales because it anticipates those uses. It also speeds up design velocity: designers stop debating which blue to use and start using tokens.
Common mistakes
- Starting with gradient. Gradients are texture, not identity. Build solid palette first, then define gradient rules if needed.
- Five primary colors. If you have five heroes, you have no hero. It will also never be memorable.
- Brand color = product action color mismatch. Marketing uses one blue, product uses another. Unify or make distinction explicit and documented.
- Ignoring dark mode. If you design light only, you end up inventing a second palette post-launch.
- No contrast check on action color. That bright, distinctive orange you love fails on white button text. Action colors need two variants or paired text colors.
Designing Dots Approach / Framework: Memory + Function Test
Every palette we deliver must pass two tests:
Memory test: Show website hero for 5 seconds to someone who matches ICP. Hide it. Ask what color the brand was. If they can't answer, palette is not distinctive enough.
Function test: Give a non-designer your guidelines and ask them to build a one-pager. If they produce an off-brand asset in 20 minutes, guidelines failed, not them.
When a palette passes both — memorable and governable — it scales.
Key Takeaways
- Choose constraints before inspiration: category, product UI, accessibility, and production.
- Use 60-30-10-10: Base 60%, Core 30%, Action 10%, Support +10% to enforce hierarchy.
- Build tonal scales and assign explicit roles, not just HEX values.
- Stress test on real assets across light/dark, mobile/desktop, and physical if relevant.
- Document with pairings, tokens, and do/don'ts — and lock additions for 6 months.
Next Steps / Internal Ecosystem
After palette selection, run it through the Brand Audit Checklist to check consistency across touchpoints and through Color Psychology in Branding to ensure your signal matches positioning.
If your audit shows inconsistency despite a good palette, the problem is governance, not color.
Keep going with Color Psychology in Branding: How to Choose Colors That Fit Your Brand and How to Audit Your Brand: A Complete Brand Audit Checklist — or put it into practice with DOTS COLOR before your next review.