| Color Name | Hex Code | Preview | Use Case | Notes |
|---|---|---|---|---|
| Primary Blue | #3498db |
Main UI elements, interactive elements | Evokes trust, communication, technology. | |
| Secondary Green | #2ecc71 |
Positive actions, confirmations, progress | Symbolizes growth, productivity, positivity. | |
| Secondary Red | #e74c3c |
Errors, warnings, urgent notifications | Signifies urgency, attention. | |
| Neutral Light Gray | #ecf0f1 |
Primary background, large surface areas | Provides a clean and neutral backdrop. | |
| Neutral Dark Gray | #bdc3c7 |
Text, icons, dividers, subtle UI elements | Ensures readability and visual hierarchy. | |
| Accent Yellow | #f1c40f |
Highlights, interactive elements, playful touches | Adds energy and visual interest. | |
| Accent Purple | #9b59b6 |
Secondary interactive elements, sophisticated touches | Conveys sophistication and creativity. |
- Invert Primary Blue and Secondary Green for dark mode to maintain contrast and readability.
- Neutral Light Gray should become a darker shade (e.g.,
#333333) and Neutral Dark Gray a lighter shade (e.g.,#EEEEEE).
- Ensure sufficient contrast (WCAG AA minimum) between text and background colors for all combinations. Use a contrast checker tool.
- Integrate brand-specific colors if applicable, while maintaining consistency with the core palette's purpose.
- Consider offering user customization options for color themes to enhance personalization.