---
title: Color Theory for Web
description: Understanding color harmony, contrast, and psychological impact.
tags: [color, theory, psychology, contrast, harmony]
---

# 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 `#000000` or `#ffffff`
- Never ignore dark/light mode variants