How to Choose a Color Palette for Your Website (Designer's Guide, 2026)
A step-by-step guide to choosing a color palette for your website, with examples, WCAG accessibility tips, and free tools to generate harmonious color schemes.
Research shows that color accounts for up to 90% of a product's first impression. The palette you choose communicates trust, personality, and purpose before a visitor reads a single word. Yet most first-time designers either pick colors they personally like, or clone whatever the most popular SaaS product uses that week.
Neither approach is wrong, but both leave results to chance. This guide walks you through a systematic, step-by-step process for choosing a website color palette that works — visually, psychologically, and accessibly.
Step 1: Define Your Brand Personality
Before touching a color picker, answer one question: what feeling should your website evoke in the first 5 seconds?
Color psychology research identifies reliable associations between colors and emotional states. These aren't universal laws, but they reflect strong cultural associations in Western markets:
| Color | Core Associations | Example Brands | |---|---|---| | Blue | Trust, stability, professionalism | PayPal, Facebook, LinkedIn, Chase | | Green | Growth, health, finance, nature | Whole Foods, Mint, Robinhood, Spotify | | Orange | Energy, urgency, friendliness, creativity | Amazon, Etsy, HubSpot, Fanta | | Red | Urgency, passion, danger, excitement | Netflix, YouTube, Coca-Cola, Pinterest | | Purple | Luxury, creativity, wisdom, spirituality | Cadbury, Hallmark, FedEx (accent), Slack | | Black / Dark | Sophistication, power, premium, mystery | Apple, Chanel, Nike, The New York Times | | White / Light | Simplicity, cleanliness, openness | Google, Airbnb, Apple (light mode), Medium |
Your brand personality likely sits at the intersection of two or three of these qualities. A fintech startup wants trust + growth = blue + green. A creative agency wants energy + creativity = orange or purple. A premium fashion brand wants sophistication + exclusivity = black + gold.
Step 2: Pick a Primary Color
Your primary color is the most frequently used color in your interface — typically used for primary action buttons, links, key UI elements, and your logo mark. It should reflect your brand personality from Step 1.
Open the color picker and start exploring. If you already have brand guidelines, enter your exact HEX value. If you're starting fresh, try a few hues in the general family you've identified.
What makes a good primary color:
- Distinctive enough to own (generic blue is overcrowded; a specific teal-blue is more memorable)
- Works well as a CTA button (check contrast with white text — it needs to pass WCAG AA)
- Versatile enough for tints and shades (you'll use lighter and darker versions throughout the UI)
- Doesn't clash with common photography or user-generated content you'll display
Step 3: Build a Color Harmony
Once you have your primary color, use the harmony generator in the color picker to derive complementary colors automatically.
Which harmony to choose:
Complementary — pick this if you want high contrast and impact. Use the complementary color sparingly as an accent (10% of the interface) to make the primary pop. Common for marketing sites with a clear conversion goal.
Analogous — pick this if you want a cohesive, harmonious feel. The three adjacent colors blend naturally. Common for editorial sites, portfolios, and brands that communicate warmth and approachability.
Triadic — pick this for a vibrant, playful palette. The three evenly-spaced colors feel balanced but energetic. Common for children's brands, gaming, or creative agencies.
Monochromatic — pick this for the cleanest, most professional look. Tints and shades of a single hue. Common for SaaS dashboards, banking apps, and brands that want to convey precision. This site uses a monochromatic dark palette.
For most websites, a safe starting point is: one primary color + one complementary accent + a neutral palette (white, grays, black). Add a third color only for specific use cases (success = green, error = red, warning = yellow).
Step 4: Add Neutrals
Neutrals carry most of your interface weight — backgrounds, body text, borders, cards, dividers. They need to work harmoniously with your primary color without competing with it.
Common mistakes:
- Using pure black (
#000000) as body text — it's too stark on white backgrounds; try#1A1A2Eor#111827 - Using pure white (
#FFFFFF) as background — slightly warm or cool whites (#F8F9FA,#FFFBF7) reduce eye strain - Using generic grays — slightly tint your grays with your brand's primary hue for a more sophisticated look
Step 5: Test for Accessibility
This step is non-negotiable if you care about legal compliance, SEO (Google counts accessibility in Core Web Vitals), and reaching users with visual disabilities (approximately 8% of men and 0.5% of women have some form of color vision deficiency).
Open the WCAG contrast checker and test every critical combination:
- Body text on background (must be 4.5:1 for AA)
- Heading text on background (must be 4.5:1 for AA, unless it's 24px+ then 3:1)
- Placeholder text in inputs (must be 4.5:1)
- Button label on button background (must be 4.5:1)
- Link text in body copy (must be 4.5:1, or visually distinguished by underline)
- Light gray text on white (nearly impossible to read, fails every contrast standard)
- Yellow text on white (feels energetic, fails contrast requirements)
- Red/green used as the only differentiator (invisible to 8% of male users)
- Low-opacity text for decorative labels that turns out to be actual important content
Step 6: Apply the 60-30-10 Rule
Once you have your palette, the 60-30-10 rule tells you how to distribute it:
- 60% — Dominant color: Backgrounds, large surface areas. Usually your neutral (white, dark grey, or near-black).
- 30% — Secondary color: Section backgrounds, cards, navigation elements, secondary UI. Usually a lighter shade of your primary or a secondary brand color.
- 10% — Accent color: Primary buttons, links, key highlights, icons, notification badges. Your primary brand color or a complementary accent.
5 Real-World Color Palette Examples
Stripe — Primary purple (#635BFF) on white, with dark slate (#0A2540) for marketing backgrounds. Trustworthy and technical.
Notion — Near-black text (#191919) on pure white. Occasional blue (#2EAADC) for links. Maximum readability, zero distraction.
Linear — Dark navy backgrounds with bright purple accent. Conveys premium developer tooling. High contrast throughout.
Airbnb — Coral red (#FF5A5F) as primary accent on clean white backgrounds. Warm, approachable, travel-ready.
Spotify — Signature green (#1DB954) on black (#191414). Bold, high-contrast, distinctive. Works because green on black is unusual and memorable.
Common Mistakes
Too many colors. A 7-color palette is not a brand system — it's chaos. Start with 3 colors maximum, add a 4th only when genuinely needed.
Ignoring dark mode. An increasing share of users prefer dark mode. Your palette needs dark-mode variants. The monochromatic shades generator in the color picker helps you build both.
Trendy colors. Millennial pink (#F4ACB7) was everywhere in 2015–2018, then became a visual cliché. Periwinkle and sage green are getting there. Build your palette around your brand personality, not current trends.
Low contrast everywhere. The minimal, washed-out aesthetic with light gray on white or cream on white text fails WCAG at every threshold and is being phased out by regulators in EU and US accessibility law.
Different greens for success and brand. If your brand color is green and your success state is also green, users can't distinguish "this is on-brand" from "action successful." Use a different hue for one of them.
Tools Summary
- Pick and explore colors: Color Picker & Palette Generator
- Generate harmonies: Color Picker — Harmonies tab
- Check accessibility: WCAG Contrast Checker
- Export for code: CSS Variables export in the color picker generates ready-to-paste
:root {}variables
Frequently Asked Questions
How many colors should a website palette have? Three to five is the sweet spot for most websites: one primary, one complementary or secondary, neutrals (treated as a single system), and functional colors (success green, error red). More than five often indicates a lack of design discipline, not creativity.
Should I use my logo color as my primary web color? Usually yes, but not always. If your logo color is very saturated or neon, it may work at small sizes on the logo but become overwhelming at 40px button size or as a background tint. Test it in context.
Do I need to hire a designer to pick colors? Not necessarily. The systematic approach in this guide — brand personality → primary color → harmony → neutrals → accessibility check → 60-30-10 — gives non-designers a repeatable process. The color picker makes the technical parts automatic.
How do I know if my palette is accessible? Use the WCAG contrast checker. Test every foreground/background combination you plan to use. Aim for AA compliance as a minimum; AAA where possible for text-heavy pages.
What's the difference between color scheme and color palette? A color scheme describes the relationship between colors (analogous, complementary, triadic). A color palette is the specific set of exact color values (HEX codes) you've chosen to use. Your palette is built by applying a color scheme to your specific brand context.
Color is one of the few design decisions that costs nothing to get right but can cost everything to get wrong. Take 30 minutes to work through these steps, use the color picker to explore your options, and run every key combination through the contrast checker before launch. Your users — and your conversion rate — will thank you.