How can I balance different colors to create a harmonious design?
TL;DR
To achieve a harmonious design, consider the 60-30-10 rule, which helps balance color use:
- 60% should be your primary color, typically a neutral shade that dominates the background;
- 30% should be a secondary color that complements the primary to add depth, used in elements like text or subheadings;
- 10% should be an accent color, vibrant and used sparingly to draw attention to key elements like buttons and call-to-action elements.
This rule is a flexible guideline rather than a strict formula. Adjust these proportions based on the specific needs of your project and the visual hierarchy you aim to establish.
Deep dive
A popular principle to create visual harmony is the 60-30-10 rule. It shows how much of each color you should use in your design:
60% – primary color:
This color is the dominant one in your design and forms its core. Occupying the majority of the space, this color is typically neutral or less saturated, often used as the background. Common choices include whites, blues, and beiges but you should consider your color strategy.
30% – secondary color:
Acting as a complementary element, the secondary color enhances the primary color by adding visual depth and making the design more interesting. It's effectively used for typography, icons, and subheadings. Options for the secondary color vary, including shades like teal, black, or dark blue.
10% – accent color:
This is the color for drawing attention to specific elements of the design, such as buttons or call-to-action elements. Accent colors are usually high-contrast and vibrant, with options like yellow, orange, or light green, making them stand out.
Jesse Showalter's video shows how to effectively apply the 60-30-10 rule to enhance a design.
Important: While the 60-30-10 rule provides a useful starting point for achieving a balanced and harmonious color scheme, it's not a strict formula that designers must calculate precisely. Instead, think of it as a guideline in your decision-making. The key is to apply these proportions flexibly, adjusting based on the specific needs of your app and the visual hierarchy you want to establish.
❓Questions designers should ask themselves
By asking the right questions, designers can question their decisions, find areas to improve, make sure nothing is overlooked, and reduce mistakes, leading to better, more thoughtful designs.
- What emotions or values do we want to convey through color?
- Do my color choices align with the brand guidelines?
- Have I considered color psychology and the impact on user perception?
- Which color harmony principle best suits the application's purpose?
- Have I applied the 60-30-10 rule to create a balanced visual hierarchy?
- Do my color choices meet WCAG 2.1 accessibility guidelines?
- Have I tested our color palette with users to gather feedback?
⚠️ Common mistakes to avoid
Learning from your mistakes is important, but many problems can indeed be predicted and avoided. Based on Cieden's collective expertise, we're sharing the most common ones.
- Using too many colors, which can overwhelm users and create visual clutter.
- Neglecting color contrast and accessibility guidelines.
- Choosing colors that clash or don't create a cohesive visual experience.
- Ignoring brand guidelines and selecting colors that don't align with brand identity.
- Failing to consider user context and the impact of color on user emotions and behavior.
- Not testing color choices with users and iterating based on feedback.