Color Theory

The Psychology of Color in User Interface Design

VZ

Vadim Zlygastev

Editor

Color is a powerful communication tool. It can signal action, influence mood, and even affect physiological reactions. In UI design, color is strategic, not just aesthetic.

The Meaning of Colors

Blue Trust, security, stability. The most popular color for tech and finance apps.
Red Urgency, passion, error. Use for destructive actions or important alerts.
Green Growth, success, health. The universal color for "Go" or confirmation.
Yellow Optimism, caution, attention. Great for highlighting warnings or premium features.

The 60-30-10 Rule

A classic interior design rule that works perfectly for UI:

  • 60% Primary Color: Usually a neutral background color (white, gray, or cream).
  • 30% Secondary Color: Your brand color, used for headers, cards, or illustrations.
  • 10% Accent Color: A high-contrast color for Call-to-Action (CTA) buttons and key interactive elements.

Accessibility First

Never sacrifice accessibility for aesthetics. Ensure your text has sufficient contrast against the background (WCAG AA standard is 4.5:1). Tools like the WebAIM Contrast Checker are essential for validating your palette.

Conclusion

By understanding color psychology, you can guide users towards desired actions and create an emotional connection with your brand. Choose your palette wisely!