Color is the first thing users notice about a website — even before reading a single word. Research shows it takes just 90 seconds for a visitor to form a subconscious judgment about a product, and up to 90% of that assessment is based on color alone.
Yet many designers choose colors by gut feeling. Understanding the fundamentals of color theory transforms color selection from guesswork into a systematic, repeatable process.
The Color Wheel: Your Foundation
The color wheel organizes colors in a circle based on their relationships. It starts with three primary colors (red, yellow, blue), combines them into three secondary colors (orange, green, purple), and fills the gaps with six tertiary colors.
Every color on the wheel is defined by three properties:
- Hue: The pure color itself (red, blue, green)
- Saturation: How vivid or muted the color is (vivid red vs. dusty rose)
- Lightness: How light or dark the color is (pastel pink vs. deep maroon)
Understanding these three dimensions gives you complete control over any color.
Color Harmony: Why Some Combinations Work
Certain color combinations naturally look pleasing together. These harmonic relationships are based on geometry — the positions of colors relative to each other on the wheel.
Complementary Colors
Two colors directly opposite each other on the wheel. Examples: blue and orange, red and green, yellow and purple.
Effect: Maximum contrast and visual tension. Complementary pairs are energetic and attention-grabbing.
Web use: Perfect for call-to-action buttons. An orange CTA button on a blue website pops off the screen because the colors fight for attention. Sports teams, fast food brands, and sale banners frequently use complementary schemes.
Analogous Colors
Three colors sitting next to each other on the wheel. Examples: blue, blue-green, and green; or red, red-orange, and orange.
Effect: Calm, harmonious, and cohesive. Analogous palettes feel natural because they mimic color relationships found in nature (sunset skies, ocean gradients, autumn leaves).
Web use: Ideal for backgrounds, content areas, and sites that want to feel serene and trustworthy. Healthcare, finance, and corporate websites often use analogous schemes.
Triadic Colors
Three colors equally spaced around the wheel (120° apart). Examples: red, yellow, and blue; or orange, green, and purple.
Effect: Vibrant, balanced, and playful. Triadic schemes offer strong visual contrast while maintaining equilibrium.
Web use: Children’s products, creative portfolios, and entertainment brands leverage triadic energy. Google’s brand uses a near-triadic arrangement of blue, red, yellow, and green.
Split-Complementary
Starts with one color, then uses the two colors adjacent to its complement. This offers high contrast like complementary but with less tension.
Web use: The safest choice for designers who want contrast without the risk of clashing. Major brand redesigns frequently land on split-complementary schemes because they are eye-catching yet comfortable.
Color Psychology: What Colors Communicate
Colors carry psychological associations that influence how users perceive your brand:
| Color | Associations | Web Examples |
|---|---|---|
| Blue | Trust, stability, professionalism | Banks, healthcare, LinkedIn |
| Green | Growth, health, nature | Spotify, environmental brands |
| Red | Energy, urgency, passion | YouTube, sale banners, food |
| Orange | Creativity, friendliness, warmth | SoundCloud, HubSpot |
| Purple | Luxury, creativity, wisdom | Twitch, Cadbury |
| Yellow | Optimism, clarity, warmth | Snapchat, warning labels |
| Black | Sophistication, premium, power | Luxury brands, Apple |
| White | Simplicity, cleanliness, space | Minimal designs, Apple |
These are cultural associations (primarily Western). Consider your target audience’s cultural context when selecting colors.
Building a Color Palette for Your Website
A complete web palette typically needs 5-7 colors:
- Primary color (60%): Your brand color, used for headers, primary buttons, and key visual elements
- Secondary color (30%): A complementary or analogous accent that supports the primary
- Neutral backgrounds: Light grays and whites for content areas
- Text colors: Near-black for body text, medium gray for secondary text
- Semantic colors: Green for success, red for errors, yellow for warnings, blue for information
The 60-30-10 Rule
This interior design principle works perfectly for web design:
- 60% of your design uses the dominant/neutral color (backgrounds, large areas)
- 30% uses the secondary color (cards, sections, navigation)
- 10% uses the accent color (buttons, links, highlights)
This ratio prevents color overload while keeping the design visually interesting.
Contrast and Accessibility
Color is not just aesthetic — it is functional. The Web Content Accessibility Guidelines (WCAG) require minimum contrast ratios between text and background:
- Normal text: 4.5:1 contrast ratio minimum
- Large text (18px+ or 14px+ bold): 3:1 contrast ratio minimum
- UI components: 3:1 contrast ratio minimum
Low contrast means users with visual impairments cannot read your content. Tools like browser contrast checkers can verify your color combinations meet WCAG standards.
Practical Steps to Get Started
- Start with one color — your brand color or a color that communicates your brand’s personality
- Use a color scheme generator to find harmonious companions (complementary, analogous, or triadic)
- Add neutrals for backgrounds and text
- Test contrast to ensure accessibility compliance
- Apply the 60-30-10 rule to distribute colors across your layout