Color Theory

When to use each

SaaS / productivity tool   → Monochromatic (calm) + semantic accent colors
Marketing / landing page   → Split-complementary (energetic but controlled)
Brand identity             → Analogous (memorable cohesion) + 1 complementary accent
Data visualization         → Triadic or tetradic (maximum differentiation)
Emergency / health UI      → Complementary avoided — red+green is color-blind problematic

The "60-30-10" distribution rule

60% — Dominant color (usually neutral)
30% — Secondary color (brand or supporting)
10% — Accent color (CTA, highlights, alerts)

Never flip this ratio. More than 10% accent creates visual noise.

Color Psychology by Industry

Colors carry cultural weight. Use this as a starting point — always validate with your target audience.

Anti-patterns

• Blue for everything — overused in tech; differentiate deliberately
• Green = only money — also nature, health, sustainability; pick correctly
• Red for brand color — avoid if the product handles errors/alerts (brand red vs. error red conflict)

Dark Mode Color Strategy

Dark mode is not filter: invert(1). It requires a separate color system.

The perceptual lightness problem

HSL lightness is not perceptual. A yellow at L50 looks much brighter than a blue at L50.

Use OKLCH (perceptually uniform) for dark mode tokens:

/* Light mode */
:root {
  --surface-default:  oklch(98% 0.005 260);   /* near-white, slightly cool */
  --surface-raised:   oklch(96% 0.005 260);
  --surface-overlay:  oklch(93% 0.005 260);
  --text-primary:     oklch(18% 0.010 260);   /* near-black */
  --text-secondary:   oklch(42% 0.010 260);
  --text-disabled:    oklch(65% 0.005 260);
}

/* Dark mode */
[data-theme="dark"] {
  --surface-default:  oklch(14% 0.010 260);   /* NOT black — dark indigo-tinted */
  --surface-raised:   oklch(18% 0.010 260);   /* slightly lighter = "raised" */
  --surface-overlay:  oklch(22% 0.010 260);
  --text-primary:     oklch(92% 0.005 260);   /* NOT white — slightly warm */
  --text-secondary:   oklch(65% 0.005 260);
  --text-disabled:    oklch(40% 0.005 260);
}

Dark mode: what changes vs. what stays

Elevation in dark mode

Light mode: elevation = shadow depth
Dark mode:  elevation = surface lightness (higher = lighter)

--surface-level-0: oklch(14% 0.010 260)   /* base */
--surface-level-1: oklch(18% 0.010 260)   /* cards */
--surface-level-2: oklch(22% 0.010 260)   /* floating panels */
--surface-level-3: oklch(26% 0.010 260)   /* modals */
--surface-level-4: oklch(30% 0.010 260)   /* tooltips */

Common dark mode mistakes

WRONG: background: #000000  →  Harsh, unnatural
RIGHT: background: ~#0f1117  →  Slightly off-black

WRONG: color: #ffffff        →  Harsh against dark bg
RIGHT: color: #e8eaf0        →  Warm off-white

WRONG: Same saturation as light mode  →  Neon, glaring
RIGHT: Desaturate brand color 10-15% in dark mode

Simultaneous Contrast

Colors look different depending on what surrounds them. This affects UI decisions.

The phenomenon

The same grey looks lighter on dark background and darker on light background:

[light grey on black] looks almost white
[light grey on white] looks almost mid-grey

Practical impact

• A button color that looks neutral on white may look aggressive on dark surfaces
• Never finalize color decisions in isolation — always test against actual backgrounds
• Brand colors need separate light/dark mode values, not just inherited contrast

Chromatic adaptation

The eye adapts to the ambient light color. In dark mode, slightly warm neutrals (hue ~250-280) feel neutral. Pure grey (hue 0) looks cold and clinical in dark mode.

Color Blindness Design

~8% of males have color vision deficiency. Do not rely on color alone.

Types and prevalence

Design rules

1. Never use red+green as the only distinguisher (success vs. error)

   WRONG: green check vs. red X — looks identical to deuteranopes
   RIGHT: green check vs. red X + different shapes + label text
   

2. Add a secondary cue: icon, pattern, label, or position

3. Test with simulation tools:

   • Figma: Accessibility plugin → Color Blind mode
   • Browser: Chrome DevTools → Rendering → Emulate vision deficiency
   • Stark (Figma plugin)

4. Use colorblind-safe palettes for data visualization:

   Okabe-Ito palette (colorblind safe):
   #E69F00  Orange
   #56B4E9  Sky Blue
   #009E73  Bluish Green
   #F0E442  Yellow
   #0072B2  Blue
   #D55E00  Vermillion
   #CC79A7  Reddish Purple
   #000000  Black
   

Color Space Decisions

HSL vs. HSLuv vs. OKLCH

OKLCH in CSS

/* Format: oklch(lightness% chroma hue) */
oklch(75% 0.15 160)   /* green-ish */
oklch(55% 0.25 30)    /* warm orange */
oklch(40% 0.18 270)   /* violet */

/* Compared to HSL, OKLCH ensures:
   oklch(75% 0.15 160) and oklch(75% 0.15 30)
   have the same PERCEIVED lightness — HSL does not guarantee this */

When to use each in practice

Token definition:   OKLCH (perceptual precision)
Figma work:         HSL (tool compatibility)
Code output:        oklch() with fallback hex
Tailwind config:    oklch() via CSS custom properties

Checklist

• Color harmony rule chosen and justified (not just "looks nice")
• 60-30-10 distribution applied (dominant, secondary, accent)
• Brand color hue checked against industry psychology
• Brand color doesn't conflict with semantic colors (error red, success green)
• Dark mode uses separate color system — not CSS invert or simple negation
• Dark mode surfaces are dark grey, not black; text is off-white, not white
• Elevation in dark mode uses surface lightness, not shadow only
• Simultaneous contrast tested: colors checked on both light and dark backgrounds
• No red+green-only differentiation — secondary cue (icon, label, shape) added
• Data visualization palette is colorblind-safe
• Colorblind simulation run in Figma or DevTools
• OKLCH used for token definitions where precision matters