How to Choose a Color Palette for Your Website

1. Color Theory Basics

Every great color palette starts with understanding how colors relate to each other on the color wheel. The color wheel, originally developed by Sir Isaac Newton in 1666, arranges hues in a circle that reveals natural relationships between colors. These relationships — called color harmonies — are the foundation of every design system you've ever admired.

Complementary Colors

Complementary colors sit directly opposite each other on the color wheel — think blue and orange, red and green, or purple and yellow. They create maximum visual contrast and make each other appear more vibrant. This is why so many call-to-action buttons use a complementary color to the site's primary palette: the contrast naturally draws the eye.

The risk with complementary schemes is visual tension. Using both colors at full saturation in equal amounts creates a vibrating effect that's hard to look at. The solution? Use one color as your dominant shade and the other sparingly for accents and highlights.

Analogous Colors

Analogous colors are neighbors on the wheel — like blue, blue-green, and green. They create harmonious, cohesive palettes that feel naturally pleasing because they share underlying hue properties. Nature is full of analogous schemes: think of autumn leaves (red, orange, yellow) or an ocean sunset (orange, pink, purple).

Analogous palettes are easy to get right but can lack contrast. Make sure at least one color is significantly lighter or darker to maintain visual hierarchy. Most successful analogous schemes span no more than 90 degrees of the color wheel.

Triadic Colors

Triadic schemes use three colors equally spaced around the wheel — 120 degrees apart. Red, yellow, and blue is the classic triadic combination. These palettes are vibrant and balanced, offering more variety than complementary while remaining harmonious.

The key to using triadic colors is restraint. Let one color dominate (typically 60% of your design), use the second for supporting elements (30%), and reserve the third for accents (10%). Without this balance, triadic palettes can feel chaotic and overwhelming.

Split-Complementary Colors

Split-complementary is a variation of complementary that's more forgiving. Instead of using the direct opposite, you take the two colors adjacent to the complement. For example, if your base is blue, instead of using orange (direct complement), you'd use red-orange and yellow-orange. You get the visual interest of complementary contrast with less tension, making it one of the most versatile schemes for web design.

Monochromatic Colors

Monochromatic palettes use a single hue with variations in lightness and saturation. They're inherently cohesive and elegant — impossible to clash because every shade shares the same base. These work exceptionally well for minimalist designs, portfolio sites, and brands that want to project sophistication.

The challenge is creating enough visual distinction between elements. Ensure your lightest and darkest shades have a contrast ratio of at least 4.5:1 for text readability. You can use Hue's contrast checker to verify this.

2. The Psychology of Colors

Colors aren't just visual — they're emotional. Decades of research in color psychology show that hues trigger specific associations and feelings in viewers, often unconsciously. While cultural context matters (white signifies purity in Western cultures but mourning in some Eastern ones), certain associations are remarkably consistent across the web.

The takeaway isn't that you must use blue for a fintech app — it's that your color choices communicate before your copy does. Choose colors that align with the emotion your brand wants to evoke, then test with real users to validate your assumptions.

3. The 60-30-10 Rule

Interior designers have used the 60-30-10 rule for decades, and it translates perfectly to web design. The idea is simple: distribute your colors in a 60-30-10 ratio to create a balanced, visually appealing composition.

This rule works because it mirrors how humans process visual information. The dominant color creates a stable foundation, the secondary adds interest without overwhelming, and the accent creates focal points that guide the user's eye to actions and key content.

Look at Hue itself: dark background (60%), glass-effect surfaces (30%), amber/gold accent (10%). That's the 60-30-10 rule in action. Try generating your own balanced palette with Hue's palette generator.

4. Choosing Brand Colors

Your brand palette is more than an aesthetic choice — it's a strategic one. Brand colors appear on your website, social media, emails, packaging, and print materials. They need to work everywhere, at every size, on every background.

Start with One Color

Don't try to pick five colors at once. Start with a single primary brand color that reflects your values, industry, and target audience. Every other color in your palette will derive from this choice. Ask yourself: if my brand were a single color, what would it be?

Build Out Systematically

Once you have your primary, add a neutral palette (grays for text, backgrounds, borders) and one or two supporting colors. A common brand palette structure is:

• Primary: Your hero color for CTAs, links, key elements
• Secondary: A complementary or analogous color for variety
• Neutrals: 5-7 gray shades from near-white to near-black
• Semantic: Success (green), warning (yellow), error (red), info (blue)

Test in Context

Colors that look great in a swatch can fail in production. Always test your palette on actual UI components — buttons, form fields, cards, navigation, error states. Pay special attention to hover and focus states, which often need lighter or darker variants of your primary color. The Material Design color system provides excellent guidance on building comprehensive color schemes for UI.

5. Accessibility Considerations

A beautiful palette that's unreadable is a failed palette. Over 1 billion people worldwide live with some form of disability, and WCAG (Web Content Accessibility Guidelines) exist to ensure the web works for everyone. Color accessibility isn't optional — in many jurisdictions, it's a legal requirement.

Contrast Ratios

WCAG defines minimum contrast ratios between text and background colors. For Level AA compliance (the standard most organizations target), normal text needs a contrast ratio of at least 4.5:1 and large text (18pt or 14pt bold) needs at least 3:1. Level AAA raises these to 7:1 and 4.5:1 respectively.

Check every text-background combination in your palette using Hue's contrast checker. It's not enough to test your primary text color — verify headings, captions, placeholder text, disabled states, and error messages too.

Don't Rely on Color Alone

Approximately 8% of men and 0.5% of women have some form of color vision deficiency. Red-green color blindness (deuteranopia and protanopia) is the most common. Never use color as the sole indicator of meaning — always pair it with text labels, icons, or patterns. A red error border should also include an error icon and error text.

For a deeper dive, read our guide on how to check color contrast for accessibility.

6. Dark Mode Design

Dark mode has gone from a developer preference to a mainstream expectation. Apple, Google, and every major platform now support system-level dark mode. Your color palette needs to work in both light and dark contexts — which means planning for it from the start, not retrofitting it later.

Dark Mode Isn't Just Inverted Colors

Simply swapping black and white creates harsh, unreadable interfaces. Effective dark themes use dark gray (not pure black) backgrounds — typically #121212 to #1a1a1a — because pure black creates excessive contrast with white text, causing eye strain in prolonged reading. Surface elevation in dark mode is communicated through lighter shades of gray rather than shadows.

Adjust Your Accent Colors

Saturated colors that look great on white backgrounds can feel overwhelming on dark ones. For dark mode, desaturate your accent colors slightly and use lighter tints. A vivid blue (#2563EB) on white might become a lighter blue (#60A5FA) on dark backgrounds. Test both variants against their respective backgrounds for WCAG compliance.

Planning for Both Modes

When building your palette, create both light and dark variants simultaneously. Define each color's purpose (background, surface, text, accent) rather than its specific value. This semantic approach — mapping color roles to CSS custom properties — makes theme switching straightforward.

7. CSS Custom Properties for Theming

CSS custom properties (also called CSS variables) are the modern way to implement color themes. They allow you to define your palette once, reference it everywhere, and swap entire themes by changing a handful of values.

:root {
  --color-bg: #ffffff;
  --color-surface: #f5f5f5;
  --color-text: #1a1a1a;
  --color-muted: #6b7280;
  --color-accent: #2563eb;
  --color-accent-hover: #1d4ed8;
}

.dark {
  --color-bg: #0a0a0b;
  --color-surface: #111113;
  --color-text: #e8e8ed;
  --color-muted: #8b8b97;
  --color-accent: #60a5fa;
  --color-accent-hover: #93bbfd;
}

With this setup, every component uses var(--color-text) instead of hardcoded values. Toggling the .dark class on your root element switches the entire theme instantly with zero JavaScript color calculations. This is the same approach used by Tailwind CSS, Shadcn UI, and most modern design systems.

Use the prefers-color-scheme media query to detect user system preferences and apply the appropriate theme automatically. Your users get the experience they've configured at the OS level, with no extra clicks required.

8. Tools for Generating Palettes

You don't need to pick colors by hand. Modern tools generate harmonious palettes based on color theory, let you explore variations, and export production-ready code.

Once you've generated your palette, always validate it for contrast. Run your text-background combinations through a contrast checker before committing to production. And if your palette includes gradients, check out our guide on how to create CSS gradients for implementation techniques.

Frequently Asked Questions

10. Color Psychology by Industry

While the general psychology of colors (Section 2) gives you a foundation, industry-specific patterns are even more actionable. Users have been trained by decades of exposure to associate certain color palettes with certain sectors. Working with these associations — or deliberately breaking them — is a strategic design choice.

Technology & SaaS

Dominant colors: Blue, Purple, Indigo. Tech brands overwhelmingly favor blue and purple palettes. Blue conveys trust and reliability (critical for products handling data or money), while purple signals innovation and forward-thinking. Stripe uses a deep indigo-to-purple gradient. Linear uses a violet accent on dark backgrounds. Vercel and GitHub use near-monochrome dark themes with vibrant accent highlights. If you want to stand out in tech, consider warm accent colors (amber, coral) that contrast with the sea of blue competitors — but keep blue or purple as foundation colors for credibility.

Health & Wellness

Dominant colors: Green, Blue, Teal, White. Healthcare and wellness brands use cool, calming colors to project safety, cleanliness, and natural well-being. Green is associated with health, recovery, and nature. Blue connotes clinical reliability and trust. White space is used generously to create a sense of cleanliness. Headspace uses a warm orange accent to feel approachable, while Calm uses deep navy and gold — both deviating from the norm to differentiate while staying within a "calm" emotional range.

Food & Restaurant

Dominant colors: Red, Orange, Yellow, Warm Brown. Warm colors stimulate appetite — this is well-documented in color psychology research. McDonald's (red and yellow), Burger King (orange, red, brown), DoorDash (red), and Grubhub (red-orange) all leverage this effect. Green is used when health or freshness is the brand message (Sweetgreen, Whole Foods). Avoid cool blues for food — they suppress appetite (which is why blue plates are used in dieting studies).

Luxury & Premium

Dominant colors: Black, Gold, Deep Navy, Burgundy. Luxury brands minimize color variety and maximize contrast. Black or near-black backgrounds with gold or silver accents signal exclusivity and sophistication. Typography does the heavy lifting while color stays restrained. Rolex, Chanel, and Louis Vuitton all use predominantly black-and-white palettes with sparse metallic accents. The key insight: luxury isn't communicated by more color — it's communicated by less.

Finance & Banking

Dominant colors: Blue, Green, Dark Gray. Finance demands trust above all else. Blue dominates (PayPal, Visa, Chase, Goldman Sachs) because it's the most universally trusted color. Green connotes money and growth (Robinhood, TD Ameritrade, Mint). Fintech disruptors like Revolut (dark mode, blue-purple) and Wise (green-blue) stay within the trust palette while using modern design to signal innovation. Red is almost never a primary color in finance — its associations with debt, loss, and danger are too strong.

Education & Children

Dominant colors: Primary colors (red, blue, yellow), Green, Orange. Education brands, especially for younger audiences, use bright, saturated primary colors that feel energetic and approachable. Duolingo uses a vivid green. Khan Academy uses blue and green. For children's products, higher saturation and more colors (4-5) are acceptable where adult brands would limit to 2-3. For higher education and professional training, palettes shift toward the more muted, authoritative tones of tech and finance.

11. Creating a Design System from Your Palette

A color palette is a starting point. A design system is where that palette becomes a scalable, maintainable architecture. The difference: a palette says "our blue is #2563EB"; a design system says "our interactive primary color is --color-primary, and it maps to #2563EB in light mode and #60A5FA in dark mode."

CSS Custom Properties as Design Tokens

Design tokens are the smallest units of your design system — named values for colors, spacing, typography, and other visual properties. For colors, each token should describe its purpose, not its appearance. This is the semantic naming approach used by every major design system, from Material Design to Apple's Human Interface Guidelines.

/* ❌ Named by appearance — breaks when theme changes */
--blue-500: #2563EB;
--gray-100: #F3F4F6;
--dark-900: #111827;

/* ✅ Named by purpose — works across themes */
--color-primary: #2563EB;
--color-primary-hover: #1D4ED8;
--color-surface: #F3F4F6;
--color-surface-elevated: #FFFFFF;
--color-text-primary: #111827;
--color-text-secondary: #6B7280;
--color-border: #E5E7EB;
--color-success: #059669;
--color-warning: #D97706;
--color-error: #DC2626;

Light/Dark Mode Token Mapping

With semantic tokens, switching themes becomes a simple remapping. The same --color-primary token points to a different value in each theme. Components reference the token, never the raw color, so they adapt automatically.

:root {
  /* Light mode tokens */
  --color-bg: #FFFFFF;
  --color-surface: #F9FAFB;
  --color-text: #111827;
  --color-primary: #2563EB;
}

.dark {
  /* Dark mode: same token names, different values */
  --color-bg: #0a0a0b;
  --color-surface: #111113;
  --color-text: #E8E8ED;
  --color-primary: #60A5FA;
}

/* System preference auto-detection */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --color-bg: #0a0a0b;
    --color-surface: #111113;
    --color-text: #E8E8ED;
    --color-primary: #60A5FA;
  }
}

Generating Tonal Scales

Most design systems need 8-12 tonal steps for each primary and neutral color — from near-white (50) to near-black (950). Tools like Leonardo Color by Adobe generate perceptually uniform tonal scales that maintain consistent visual contrast between adjacent steps. Alternatively, use Hue's palette generator to create a base palette and then extend it manually using HSL lightness adjustments in 8-10% increments.

Documenting Your Color System

A design system only works if people use it. Document every color token with: its name, hex/rgb value in both themes, intended use cases, what it should not be used for, and contrast requirements (which tokens it must pair with). Figma color styles can mirror your CSS tokens so designers and developers share a single source of truth.

12. Color Palette Testing

Choosing a palette based on theory and aesthetics is only half the job. Testing your palette with real users reveals whether it actually performs — driving engagement, supporting readability, and converting visitors. Color is one of the most impactful A/B testing variables because it affects perception before users consciously process content.

A/B Testing Colors

A/B testing individual color changes (like button color) is one of the most commonly run and most commonly misinterpreted experiments. The color itself rarely drives conversion in isolation — it's the contrast and attention the color creates relative to its surroundings that matters. A red CTA button doesn't convert better because red is magic — it converts better if it's the only red element on a predominantly blue page. Test holistically: change the accent color across the entire page, not just one element.

Heatmap Analysis

Heatmap tools (Hotjar, Microsoft Clarity, Mouseflow) reveal where users look and click. Compare heatmaps before and after palette changes to see if the new colors are guiding attention effectively. Key questions: Are users finding CTAs faster? Are they scrolling past important sections? Is the visual hierarchy working as intended? If your accent color draws attention to the wrong elements, the palette needs adjustment regardless of how aesthetically pleasing it is.

Conversion Impact

Track conversion metrics (signups, purchases, form completions) alongside palette changes. Run tests for at least 2-4 weeks to account for traffic variation. Document baseline metrics before changes. The highest-impact color changes are usually: CTA button color (visibility), background color (readability and time-on-page), and error/validation state colors (form completion rates). Keep all other variables constant during testing to isolate color's effect. Tools like Clarity SEO can help monitor how palette changes affect user engagement signals and SEO performance simultaneously.

Cross-Device and Cross-Screen Testing

Colors render differently across devices, screens, and color profiles. A vibrant orange on your calibrated desktop monitor may look washed out on a budget Android phone or oversaturated on a MacBook Pro with P3 wide-gamut display. Test your palette on: at least one mobile device (check sunlight readability), a non-retina/standard gamut monitor, and both OLED and LCD screens (OLED renders black differently). The sRGB color space is your safe baseline — colors specified in sRGB will render consistently across the widest range of devices.

13. Palette Extraction from Images

Sometimes the best palette doesn't come from a color wheel — it comes from a photograph, a painting, a brand photo, or a nature scene that captures the mood you want. Extracting colors from images is a legitimate and effective design technique used by professionals across industries.

Why Extract from Images?

Images that resonate with you visually contain pre-harmonized color relationships. A sunset photo has warm analogous tones that naturally work together. A macro photograph of a tropical bird has complementary contrasts that evolution perfected over millions of years. Starting from an image sidesteps the analysis paralysis of choosing from 16 million hex colors and gives you a palette with proven aesthetic appeal.

Tools for Extraction

Refining Extracted Palettes

Raw extracted colors almost always need refinement. Photos contain subtle color variations that look natural in context but create muddy, ambiguous palettes in UI. After extraction: reduce to 4-5 key colors, adjust saturation for consistency (UI colors typically work best at similar saturation levels), ensure at least one neutral gray for text and backgrounds, and verify all text-background combinations pass contrast requirements. The extracted palette is your inspiration — the refined palette is your production asset.

14. Common Color Palette Mistakes

After reviewing hundreds of websites and design systems, the same palette mistakes appear again and again. Knowing what to avoid is as valuable as knowing what to aim for.

Mistake 1: Too Many Colors

The most common mistake. Every new color added to a palette increases cognitive load and makes the interface harder to scan. Users shouldn't need to learn what each color means — the palette should be intuitive. The fix: Limit your palette to 1-2 brand colors, one accent, neutrals, and semantics. If you need more variety, use tonal variations of existing colors rather than introducing new hues. The 60-30-10 rule (Section 3) enforces this discipline naturally.

Mistake 2: Insufficient Contrast

Designers often choose colors that look harmonious in a swatch but fail contrast requirements when applied to real UI. Light gray text on white backgrounds, medium blue links on dark blue backgrounds, and soft pastel buttons on cream surfaces all look aesthetic in mockups but become unreadable in production — especially on mobile screens in sunlight. The fix: Test every text-background combination with a contrast checker before finalizing. Build contrast checking into your design process, not your QA process.

Mistake 3: Ignoring Accessibility

Beyond contrast ratios, many palettes rely on color alone to communicate state — red for errors, green for success, with no accompanying icons, text, or patterns. Roughly 8% of males have some form of color vision deficiency. If your error state is distinguishable from your success state only by hue, those users can't tell the difference. The fix: Always pair color with shape, text, or iconography. Test with color blindness simulation in Chrome DevTools. Read our full guide on color contrast for accessibility.

Mistake 4: No Neutral/Gray Scale

Some palettes consist entirely of vibrant colors with no neutral tones. Without grays, there's no visual breathing room — every element competes for attention, and nothing feels grounded. Neutrals are the backbone of any UI palette: they're used for text, backgrounds, borders, dividers, disabled states, and whitespace. The fix: Build a 7-step neutral scale (from near-white to near-black) before selecting any brand or accent colors. These neutrals will make up 70-80% of your UI's surface area.

Mistake 5: Not Testing in Context

Colors interact. A vibrant orange accent looks completely different on a white background versus a dark gray one versus a cream one. Simultaneous contrast (a perceptual phenomenon where surrounding colors alter how we perceive a target color) means swatches in isolation are misleading. The fix: Always evaluate your palette on real components — cards, buttons, navigation bars, modals, form fields. Build a test page with all your UI elements rendered in your candidate palette before committing.

Mistake 6: Forgetting Dark Mode from the Start

Retrofitting dark mode onto a palette designed only for light mode almost always fails. Colors that were chosen for a white context need different lightness and saturation for dark backgrounds. The semantic tokens that seemed unnecessary suddenly become critical. The fix: Design both modes simultaneously from day one. Use CSS custom properties (Section 7) with semantic naming. Every color in your system should have a defined light-mode and dark-mode value before any code is written.