Web Color Theory: How to Choose Colors That Sell

Color Psychology

Colors influence mood, decisions, and brand perception. The Color Research study shows that 85% of purchasing decisions are influenced by color.

Color Meanings

The 60-30-10 Rule

A balanced palette: - 60% dominant (background, large surfaces) - 30% secondary (sections, cards) - 10% accent (CTAs, links)

Basics of Color Theory

Complementary Opposite sides of the color wheel – maximum contrast. Example: blue + orange

Analogous Adjacent colors – harmonious. Example: blue + turquoise + green

Triadic 3 equally spaced colors – vibrant. Example: red + yellow + blue

Monochromatic One color in different shades – elegant. Example: dark blue + blue + light blue

Contrast Rules

WCAG 2.1 requires: - Normal text: 4.5:1 - Large text (18px+ or 14px bold): 3:1 - UI elements: 3:1

Test: WebAIM Contrast Checker.

Creating a Color Palette

1. Choose a primary color Based on brand, sector, and target audience.

2. Add neutrals Black (#000), white (#FFF), greys (5-7 shades). 70% of the page is neutral!

3. Choose accent colors 1-2 extra vibrant colors for CTAs and emphasis.

4. Add semantic colors - Success (green) - Warning (yellow) - Error (red) - Info (blue)

5. Dark mode variant Every color needs a dark mode pair.

Tools

• Coolors – palette generator
• Adobe Color – professional
• Realtime Colors – test palette on a real UI
• Color Hunt – inspiration
• Tailwind Color Generator – shades for Tailwind

CSS Variables

Use semantic tokens rather than specific color names:

:root {
  --primary: #1a3a5f;
  --primary-foreground: #ffffff;
  --background: #ffffff;
  --foreground: #0a0a0a;
  --accent: #2dd4bf;
}

[data-theme='dark'] { --primary: #2dd4bf; --background: #0a0a0a; --foreground: #ffffff; } `

Cultural Differences

Colors mean different things in different cultures: - White: West = purity, Asia = mourning - Red: West = danger/urgency, China = luck - Estonia: grey is neutral, blue = trust

A/B Testing

Changing a CTA color can increase conversion by 21% (HubSpot study). Test: - Red vs green vs orange CTA - High contrast vs subtle - Warm tone vs cool tone

Summary

Colors are not just about aesthetics – they sell. A good palette increases conversion by 15–30%. See also the typography guide and web design trends 2026. If you need professional palette creation, get in touch.

Sources

• Color Matters Research
• WCAG 2.1 Contrast Requirements
• HubSpot – A/B Testing