Practical color theory — how to pick palettes, maintain contrast, and build cohesive color systems for web interfaces.
You Do Not Need to Be a Designer
Color theory sounds academic, but for web development it boils down to a few practical rules. Follow them and your UIs will look polished without hiring a designer.
Start with One Accent Color
Pick a single brand/accent color. Derive everything else from it. Most of your interface should be neutral (grays) — the accent color appears on CTAs, links, and key interactive elements.
The 60-30-10 Rule
- 60% dominant color (background, large surfaces)
- 30% secondary color (cards, secondary sections)
- 10% accent color (buttons, highlights, active states)
Neutral Palette
Every interface needs a gray scale. For dark themes:
- Background: #0a0a0a to #111111
- Cards/elevated: #161616 to #1a1a1a
- Borders: #1e1e1e to #2a2a2a
- Muted text: #666666 to #737373
- Body text: #d4d4d4 to #e5e5e5
- Headings: #f5f5f5 to #ffffff
Contrast for Readability
WCAG requires 4.5:1 contrast ratio for normal text. Use Chrome DevTools to check — hover over any color and it shows the ratio. If the contrast is low, lighten the text or darken the background.
Semantic Colors
Beyond your brand color, you need:
- Success: green shades (#22c55e family)
- Warning: amber/yellow (#f59e0b family)
- Error: red (#ef4444 family)
- Info: blue (#3b82f6 family)
oklch for Better Color Manipulation
The oklch() CSS function gives you perceptually uniform colors. Changing the lightness value actually looks uniform to human eyes (unlike HSL where lightness perception varies wildly by hue).
Tools
- Realtime Colors — preview color palettes on a real layout
- Coolors — palette generator with contrast checking
- Chrome DevTools — built-in contrast checker on any element
The One Rule
If something looks wrong with your colors, it is usually a contrast issue. Check the contrast ratio first before changing hues.