1.7 KiB
1.7 KiB
title, description, tags
| title | description | tags | |||||
|---|---|---|---|---|---|---|---|
| Color Theory for Web | Understanding color harmony, contrast, and psychological impact. |
|
Color Theory for Web
Color Harmony Models
Monochromatic (Safe)
- Single hue with tints/shades
- Use: backgrounds, subtle UI
- Example:
#0a0a0a→#1a1a1a→#2a2a2a
Analogous (Natural)
- Colors next to each other on wheel
- Use: gradients, section backgrounds
- Example:
#6366f1→#8b5cf6→#a78bfa
Complementary (Bold)
- Opposite colors on wheel
- Use: CTAs, accent elements
- Example:
#6366f1+#f59e0b
Triadic (Vibrant)
- Three colors 120° apart
- Use: feature cards, badges
- Example:
#6366f1+#10b981+#f59e0b
Color Roles
| Role | Ratio | Purpose | Example |
|---|---|---|---|
| Background | 60% | Canvas | #0a0a0a |
| Surface | 30% | Cards, sections | #111111 |
| Accent | 10% | CTA, links, highlights | #6366f1 |
WCAG Contrast Ratios
| Level | Ratio | Use Case |
|---|---|---|
| AA Normal | 4.5:1 | Body text (16px) |
| AA Large | 3:1 | Headings, icons >24px |
| AAA | 7:1 | Critical information |
Psychological Color Mapping
- Blue (#6366f1): Trust, technology, reliability
- Green (#10b981): Success, growth, action
- Orange (#f59e0b): Warning, urgency, attention
- Red (#ef4444): Error, danger, delete
- Purple (#8b5cf6): Creativity, premium, AI
- Cyan (#06b6d4): Innovation, futuristic, data
Anti-Patterns
- Never use more than 3 accent colors
- Never put accent color on text without checking contrast
- Never use pure
#000000or#ffffff - Never ignore dark/light mode variants