Color Theory for Designers: Choosing Palettes That Work
7 min read · Updated 2025
Colour is one of the most powerful tools in a designer's arsenal. It communicates emotion before words, guides the user's eye, establishes brand identity, and affects perceived usability. This guide covers the foundational theory every designer needs.
The Color Wheel
The traditional RYB (Red-Yellow-Blue) color wheel organises colours into three tiers:
- Primary: Red, Yellow, Blue — cannot be mixed from other colours
- Secondary: Orange (R+Y), Green (Y+B), Purple (R+B) — mix two primaries
- Tertiary: Red-Orange, Yellow-Orange, Yellow-Green, Blue-Green, Blue-Purple, Red-Purple
Digital design uses the RGB model (Red, Green, Blue) since screens emit light. CSS and design tools like Figma work in HSL (Hue, Saturation, Lightness), which maps directly to the colour wheel's intuitions.
Color Harmony Schemes
Complementary
Opposite colors (red + green, blue + orange). Maximum contrast. Use the less dominant color sparingly as an accent.
Analogous
Adjacent colors (blue, blue-green, green). Harmonious and pleasing. Common in nature. Low contrast — needs careful tonal variation.
Triadic
Three colors equally spaced (red, yellow, blue). Vibrant and high contrast. Works best with one dominant and two accents.
Split-Complementary
A color + the two adjacent to its complement. High contrast but less tension than complementary. Good for beginners.
Color Psychology
| Color | Associations | Brand Examples |
|---|---|---|
| ■ Blue | Trust, calm, professionalism | Facebook, LinkedIn, PayPal, Ford |
| ■ Red | Urgency, passion, energy, appetite | Coca-Cola, YouTube, Target, Netflix |
| ■ Orange | Enthusiasm, creativity, affordability | Amazon, Fanta, Harley-Davidson |
| ■ Yellow | Optimism, warmth, caution | McDonald's, IKEA, Snapchat |
| ■ Green | Nature, health, money, growth | Whole Foods, Starbucks, John Deere |
| ■ Purple | Luxury, wisdom, creativity | Cadbury, Hallmark, FedEx (purple+orange) |
The 60-30-10 Rule
A practical formula for balanced colour use:
60%
Dominant
30%
Secondary
10%
Accent
Accessibility: Contrast Ratios
WCAG 2.1 requires:
- AA standard: 4.5:1 contrast ratio for normal text; 3:1 for large text
- AAA standard: 7:1 for normal text; 4.5:1 for large text
Never use light grey text on white backgrounds or low-contrast colour combinations, even if they look elegant — a significant percentage of users have colour blindness or vision impairments.
Generate colour palettes with BrainBoost's Color Palette Generator. Also use the HTML Color Picker and CSS Gradient Generator.