Color Theory & Application

Color drives emotion, directs attention, and communicates meaning faster than text. A well-chosen palette makes a product feel professional and trustworthy. A poor one makes it feel cheap or confusing, even if everything else is well-designed.

The 60-30-10 Rule

The most reliable formula for color distribution. It creates balance without requiring design intuition.

┌─────────────────────────────────────────────────────┐
│                                                     │
│   60% DOMINANT                                      │
│   (Background, large surfaces)                      │
│                                                     │
│   ┌─────────────────────────────┐                   │
│   │                             │                   │
│   │   30% SECONDARY             │                   │
│   │   (Cards, sidebars, nav)    │                   │
│   │                             │                   │
│   │   ┌─────────────┐          │                   │
│   │   │ 10% ACCENT  │          │                   │
│   │   │ (CTAs, links)│          │                   │
│   │   └─────────────┘          │                   │
│   └─────────────────────────────┘                   │
└─────────────────────────────────────────────────────┘

In practice:

Common mistake: Using the accent color too much. If your brand color covers 30%+ of the screen, it's overwhelming. The accent is powerful because it's rare.

Color Psychology

Color associations are culturally influenced but these hold broadly for Western audiences:

Important: Don't choose colors based on psychology alone. Choose based on your brand identity, then check that the psychological associations don't conflict.

Building a Color Palette

Required Palette Colors

Every product needs at minimum:

BRAND COLORS:
  Primary:      Main brand color (used for CTAs, links, key actions)
  Secondary:    Supporting brand color (used for secondary elements)

NEUTRAL PALETTE:
  Gray-50:      Lightest (backgrounds)
  Gray-100:     Light (card backgrounds, borders)
  Gray-200:     Light (dividers, disabled backgrounds)
  Gray-300:     Medium-light (borders, icons)
  Gray-400:     Medium (placeholder text — check contrast!)
  Gray-500:     Medium-dark (secondary text)
  Gray-600:     Dark (body text)
  Gray-700:     Darker (headings)
  Gray-800:     Very dark (primary headings)
  Gray-900:     Darkest (high-emphasis text)

SEMANTIC COLORS:
  Success:      Green — positive states, confirmations
  Warning:      Yellow/Orange — caution, non-critical alerts
  Error:        Red — problems, destructive actions
  Info:         Blue — informational messages, tips

Generating Color Variants

Each color needs a range from light (for backgrounds) to dark (for text on light backgrounds):

:root {
  /* Primary — Blue */
  --primary-50:  #EBF5FF;  /* Backgrounds, selected row highlight */
  --primary-100: #CCE5FF;  /* Light badge backgrounds */
  --primary-200: #99CCFF;  /* Light borders */
  --primary-300: #66B2FF;  /* Icons on light backgrounds */
  --primary-400: #3399FF;  /* Secondary buttons */
  --primary-500: #0066CC;  /* Base — primary buttons, links */
  --primary-600: #0052A3;  /* Hover state */
  --primary-700: #003D7A;  /* Active/pressed state */
  --primary-800: #002952;  /* Dark backgrounds */
  --primary-900: #001429;  /* Darkest — text on light backgrounds */

  /* Error — Red */
  --error-50:  #FFF5F5;  /* Error background */
  --error-100: #FFE3E3;  /* Error badge background */
  --error-500: #E03131;  /* Error text, icons */
  --error-600: #C92A2A;  /* Error hover */
  --error-700: #A61E1E;  /* Error dark text */

  /* Success — Green */
  --success-50:  #F0FFF4;
  --success-100: #C6F6D5;
  --success-500: #38A169;
  --success-600: #2F855A;
  --success-700: #276749;
}

Tools for generating variants:

• Tailwind CSS Colors: pre-built palettes with 50-950 shades
• Realtime Colors (realtimecolors.com): preview palette on a live page
• Coolors (coolors.co): generate harmonious palettes
• Huemint: AI-powered palette generation
• ColorBox by Lyft: systematic shade generation

Color Harmony Methods

For most product interfaces, monochromatic + one accent or complementary palettes are the safest choices. Save triadic and complex harmonies for brand/marketing work.

Contrast Requirements (WCAG 2.2)

These aren't guidelines, they're legal requirements in many jurisdictions. Get them right.

Common Contrast Failures

Tools for checking contrast:

• WebAIM Contrast Checker (webaim.org/resources/contrastchecker)
• Stark (Figma/Sketch plugin)
• Colour Contrast Analyser (desktop app)
• Chrome DevTools: Inspect element, the color picker shows contrast ratio

Testing Shortcut

Memorize this: #767676 on #FFFFFF = exactly 4.5:1. Any gray darker than #767676 passes for normal text on white.

Semantic Color Usage

Colors should communicate meaning consistently:

Critical rule: Never use color as the only indicator of meaning. Always pair with text, icons, or patterns. 8% of men are colorblind.

BAD (color only):
┌────────────────┐ ┌────────────────┐ ┌────────────────┐
│  Green border  │ │  Yellow border │ │   Red border   │
│  (passed)      │ │  (warning)     │ │   (failed)     │
└────────────────┘ └────────────────┘ └────────────────┘

GOOD (color + icon + text):
┌────────────────┐ ┌────────────────┐ ┌────────────────┐
│ ✓ Passed       │ │ ⚠ Warning      │ │ ✗ Failed       │
│  Green border  │ │  Yellow border │ │   Red border   │
└────────────────┘ └────────────────┘ └────────────────┘

Dark Mode

Dark mode isn't "invert all the colors." It requires deliberate design.

Dark Mode Principles

Dark Mode CSS

/* Using CSS custom properties for easy theming */
:root {
  --bg-primary: #FFFFFF;
  --bg-surface: #F5F5F5;
  --text-primary: #1A1A1A;
  --text-secondary: #666666;
  --accent: #0066CC;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #121212;
    --bg-surface: #1E1E1E;
    --text-primary: #E0E0E0;
    --text-secondary: #A0A0A0;
    --accent: #4D9FFF;  /* Lighter/desaturated for dark bg */
  }
}

Dark Mode Mistakes

Color in Data Visualization

When using color to represent data, follow these guidelines:

Sequential:    ░░░░ ▒▒▒▒ ▓▓▓▓ ████  (light blue → dark blue)
Diverging:     ████ ▓▓▓▓ ░░░░ ▓▓▓▓ ████  (red → white → blue)
Categorical:   ████ ████ ████ ████ ████  (5 distinct hues)

Common Mistakes

Key Takeaways

• Apply 60-30-10: most of the screen is neutral, 30% secondary, 10% accent.
• Build a complete palette: brand primary, neutral grays (50-900), semantic colors (success, warning, error, info).
• Check contrast for every text/background pair. Memorize: #767676 on white = 4.5:1 minimum.
• Never use color as the only way to communicate meaning. Always supplement with text or icons.
• Dark mode isn't inverted light mode. Use off-black backgrounds, desaturated accents, and lighter surfaces for elevation.
• Keep it simple: 1-2 brand colors, a neutral gray palette, and 4 semantic colors covers 99% of UI needs.