Picking colors for a business website is where most non-designers freeze. You open a color wheel, scroll through Pinterest boards, and end up either copying a competitor or defaulting to navy blue “because it looks professional.” Neither approach is a strategy.
After running color audits on dozens of client projects, I’ve built a repeatable framework that removes the guesswork. This guide walks you through exactly how to choose colors for a business website, step by step, using brand personality, audience psychology, and accessibility rules that actually convert visitors into customers.
Why Most Business Websites Get Colors Wrong
Before we get into the framework, here’s what I see go wrong most often:
- Color by emotion: The founder “just likes purple” so the whole site becomes purple.
- Color by competitor: Every accountant uses navy and grey, so a new accounting firm copies the look and disappears.
- Color by trend: A pastel palette borrowed from a 2025 design roundup that doesn’t fit a B2B audit firm.
- Color without contrast: Light grey text on a white background that fails accessibility checks and loses readers over 40.
The framework below fixes all four problems.
The 5-Step Color Framework for Business Websites
Step 1: Define Your Brand Personality in 3 Words
Before opening any color tool, write down three adjectives that describe how you want customers to feel when they land on your site. Not what you sell. How you want to feel.
Examples from real client projects:
| Client Type | 3-Word Personality | Direction |
|---|---|---|
| Tax advisory firm | Calm, precise, modern | Cool blues + clean white + a single warm accent |
| Organic skincare brand | Natural, gentle, honest | Sage green, cream, soft terracotta |
| Fitness coach | Bold, energetic, disciplined | Charcoal, white, electric orange |
If you can’t land on three words, ask three customers how they’d describe working with you. Their words are more honest than yours.
Step 2: Match Personality to Color Psychology (Without Falling for the Clichés)
Color psychology is real but it’s context-dependent. Red doesn’t always mean “urgency” and green doesn’t always mean “money.” Use this as a starting point, not a rulebook:
- Blue: Trust, stability, calm. Works for finance, healthcare, SaaS, legal.
- Green: Growth, wellness, sustainability. Strong for organic, eco, and health brands.
- Red / orange: Energy, appetite, action. Great for food, fitness, retail CTAs.
- Yellow: Optimism, attention. Use sparingly, it strains eyes in large blocks.
- Purple: Creativity, premium. Useful for beauty, coaching, and creative tech.
- Black / charcoal: Luxury, authority. Perfect for premium services and high-end product brands.
- Earth tones: Authenticity, craft. Strong for artisan, hospitality, and lifestyle brands.
Pro tip: Audit your top three competitors. If they all use the same color family, pick a neighboring hue. A unique color in a sea of sameness is itself a positioning tool.
Step 3: Apply the 60/30/10 Rule
This is the rule professional designers actually use. Your palette should split visually like this:
- 60% dominant color – usually a neutral (white, off-white, light grey, or a soft brand tone). This is the background of most of your site.
- 30% secondary color – your primary brand color, used for headers, navigation, and key sections.
- 10% accent color – reserved for buttons, links, and anything you want clicked.
For a recent SaaS client, the palette ended up as:
- 60% #FFFFFF (white background)
- 30% #1F3A5F (deep navy for headers and footer)
- 10% #FF6B3D (warm orange for CTAs only)
Conversion on the main CTA jumped 22% after we restricted the orange to buttons only. Before that, it was scattered across icons, headings, and decorative shapes, which diluted attention.
Step 4: Check Accessibility Contrast (Non-Negotiable)
If your text fails contrast checks, it doesn’t matter how beautiful your palette is. Google factors accessibility into rankings, and roughly 1 in 12 men has some form of color vision deficiency.
The standard you want to hit is WCAG AA, which requires:
- A contrast ratio of at least 4.5:1 for normal body text.
- A contrast ratio of at least 3:1 for large text (18px bold or 24px regular and up).
Free tools to verify:
- WebAIM Contrast Checker
- Coolors Contrast Checker
- Chrome DevTools (built-in color picker shows contrast live)
Common failures I fix on client sites:
- Light grey body text (#BBBBBB) on white. Fails.
- White text on pastel yellow buttons. Fails.
- Brand color links that are indistinguishable from surrounding text.
Step 5: Test Your Palette in Context Before Going Live
A palette that looks great on a Figma swatch sheet can fall apart when applied to a real page. Before locking it in:
- Mock up your homepage hero with the real palette.
- View it on a phone in direct sunlight.
- View it on a cheap monitor with poor color calibration.
- Show it to 3 to 5 people in your target audience and ask one question: “What kind of business is this?” If the answer matches your three personality words from Step 1, you’re done.
Real Client Example: From Generic to Distinct
A boutique law firm came to us in early 2026 with the standard “navy, grey, white” palette every competitor used. We ran the framework:
- Personality words: approachable, sharp, human
- Psychology direction: warmer tones to soften the “cold lawyer” stereotype
- Final 60/30/10: warm off-white (#F7F3EE) / forest green (#1E3A2B) / burnt amber (#C97A3A)
- Contrast: body text passed AA at 8.2:1
Three months after launch, qualified consultation requests were up 41%, and clients mentioned the site “felt different from other law firms” in onboarding calls. Color did that work before a single word was read.
Tools I Use on Every Project
- Coolors.co – quick palette generation and locking individual swatches.
- Adobe Color – for harmony rules (complementary, analogous, triadic).
- Realtime Colors – preview your palette on a live mock website before committing.
- WebAIM Contrast Checker – final accessibility audit.
Quick Checklist Before You Launch
- Three personality words written down and tested with real customers
- Palette follows the 60/30/10 split
- All text passes WCAG AA contrast (4.5:1 minimum)
- Accent color is reserved for CTAs only
- Palette tested on mobile, in sunlight, and on a bad monitor
- Five people in your target audience identified the brand correctly
FAQ
What is the 3 color rule for websites?
The 3 color rule means using one dominant color, one secondary color, and one accent color across your site. It keeps the design visually consistent and prevents the chaos that comes from using too many competing tones. In practice, most professionals extend this into the 60/30/10 split described above.
What are the best colors for a business website?
There is no universal “best.” The right colors depend on your industry, your audience, and the personality you want to project. Blues dominate finance and SaaS for a reason (trust), but a coaching business using the same blue often looks invisible. Pick colors that fit your three personality words and differentiate you from direct competitors.
How many colors should a business website have?
Three core colors plus two or three neutrals (black, white, and one or two greys). Anything more becomes hard to maintain and weakens brand recognition.
Should I match my website colors to my logo?
Your logo colors should be inside your palette, but they don’t have to dominate. A logo with a strong red can still live on a mostly white and charcoal site, with red used as the accent. The website palette extends the logo, it doesn’t copy it.
How do I choose colors if I have no design experience?
Follow the five steps above in order. Don’t skip Step 1, which is the hardest and most important. If you start with personality words instead of color swatches, the rest of the decisions become much easier.
Final Thought
Choosing colors for a business website is not about taste, it’s about strategy. When you start from personality, layer in psychology, structure with the 60/30/10 rule, and verify with accessibility, you build a palette that does measurable work: it differentiates you, it guides attention, and it converts.
The next time someone asks you why your buttons are orange or your headers are forest green, you’ll have an answer that doesn’t start with “I just liked it.”