oborchers/color-theory-application

Color Is a System, Not a Feeling — Build It with HSL and Constrain It with Rules

Color decisions made by intuition drift over time. Color decisions made by system scale indefinitely. Pick hues with harmony theory, generate shades with lightness math, enforce contrast with WCAG, and assign meaning with semantic tokens.

HSL as the Designer's Model

Use HSL (Hue, Saturation, Lightness) for all color work. RGB and hex are machine formats — HSL maps to how humans perceive color.

| Task | HSL | RGB/Hex | |------|-----|---------| | Make a color lighter | Increase L | Guess and check all 3 channels | | Create a complementary color | Rotate H by 180 degrees | No intuitive relationship | | Generate a shade scale | Fix H and S, vary L in steps | Manual trial and error |

For perceptual uniformity in production, consider OKLCH (oklch(L C H)) — it corrects HSL's lightness distortion across hues.

The 60-30-10 Rule

| Tier | Percentage | Role | Typical Choice | |------|-----------|------|----------------| | Dominant | 60% | Backgrounds, surfaces | Neutral (white, light gray, dark gray) | | Secondary | 30% | Cards, sidebars, borders | Tinted neutral or subdued brand | | Accent | 10% | CTAs, highlights, active states | Saturated brand color |

Limit to 3-6 distinct hue families. Most successful SaaS products use a single brand hue plus neutrals and semantic colors.

Shade Scale Generation

Generate 9 steps (50-900) by fixing hue, varying lightness, and reducing saturation 5-15% at extremes.

| Step | Lightness | Use Case | Step | Lightness | Use Case | |------|-----------|----------|------|-----------|----------| | 50 | 95-97% | Subtle backgrounds | 500 | 45-50% | Base color | | 100 | 90-92% | Light backgrounds | 600 | 38-42% | Hover states | | 200 | 82-85% | Borders, dividers | 700 | 28-32% | Active/pressed | | 300 | 70-75% | Disabled states | 800 | 20-23% | Dark text | | 400 | 58-62% | Placeholder text | 900 | 12-15% | Headings |

Contrast Verification

Apply WCAG AA contrast ratios (see accessibility-inclusive-design skill for the full requirements). In practice: text on the 500 shade rarely passes against white. Use 600-900 for text, 50-200 for backgrounds. Always verify with a contrast checker.

No Pure Black

Never use #000000. Pure black creates 21:1 contrast against white, causing eye fatigue. Use brand-tinted dark grays instead: hsl(220, 15%, 12%) for text, hsl(220, 15%, 10%) for dark backgrounds.

Semantic Colors and Dark Mode

Assign fixed meaning: success = green, warning = amber, error = red, info = blue. Never repurpose these hues. Always pair color with redundant encoding (see accessibility-inclusive-design skill for color independence rules).

Dark mode is not an inversion:

1. Use dark grays, not pure black — hsl(H, 10-15%, 10-12%) for backgrounds
2. Reduce saturation by 10-20% — saturated colors vibrate on dark backgrounds
3. Reverse the elevation model — lighter surfaces are "higher"
4. Reduce white text to 87% opacity — pure white causes halation
5. Adjust semantic colors — green and red need lightness boosts for dark backgrounds

Harmony Schemes

| Scheme | Hue Relationship | Best For | |--------|-----------------|----------| | Complementary | 180 degrees apart | CTAs, alerts | | Analogous | 30 degrees apart | Backgrounds, gradients | | Triadic | 120 degrees apart | Data visualization | | Split-complementary | 150 + 210 degrees | Versatile; safer than complementary |

Anti-Patterns

| Anti-Pattern | Fix | |-------------|-----| | More than 6 hue families | Limit to 3-6 hues maximum | | No contrast verification | Test every text/background pair (see accessibility-inclusive-design for ratios) | | Pure black (#000) | Use brand-tinted dark grays | | Color as the sole indicator | Apply color independence rule (see accessibility-inclusive-design skill) | | Inverting colors for dark mode | Reduce saturation 10-20%; use dark grays |

Cross-Media Notes

• Presentations: Use high-contrast palettes — projectors wash out colors. Avoid light text on light backgrounds.
• CVs/Resumes: One accent color maximum (blue or dark teal). Color for headings or rules only.
• Print: Convert to CMYK early — bright screen colors shift significantly.
• Data visualization: Sequential palette (single hue, varying lightness) for ordered data. Categorical palette (distinct hues, max 5-7) for unrelated categories.

Examples

Working implementations in examples/:

• examples/color-system-and-dark-mode.md — Complete HSL-based color system with shade scale generation, semantic tokens, and dark mode in CSS, Tailwind, and React

Review Checklist

When reviewing or building color systems:

• [ ] All colors defined in HSL (or OKLCH) — no raw hex or RGB in source code
• [ ] 60-30-10 rule applied: dominant neutral, secondary subdued, accent saturated
• [ ] Maximum 3-6 distinct hue families in the palette
• [ ] Shade scale uses 9 steps (50-900) generated by systematic lightness variation
• [ ] All text/background pairs meet WCAG AA contrast (see accessibility-inclusive-design skill)
• [ ] No pure black (#000000) used for text or backgrounds
• [ ] Semantic colors (success, warning, error, info) have consistent meanings
• [ ] Color independence rule applied (see accessibility-inclusive-design skill)
• [ ] Dark mode reduces saturation by 10-20% and uses dark grays, not black
• [ ] Dark mode text uses reduced opacity (87%) rather than pure white
• [ ] Harmony scheme documented (complementary, analogous, triadic, or split-complementary)