Color Palette Generator

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