July 2026

Picking colors for a business website looks easy until you actually sit down to do it. You open a blank canvas, drop in your logo, and suddenly every blue looks wrong. After years of building sites for clients at Panpan Vannes, I can tell you that choosing a color palette is less about taste and more about a structured decision process. This article walks you through exactly how I do it, step by step, so you can apply the same method to your own project. Why Color Choice Matters More Than People Think Color is the first thing a visitor processes on your website, before they even read your headline. Studies in consumer behavior consistently show that people form a judgment about a product or brand within 90 seconds, and a large share of that judgment is based on color alone. For a business website, that means your palette is doing three jobs at once: Communicating your brand personality Guiding users toward conversion actions (buttons, forms, CTAs) Ensuring readability and accessibility for every visitor Step 1: Start With the Business, Not the Colors Before opening any color tool, I ask the client (or myself) four questions: Who is the target audience, and what age range and culture do they belong to? What is the emotional positioning? Premium, friendly, technical, playful, trustworthy? Who are the main competitors, and what palettes are they using? Is there an existing logo or brand guideline I must respect? This step alone eliminates 80% of the color directions that wouldn’t fit. A bank does not need bright orange. A daycare does not need charcoal black. The answers narrow the field before creativity even starts. Step 2: Apply Color Psychology With a Critical Eye Color psychology is useful, but it is not a horoscope. It is a starting point, not a rule. Here is the cheat sheet I actually use in client meetings: Color Common Association Good Fit For Blue Trust, stability, professionalism Finance, SaaS, healthcare Green Growth, nature, wellness Eco brands, food, finance Red Energy, urgency, appetite Restaurants, sports, sales sites Yellow Optimism, attention, warmth Kids, leisure, low-cost services Purple Luxury, creativity, premium Beauty, coaching, premium services Black Elegance, exclusivity, authority Fashion, luxury, agencies Orange Friendliness, action, affordability E-commerce, food, communities The trap is to take these meanings at face value. In 2026, audiences are visually saturated. What matters more is contrast within your industry. If every competitor uses blue, a credible green or warm neutral may serve you better, even if blue is the textbook answer. Step 3: Build the Palette Using the 60-30-10 Rule This is the backbone of almost every clean business website I have ever built. The 60-30-10 rule comes from interior design and translates beautifully to UI: 60% dominant color: usually a neutral (white, off-white, light gray, or dark mode equivalent). This is your background and breathing space. 30% secondary color: your brand color, used for headers, key sections, illustrations, and brand reinforcement. 10% accent color: a high-contrast color reserved for buttons, links, and conversion points. A Concrete Example For a recent B2B consulting client, here is what we ended up with: 60% : #F7F8FA (warm off-white) 30% : #1B2A4E (deep navy, used for typography and section blocks) 10% : #FF7A3D (orange, used only on CTAs) The result feels professional thanks to the navy, modern thanks to the off-white, and converts well thanks to the orange that pops without screaming. Step 4: Expand to a Functional Palette A real website needs more than three colors. You will also need: Two or three neutral shades for borders, dividers, and disabled states Semantic colors: success (green), warning (amber), error (red), info (blue) Hover and active states for every interactive color, usually 10 to 15% darker or lighter than the base I build these in a design tool like Figma as tokens so the developer can plug them directly into the CSS variables. Step 5: Test Accessibility Before You Fall in Love With It This is the step most beginners skip, and it is non-negotiable. The WCAG 2.2 standard requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. If your beautiful pastel button has white text on a soft pink background, it might fail and exclude visually impaired users. My checklist: Run every text/background combo through a contrast checker (WebAIM, Stark, or the built-in Figma plugin) Make sure no information is conveyed by color alone (add icons or labels to error states) Test the palette in grayscale to verify hierarchy still works Check the site through a color blindness simulator (protanopia and deuteranopia are the most common) Step 6: Validate in Context, Not in Isolation A palette looks great on a Pinterest mood board. It can fall apart on a real product page with photos, icons, and user content. Before locking the palette, I always: Apply it to the homepage hero, a content page, and a form Test it on both desktop and mobile Preview it in light and dark mode if relevant Get a gut-check reaction from three people outside the project Common Mistakes to Avoid Too many colors. If your palette has more than five core colors, it is a flag, not a system. Pure black on pure white. The contrast is harsh. Use a very dark gray like #1A1A1A instead. Trendy colors with no link to the brand. The 2026 Pantone color of the year may not fit your accountant client. Ignoring the logo. The palette must coexist with your logo, not fight it. Forgetting CTAs. Your accent color must contrast strongly with the dominant background or conversion will suffer. Tools I Actually Use Coolors.co for fast palette generation and exploration Adobe Color for harmony rules and accessibility checks in one place Realtime Colors to preview a palette on a real-looking website mockup WebAIM Contrast Checker for WCAG compliance Figma Tokens plugin to ship the palette directly to the dev team Final Thoughts Choosing a color palette for a business website is not