By Mehdi HassanHow do you choose brand colors?
You choose brand colors by running two passes. The first pass is expressive: you pick a primary hue and a small set of supporting colors that fit your personality and look different from your competitors. The second pass is practical: you build tonal scales, test text contrast against accessibility guidelines and assign colors to interface states such as buttons, links, errors and focus rings.
Most color advice stops after the first pass. It talks about what blue means and what orange signals, hands you five swatches and wishes you luck. Then a developer tries to use those swatches for a disabled button, a warning banner and a chart, and the palette falls apart. This guide is the hub for our writing on brand color and type, and it's built around both passes.
The framework at a glance:
Gather inputs
Positioning, personality positions and a line-up of competitor colors.
Pass one: choose for personality
Pick a primary hue and temperature that express the brand and contrast with the category.
Structure the palette
Assign roles: primary, secondary, accent, neutrals and state colors.
Pass two: test for use
Build tonal scales, check text contrast, define UI states and dark mode.
Document and ship
Turn the palette into named tokens and guidelines, then roll it out across website and product.
Why should you pick brand colors twice?
You should pick brand colors twice because the qualities that make a color expressive are often the qualities that make it hard to use. A bright, saturated brand color can look wonderful on a logo and fail contrast as text on white. A soft pastel can feel calm in a moodboard and disappear completely as a button background.
The two passes ask different questions:
Pass one: personality | Pass two: use | |
|---|---|---|
Main question | Does this feel like us and not like them? | Does this work for every job a color has to do? |
Inputs | Positioning, personality, competitor colors | Text sizes, UI components, states, dark mode |
Output | A primary hue, temperature and supporting colors | Tonal scales, tested pairs, state colors, tokens |
Who leads | Brand designer and founders | Product designer and developer |
Typical failure | Picking the category default | Shipping swatches with no scales or states |
Running the second pass doesn't mean giving up the first. It usually means keeping your hue and adjusting its lightness for text, adding a darker or lighter tone for interface use, and choosing a separate accent for actions. The brand character survives. What changes is that the palette now works in a product, not only on a business card. Our guide to accessible brand colors shows the second pass in detail.
How do you choose colors for brand personality?
You choose colors for brand personality by starting from your positioning and personality traits, then picking a hue, a temperature and a saturation level that express them. Temperature and saturation often matter more than the hue itself: a warm, muted green and a cold, electric green say very different things.
Three inputs make the first pass much easier:
- Personality positions. If you've scored your brand on sliders such as playful to serious or minimal to rich, translate them directly. Serious and established tends toward deeper, less saturated tones. Playful and new tends toward brighter, higher-saturation color.
- A competitor line-up. Put your closest competitors' homepages side by side and note their dominant colors. If most of them share a hue family, that hue is the least distinctive choice available to you.
- Where the color will live. A developer tool that lives in dark-mode terminals and a wellness app on white backgrounds need different starting points.
Then explore. Generate three or four distinct directions, each with a primary hue and one or two supporting colors, and look at them on real layouts, such as a homepage hero, a pricing card and a product screen. Swatches on a blank canvas are misleading. Color reads differently next to type, photography and white space.
How does brand color psychology fit in?
Brand color psychology fits in as a weak, culture-dependent signal, not as a rule. Color associations exist, but they vary across cultures, industries and contexts, and the popular charts that say "blue means trust" or "red means urgency" are much more confident than the evidence behind them. We take that argument apart in color psychology in branding.
What matters more is contrast with your category. Buyers learn what a category looks like, and a color that breaks the pattern helps you get noticed and remembered. That's the real reason so many software companies share a palette, which we explore in why tech brands are blue: it's the safe, familiar choice, and that safety is exactly what makes it forgettable.
Use associations as a sanity check, not a starting point. If you sell to hospitals and your chosen red looks like an emergency alert in context, adjust it. If you sell to banks and a playful pink feels risky, test it with real buyers before deciding either way. Some of the most memorable brands chose a color that a meaning chart would have ruled out.
What should a brand color palette include?
A brand color palette should include colors with defined roles: one primary, one or two secondary colors, an accent for actions, a set of neutrals and a small group of semantic colors for states such as success, warning and error. Roles matter more than the number of colors, because they tell everyone where each color goes.
Role | What it's for | Typical share of a layout |
|---|---|---|
Primary | Recognition: logo, key surfaces, brand moments | Noticeable but not dominant |
Secondary | Variety: illustrations, section backgrounds, charts | Supporting |
Accent | Action: primary buttons, links, highlights | Small and deliberate |
Neutrals | Structure: text, backgrounds, borders, dividers | Most of the screen |
Semantic states | Meaning: success, warning, error, info | Only when needed |
The surprise for many founders is how much of a good layout is neutral. Text, backgrounds and borders do most of the work, so your neutrals deserve as much care as your primary. A slightly warm or cool gray, chosen to match the primary, makes the whole palette feel intentional. Our guide to brand color palette structure explains each role and the ratios we use, with interface examples.
Should the accent be the same as the primary color?
Sometimes, but often it shouldn't. If your primary is a light, soft or very saturated color, it may not have enough contrast to carry button text or links. In that case, keep the primary for brand moments and choose an accent, often a darker tone of the primary or a complementary hue, for actions.
The practical rule: the accent color must pass contrast with its label text, and it must be clearly different from every semantic state color. A brand whose accent is red will struggle to show errors clearly, which is worth knowing before the logo is final.
How do you test brand colors for accessibility and UI states?
You test brand colors for accessibility by checking real text and interface pairs against WCAG contrast requirements, then extending each color into a tonal scale and assigning tones to interface states. This is the second pass, and it's where most palettes need adjusting.
The W3C's Web Content Accessibility Guidelines set the benchmark most teams design to. WCAG's contrast minimum asks for a contrast ratio of at least 4.5:1 for normal body text and 3:1 for large text, and WCAG also asks for 3:1 for essential interface components such as input borders and focus indicators. Test the pairs you'll actually use: white text on your accent button, your primary as link text on white, gray body text on your background.
- Build a tonal scale for each color. Create a range of tones from very light to very dark, typically around 10 steps. This gives you options for backgrounds, borders, hover states and text.
- Test every text pair. List the combinations your website and product will use and check each one. Fix failures by moving to a darker or lighter tone on the scale, not by changing the hue.
- Define interaction states. Default, hover, pressed, focus and disabled for buttons and links. Each state should be clearly different, and focus rings must be visible.
- Add semantic colors. Success, warning, error and info, each with its own scale, chosen so they never clash with or get confused for the accent.
- Check dark mode. If your product has a dark theme, test the same pairs on dark backgrounds. Saturated colors often need a lighter, less intense tone there.
How do brand colors become design tokens?
Brand colors become design tokens when each tone and role gets a name that designers and developers both use, such as color-accent-600 or color-text-muted, and those names are defined once in code and in Figma. Tokens are what keep the palette consistent as the website and product grow.
A good token setup has two layers. The first layer names the raw tones in each scale. The second layer names their jobs: text, background, border, action, focus, error. Components only use the second layer, so if you later adjust the accent, you change it in one place and every button follows. Our guide to brand design tokens walks through naming and setup.
Tokens matter most for companies whose product is the brand. A developer brand lives in docs, terminals and dashboards far more than on billboards, and its colors have to work in syntax highlighting, status badges and dark mode. Designing those uses from the start is cheaper than retrofitting them after launch.
How do brand colors work with fonts and your logo?
Brand colors work with fonts and your logo as one system, so choose them together rather than one after another. A heavy, condensed typeface can carry a bold, saturated color; a light, delicate typeface may need a deeper, calmer one to stay readable. The logo has to work in your primary color, in one color and reversed out of a dark background.
- Fonts. Our guide on how to choose brand fonts covers readability, performance and licensing alongside personality.
- Pairing. If you use two typefaces, font pairing explains how to choose a pair that works with your palette rather than fighting it.
- Licensing. Before you commit to a typeface, check font licensing for web, app and product use. A font you can't use in your product breaks the system.
- Free options. Many strong brands use open-source type. Our list of free fonts for branding is a good place to start.
- Logo. Test color directions on the real logo, not a placeholder. Our guide on how to choose a logo covers how to decide between directions.
A practical test: put your headline font, body font, logo and full palette on a single homepage hero mock-up. If any one of them feels like it came from a different brand, adjust it now. It's much harder to fix after the guidelines are written.
What are common mistakes when choosing brand colors?
The most common mistakes when choosing brand colors are picking the category default, choosing from swatches instead of real layouts, and skipping the accessibility pass. Each one is easy to avoid if you know to look for it.
Mistake | What happens | How to avoid it |
|---|---|---|
Choosing the category default | You look like a cheaper version of the leader | Line up competitors before you pick a hue |
Too many brand colors | Layouts look busy and inconsistent | Assign roles; keep one primary and one accent |
No tonal scales | Developers invent tints and the UI drifts | Build a scale for every color before handoff |
Accent equals error red | Users can't tell actions from problems | Separate the accent from all state colors |
Swatch-only approval | Colors look different on real pages | Approve colors on hero, pricing and product mock-ups |
Ignoring dark mode | Colors glow or vanish on dark backgrounds | Test every key pair in both themes |
There's one more mistake worth naming: treating color as the whole brand. A distinctive palette on top of vague positioning still produces a forgettable company. Color helps buyers recognize you once they've decided you're credible, which is why startup credibility branding starts with proof and clarity before visual flair.
How do you roll out new brand colors on your website?
You roll out new brand colors by documenting them in your guidelines, updating tokens in code and design files, and changing the website and product together so buyers never see two brands at once. The website is usually the biggest single job, especially if colors are hard-coded across many pages.
Start with the brand guidelines: roles, tonal scales, tested pairs and do's and don'ts. Then update the site. On a modern build with tokens or a theme, a color change can be quick. On an older site where colors were set page by page, it's often a sign the site is due for a rebuild, and the best platform for a marketing website depends on how often your team will change things after launch.
If you're comparing builders as part of a refresh, our Framer vs Squarespace comparison covers how each handles styles, and our guide to hiring a Webflow or Framer migration agency explains what to ask if you're moving platforms. After launch, watch whether the new accent still makes your calls to action easy to spot. A CRO audit is a structured way to check that the refresh didn't make your key buttons harder to find.
Read next, by where you are in the process:
If you're… | Read next |
|---|---|
Deciding whether color meanings matter | |
Wondering why your category looks the same | |
Assigning roles to your colors | |
Testing contrast and UI states | |
Handing the palette to developers | |
Choosing type to go with your colors |
