Color Theory for Web Design
A complete guide to color theory for web designers and developers. Learn to create harmonious color schemes, understand color psychology, and build accessible, beautiful interfaces.
Color Fundamentals
Understanding the color wheel and basic color relationships.
The Color Wheel
Primary Colors
The three colors that cannot be created by mixing other colors. All other colors are derived from these.
Secondary Colors
Created by mixing two primary colors together.
Warm vs Cool Colors
Colors evoke temperature associations that affect mood and perception.
Energetic, passionate, attention-grabbing. Use for CTAs and emphasis.
Calm, professional, trustworthy. Use for backgrounds and UI elements.
Color Schemes
Proven color combinations based on their position on the color wheel.
Single hue with varying saturation and lightness. Clean and cohesive.
Opposite colors on the wheel. High contrast and vibrant.
Adjacent colors on the wheel. Harmonious and natural.
Three colors equally spaced (120° apart). Balanced and vibrant.
Base color + two adjacent to its complement. Less tension than complementary.
Four colors equally spaced (90° apart). Rich but requires balance.
Color Psychology
Colors evoke emotional responses. Use them strategically in your designs.
Red
Energy, urgency, passion, danger. Use for errors, sales, CTAs. Increases heart rate.
Orange
Creativity, enthusiasm, warmth. Use for calls-to-action, playful brands. Energetic but friendly.
Yellow
Optimism, clarity, warmth, caution. Use for highlights, warnings. Grabs attention but can strain eyes.
Green
Nature, growth, success, money. Use for success states, eco brands. Most restful for eyes.
Blue
Trust, stability, calm, professionalism. Most popular for tech/finance. Suppresses appetite.
Purple
Luxury, creativity, mystery, spirituality. Use for premium brands. Associated with royalty.
Pink
Romance, femininity, playfulness, youth. Use for beauty, lifestyle brands. Calming effect.
Gray/Black
Sophistication, elegance, power, neutrality. Use for luxury, tech. Timeless and professional.
CSS Color Formats
Different ways to define colors in CSS, each with their own advantages.
Named Colors
/* 147 named colors available */
.element {
color: red;
color: blue;
color: rebeccapurple;
color: coral;
color: transparent;
}Hexadecimal
/* Most common format */
.element {
color: #ff0000; /* Red */
color: #f00; /* Shorthand (same as above) */
color: #ff0000ff; /* With alpha (8-digit) */
color: #f00f; /* Shorthand with alpha */
}
/* Hex breakdown: #RRGGBB */
/* R = Red (00-FF), G = Green (00-FF), B = Blue (00-FF) */RGB / RGBA
/* Red, Green, Blue values (0-255) */
.element {
color: rgb(255, 0, 0); /* Red */
color: rgb(102, 126, 234); /* Custom blue */
color: rgba(255, 0, 0, 0.5); /* 50% transparent red */
}
/* Modern syntax (CSS Color Level 4) */
.element {
color: rgb(255 0 0); /* Space-separated */
color: rgb(255 0 0 / 50%); /* With alpha */
color: rgb(255 0 0 / 0.5); /* Alpha as decimal */
}HSL / HSLA (Recommended)
/* Hue, Saturation, Lightness - most intuitive! */
.element {
color: hsl(0, 100%, 50%); /* Red */
color: hsl(220, 70%, 65%); /* Custom blue */
color: hsla(0, 100%, 50%, 0.5); /* 50% transparent */
}
/* Modern syntax */
.element {
color: hsl(0 100% 50%); /* Space-separated */
color: hsl(0 100% 50% / 50%); /* With alpha */
}
/* HSL breakdown:
H = Hue (0-360°) - position on color wheel
S = Saturation (0-100%) - intensity
L = Lightness (0-100%) - light to dark */Modern CSS Color Functions
/* OKLCH - perceptually uniform (CSS Color Level 4) */
.element {
color: oklch(70% 0.15 250); /* Lightness, Chroma, Hue */
}
/* color-mix() - blend colors */
.element {
color: color-mix(in srgb, blue 70%, red);
background: color-mix(in oklch, #667eea, white 20%);
}
/* Relative color syntax */
.element {
--base: #667eea;
color: hsl(from var(--base) h s calc(l + 20%));
}HSL Color Model
HSL is the most intuitive way to work with colors programmatically.
Hue (0-360°)
Position on the color wheel. 0° = red, 120° = green, 240° = blue.
0° → 30° → 60° → 90° → 120° → 150° → 180° → 210° → 240° → 270° → 300° → 330°
Saturation (0-100%)
Color intensity. 0% = gray, 100% = full color.
Lightness (0-100%)
How light or dark the color is. 0% = black, 50% = pure color, 100% = white.
Why HSL is Great for Design Systems
/* Generate color variations easily */
:root {
--hue: 220;
--saturation: 70%;
/* Same hue, different lightness */
--primary-900: hsl(var(--hue), var(--saturation), 15%);
--primary-700: hsl(var(--hue), var(--saturation), 30%);
--primary-500: hsl(var(--hue), var(--saturation), 50%);
--primary-300: hsl(var(--hue), var(--saturation), 70%);
--primary-100: hsl(var(--hue), var(--saturation), 90%);
}
/* Create hover states by adjusting lightness */
.button {
background: hsl(220, 70%, 50%);
}
.button:hover {
background: hsl(220, 70%, 45%); /* Just darken */
}Building Palettes
Practical approaches to creating cohesive color palettes.
The 60-30-10 Rule
A classic interior design principle that works beautifully for UI.
:root {
/* 60% - Dominant: backgrounds, large areas */
--color-dominant: #1a1a2e;
/* 30% - Secondary: cards, sections, headers */
--color-secondary: #667eea;
/* 10% - Accent: CTAs, highlights, important elements */
--color-accent: #f093fb;
}Example Palettes
Professional Blue
Vibrant Purple
Nature Green
UI Color Roles
Standard color semantics for user interfaces.
Primary
Brand color, main CTAs, key actions
Secondary
Less prominent actions, alternative buttons
Success
Positive actions, confirmations, completion
Error/Danger
Errors, destructive actions, alerts
Warning
Caution states, important notices
Info
Informational messages, tips, help
Implementing Semantic Colors
:root {
/* Semantic colors */
--color-success: #22c55e;
--color-success-light: #dcfce7;
--color-success-dark: #16a34a;
--color-error: #ef4444;
--color-error-light: #fef2f2;
--color-error-dark: #dc2626;
--color-warning: #f59e0b;
--color-warning-light: #fef3c7;
--color-warning-dark: #d97706;
--color-info: #3b82f6;
--color-info-light: #eff6ff;
--color-info-dark: #2563eb;
}
/* Usage */
.alert-success {
background: var(--color-success-light);
border-color: var(--color-success);
color: var(--color-success-dark);
}
.alert-error {
background: var(--color-error-light);
border-color: var(--color-error);
color: var(--color-error-dark);
}Color Accessibility
Ensure your colors are usable by everyone, including those with visual impairments.
Contrast Ratios (WCAG)
Minimum contrast between text and background colors.
| Level | Normal Text | Large Text | UI Components |
|---|---|---|---|
| AA (Minimum) | 4.5:1 | 3:1 | 3:1 |
| AAA (Enhanced) | 7:1 | 4.5:1 | — |
Contrast Examples
✅ Good Contrast
Easy to read for everyone
⚠️ Borderline
May strain some users
❌ Poor Contrast
Difficult to read
Don't Rely on Color Alone
/* ❌ Bad - only color indicates error */
.input-error {
border-color: red;
}
/* ✅ Good - color + icon + text */
.input-error {
border-color: red;
border-width: 2px; /* Thicker border */
}
.error-message {
color: red;
}
.error-message::before {
content: "⚠️ "; /* Icon prefix */
}<!-- Always pair color with other indicators -->
<input class="input-error" aria-invalid="true">
<p class="error-message">
⚠️ Please enter a valid email address
</p>Color Blindness Considerations
/* Avoid problematic combinations */
/* ❌ Red/Green - affects ~8% of men */
.status-good { color: green; }
.status-bad { color: red; }
/* ✅ Better - use blue/orange or add patterns/icons */
.status-good {
color: #22c55e;
background: url('check-icon.svg');
}
.status-bad {
color: #ef4444;
background: url('x-icon.svg');
}Tool: Use our Color Contrast Checker to verify your color combinations meet WCAG standards.
Dark Mode Colors
Best practices for designing dark color schemes.
Dark Mode Palette Example
Dark Mode Best Practices
/* 1. Don't use pure black - too harsh */
/* ❌ */ background: #000000;
/* ✅ */ background: #0d0d14; /* Slight blue tint */
/* 2. Reduce saturation for dark backgrounds */
/* ❌ */ color: hsl(220, 100%, 50%); /* Too vibrant */
/* ✅ */ color: hsl(220, 70%, 65%); /* Softened */
/* 3. Use elevation with lighter surfaces */
:root {
--surface-0: #0d0d14; /* Base */
--surface-1: #1a1a2e; /* Cards */
--surface-2: #2d2d44; /* Modals */
--surface-3: #3d3d5c; /* Dropdowns */
}
/* 4. Flip the hierarchy */
/* Light mode: darker = more important */
/* Dark mode: lighter = more important */
.dark-mode {
--text-primary: #ffffff;
--text-secondary: #a0a0b0;
--text-tertiary: #6b6b7b;
}Learn more: See our Dark Mode in CSS Guide for implementation details.
Practical Tips
Quick guidelines for working with color in web projects.
Start with Neutrals
/* Build your gray scale first */
:root {
--gray-50: #fafafa;
--gray-100: #f4f4f5;
--gray-200: #e4e4e7;
--gray-300: #d4d4d8;
--gray-400: #a1a1aa;
--gray-500: #71717a;
--gray-600: #52525b;
--gray-700: #3f3f46;
--gray-800: #27272a;
--gray-900: #18181b;
}
/* Then add your brand colors */Limit Your Palette
/* Ideal: 1-2 brand colors + neutrals + semantic */
:root {
/* Brand (1-2 colors) */
--primary: #667eea;
--secondary: #764ba2;
/* Neutrals (generated scale) */
--gray-*: ...;
/* Semantic (standard meanings) */
--success: #22c55e;
--error: #ef4444;
--warning: #f59e0b;
--info: #3b82f6;
}Test Early and Often
/* Check your colors against:
✓ Real content (not just lorem ipsum)
✓ Different screen types (OLED, LCD, etc.)
✓ Various lighting conditions
✓ Color blindness simulators
✓ Contrast checkers (WCAG)
✓ Both light and dark modes
*/Use CSS Custom Properties
/* Makes theming and dark mode easy */
:root {
--bg-primary: #ffffff;
--text-primary: #1a1a2e;
}
[data-theme="dark"] {
--bg-primary: #1a1a2e;
--text-primary: #ffffff;
}
/* Components just reference variables */
.card {
background: var(--bg-primary);
color: var(--text-primary);
}