Understanding Color Theory

Color theory is the science and art of using color. It explains how humans perceive color, how colors mix, match, or contrast, and the messages colors communicate. A strong color palette creates visual harmony and reinforces your brand identity.

Color Harmony Types

This tool generates palettes based on established color harmony principles:

The Color Wheel

The color wheel organizes colors by their relationships:

• Primary colors: Red, yellow, blue—cannot be created by mixing other colors
• Secondary colors: Orange, green, violet—created by mixing two primaries
• Tertiary colors: Red-orange, yellow-green, etc.—mixing primary with adjacent secondary

Using Color in Design

Role	Percentage	Usage
Primary/Dominant	60%	Background, large areas
Secondary	30%	Headers, cards, sections
Accent	10%	CTAs, highlights, links

Color Psychology

Color	Associations	Common Uses
Red	Energy, passion, urgency, danger	Sale buttons, alerts, food brands
Blue	Trust, stability, calm, professionalism	Finance, healthcare, technology
Green	Growth, health, nature, success	Eco brands, success messages, finance
Yellow	Optimism, warmth, attention	Warnings, highlights, children's products
Purple	Luxury, creativity, mystery	Beauty, premium brands, arts
Orange	Energy, enthusiasm, playfulness	CTAs, sports, entertainment

Accessibility and Color

When building color palettes, consider accessibility:

• WCAG contrast ratios: 4.5:1 minimum for normal text, 3:1 for large text
• Color blindness: 8% of men have color vision deficiency
• Don't rely on color alone: Use icons, patterns, or text labels
• Test your palette: Use tools like Contrast Checker or Color Oracle

Using CSS Variables for Palettes

Store your palette in CSS custom properties for easy maintenance:

:root {
    --color-primary: #4285f4;
    --color-primary-dark: #3367d6;
    --color-primary-light: #7baaf7;
    --color-secondary: #ea4335;
    --color-accent: #fbbc04;

    /* Semantic colors */
    --color-success: #34a853;
    --color-warning: #fbbc04;
    --color-error: #ea4335;
}

.btn-primary {
    background-color: var(--color-primary);
}

.btn-primary:hover {
    background-color: var(--color-primary-dark);
}