5. Color Theory & Psychology
Color is Communication
Color is rarely just an aesthetic choice in professional software engineering. Color dictates hierarchy, indicates interactive states, and communicates system status. Using the wrong color can actively confuse or stress a user.
🧠 Psychological Associations
Humans have deeply ingrained psychological reactions to color:
- Blue: Trust, security, corporate stability. (e.g., Banks, Facebook, Ford).
- Red: Danger, urgency, passion, errors. (e.g., Delete buttons, Netflix).
- Green: Success, growth, safety. (e.g., Success toasts, CashApp).
📐 The 60-30-10 Rule
A classic interior design rule adapted for UI design. This ratio ensures your interface feels balanced and prevents visual fatigue:
- 60% Primary Color: The dominant background canvas (usually white, light gray, or very dark gray for dark mode).
- 30% Secondary Color: Supports the primary color (often used for cards, headers, or sidebars).
- 10% Accent Color: The 'Call to Action'. Used extremely sparingly to immediately draw the eye to the most important button or link.
🚫 The 'Gray Trap'
Never use pure black #000000 for text on a pure white background. The 100% contrast creates visual vibration and severe eye strain during long reading sessions. Professional UI softens this by using very dark grays (e.g., #1A1A1A or #333333).
In the Sandbox, you will find a visually chaotic, unbalanced interface. You must repair it using the 60-30-10 rule. First, eliminate the 'Gray Trap' by changing the pure black text to a softer dark gray. Second, set the background to a neutral 60% color. Finally, apply a vibrant 10% Accent Color strictly to the primary Call-to-Action (CTA) button to establish a clear visual hierarchy.
Build a Color System
Primary text ≥ 4.5:1 · Accent ≥ 3:1 contrast against background. Colors must be distinct.
Knowledge Check
Ready to test your understanding of 5. Color Theory & Psychology?