Color Theory Fundamentals
Color theory provides systematic rules for combining colors based on the color wheel. The wheel arranges hues in a circle with complementary colors opposite each other. Harmonies are defined by geometric relationships on this wheel; for example complementary colors sit 180 degrees apart while triadic colors form an equilateral triangle. Understanding these relationships helps designers create palettes that feel intentional and balanced.
Choosing the Right Harmony
Different harmony types serve different design goals. Complementary palettes create strong visual tension and are excellent for call-to-action elements that need to stand out. Analogous palettes feel natural and serene; ideal for backgrounds and body content. Triadic palettes offer rich variety while maintaining balance; good for playful or creative brands. Monochromatic palettes are sophisticated and elegant; perfect for minimalist designs.
Working with HSL Color Space
HSL represents colors as Hue (0-360 degrees), Saturation (0-100%), and Lightness (0-100%). This model is ideal for palette generation because rotating the hue creates harmonious colors while adjusting saturation and lightness creates tints, shades, and tones. Unlike RGB which mixes light channels, HSL maps directly to how we perceive and describe colors.
Applying Palettes in Production
Export your palette as CSS custom properties and define them on the :root element. Use semantic naming in your components that maps to these variables. This approach makes it trivial to swap palettes for theming, A/B tests, or user preferences. For design tokens, translate the CSS variables into your token system for consistent use across platforms and components.
