JSTAcademy
0 XP
Back to dashboard
DesignMasters11 m+140 XP

Color theory in practice: building palettes that work

Color psychology, palette construction, contrast ratios & the 60-30-10 rule applied

The 60-30-10 rule is the simplest palette framework: 60% dominant color (usually neutral — white, off-white, dark), 30% secondary color (brand color, used for sections, cards), 10% accent color (used for buttons, highlights, key moments). This ratio prevents visual chaos while allowing personality. The trap: beginners increase the accent color percentage because it feels exciting. But accent colors lose meaning when they're everywhere.

Key Points

  • 60% dominant: your canvas color
  • 30% secondary: structural color for sections and cards
  • 10% accent: CTAs, highlights, key moments only
  • Accessibility: WCAG AA requires 4.5:1 contrast ratio for body text
← Back