Color Theory for Web Design

Understanding Color

The Color Wheel

The color wheel organizes colors by their relationships:

• Primary: Red, Yellow, Blue
• Secondary: Orange, Green, Violet
• Tertiary: Red-Orange, Yellow-Green, etc.

Color Properties

• Hue: The pure color (red, blue, green)
• Saturation: Intensity (vivid to gray)
• Lightness/Value: Brightness (light to dark)

Color Harmonies

Complementary

Opposite colors on the wheel. High contrast, vibrant.

Example: Blue and Orange

Analogous

Adjacent colors on the wheel. Harmonious, natural.

Example: Blue, Blue-Green, Green

Triadic

Three evenly spaced colors. Balanced, colorful.

Example: Red, Yellow, Blue

Split-Complementary

Base color + two colors adjacent to its complement.

Example: Blue + Red-Orange + Yellow-Orange

Monochromatic

Different shades/tints of one hue. Cohesive, elegant.

Example: Light blue, Medium blue, Dark blue

Color Psychology

Warm Colors (Red, Orange, Yellow)

• Energy, excitement
• Urgency, action
• Warmth, optimism

Cool Colors (Blue, Green, Purple)

• Calm, trust
• Nature, health
• Creativity, luxury

Neutral Colors

• Professionalism
• Balance
• Sophistication

Web Color Best Practices

Limit Your Palette

Use 3-5 colors:

• Primary brand color
• Secondary accent
• Neutral for text/backgrounds
• Success/Error states

60-30-10 Rule

• 60% dominant color (backgrounds)
• 30% secondary color (components)
• 10% accent color (CTAs, highlights)

Ensure Contrast

Text must be readable:

• 4.5:1 for normal text
• 3:1 for large text

Use our Contrast Checker.

Consider Context

• Light mode vs dark mode
• Cultural associations
• Accessibility needs

CSS Color Formats

/* Named colors */
color: rebeccapurple;

/* Hexadecimal */
color: #3b82f6;

/* RGB */
color: rgb(59, 130, 246);

/* RGBA with opacity */
color: rgba(59, 130, 246, 0.5);

/* HSL */
color: hsl(217, 91%, 60%);

/* HSLA */
color: hsla(217, 91%, 60%, 0.5);

HSL is often easiest for creating variations:

• Adjust lightness for tints/shades
• Adjust saturation for vibrance
• Keep hue constant for consistency

Creating a Color System

:root {
    /* Base colors */
    --color-primary: hsl(217, 91%, 60%);
    --color-secondary: hsl(262, 83%, 58%);

    /* Variations */
    --color-primary-light: hsl(217, 91%, 70%);
    --color-primary-dark: hsl(217, 91%, 45%);

    /* Semantic colors */
    --color-success: hsl(142, 71%, 45%);
    --color-warning: hsl(38, 92%, 50%);
    --color-error: hsl(0, 84%, 60%);

    /* Neutrals */
    --color-gray-100: hsl(0, 0%, 96%);
    --color-gray-500: hsl(0, 0%, 50%);
    --color-gray-900: hsl(0, 0%, 10%);
}

Try our Color Palette Generator to create harmonious palettes.