Color is the fastest way to set tone. Before users read a single word, they've already formed an impression based on your palette.
Start with One Anchor Color
Pick a primary brand color first. Everything else supports it. Use tools like Adobe Color or Coolors to generate harmonious secondary and accent colors.
The 60-30-10 Rule
- 60% neutral background (whites, grays)
- 30% secondary surfaces and text areas
- 10% accent color for CTAs and highlights
Semantic Colors
Beyond brand colors, define semantic tokens: success (green), warning (amber), error (red), and info (blue). Keep these consistent across your product.
Pro Tip
Test every text/background combination with a contrast checker. WCAG AA requires 4.5:1 for normal text.
Dark Mode Considerations
Don't just invert colors. Reduce saturation, use off-black backgrounds (#121212), and elevate surfaces with subtle lightness shifts.