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

Color Psychology

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);
}