The 60–30–10 rule in UX design
Color is one of the most powerful tools in UX/UI design. Beyond defining the visual personality of an interface, it directly influences how users perceive and navigate it. Colors guide attention, establish hierarchies, and convey emotions, making interaction with a digital product much more intuitive.
This is where the 60–30–10 rule comes into play — a simple yet effective formula for distributing colors in a balanced way. This approach suggests that:
- 60% of the design is dominated by a primary color.
- 30% is allocated to a complementary color.
- 10% is reserved for accents that grab attention.
How to apply the 60–30–10 rule
To implement the 60–30–10 rule in your UX/UI design, follow these steps to distribute colors effectively and functionally:
1. Choose the dominant color (60%)
This is the base color that occupies the largest part of the interface, providing visual cohesion and stability. It’s often a neutral or soft tone, ideal for large areas like backgrounds or main content sections, as it avoids eye strain. This color acts as the design’s “anchor,” creating a consistent and harmonious atmosphere.
2. Select the secondary color (30%)
The secondary color complements the dominant one, adding contrast and variety without overshadowing it. Use it for supporting elements like headers, sidebars, or forms. This color adds depth and helps visually separate sections, enriching the experience without overwhelming users.
3. Define the accent color (10%)
This color draws attention and guides users toward key actions. It’s perfect for call-to-action buttons, links, or important notifications. The accent color should stand out from the rest of the palette and be applied sparingly to highlight essential elements without distracting users.
4. Test the combination across different contexts
Once you’ve defined your three colors, test them across different devices and screen sizes to ensure visual balance in all scenarios. Check that the combination works well in both light and dark modes and maintains readability in every setting.
5. Adjust based on context
Depending on the project type, you may need to tweak color intensity or tone. For example, in mobile apps, accent colors often need to be bolder to enhance touch interaction.
Applying this formula ensures that the design has a clear visual hierarchy and makes it easy for the user to navigate without overloading the user with information.
Methods for choosing a color palette
To create an effective color palette, consider one of these four approaches:
- Analogous: Combines the base color with two adjacent shades on the color wheel. Ideal for soft, low-contrast designs like backgrounds.
- Monochromatic: Uses different tones of a single color for a clean and professional effect, perfect for data visualizations and graphics.
- Triadic: Selects three colors evenly spaced on the color wheel, forming a triangle. This approach provides visual balance, using one color as the base and the others as accents.
- Complementary: Chooses opposite colors on the wheel for high contrast — great for highlighting key elements like action buttons.
Each approach ensures a balanced and functional palette. The key is to use color intentionally, emphasizing essential elements without overwhelming the interface.
Benefits of the 60–30–10 rule
The 60–30–10 rule offers multiple advantages for UX/UI design, improving both user experience and interface aesthetics. Some of its most notable benefits include:
- Visual balance: Clear color distribution prevents overload and gives the design an organized structure, enabling smoother navigation.
- Information hierarchy: This rule highlights key elements (with the accent color) and maintains consistency, helping users identify important details at a glance.
- Easy to apply: Its simplicity makes it an intuitive guide, even for team members without design experience.
- Enhanced usability: The accent color draws attention to buttons and calls-to-action, improving interaction and conversion rates.
- Brand consistency: Applying this rule reinforces the brand’s visual identity, strengthening recognition and user trust.
The 60–30–10 rule is a simple yet powerful method to bring structure and harmony to your designs without the risk of using random or purely personal color choices.
Before jumping into color selection, consider applying this rule — it helps establish a solid and visually appealing foundation right from the start.
This is a translation of the following article from our corporate website: