Member-only story
Problems with the 60–30–10 rule
Rules are meant to be broken
The 60–30–10 rule is well known across a diverse community of designers. For UI designers, interior home designers, and fashion designers, this famous rule has been tried and true.
The purpose of the 60–30–10 rule is to help introduce and balance colors. The idea is that 60% of your design should be a single, neutral color. This serves as a base or an anchor. 30% of your palette should be a secondary color that complements the 60% chunk. Finally, the remaining 10% should be set aside for the accent color.
Using this policy has numerous benefits. By limiting the number of colors to three options, the risk of overwhelming your users is minimized. Too many vibrant colors can distract users and make sites or products hard to navigate.
Moreover, keeping designs simple improves user engagement and aesthetic appeal.
The visual balance of the 60–30–10 rule also communicates a hierarchy that the users are already familiar with. Compared to the neutral anchor, the user’s eyes are more drawn to the secondary colors and accent colors. This means that they can be used to signify importance.
For example, an accent color may be used to highlight special alerts or features. Brighter colors are consistently matched to buttons or other forms of interactivity as well.
However, the 60–30–10 rule does present a few challenges for out-of-the-box designers.
First, restricting a color palette to only three colors inhibits creative designs. While it prevents overstimulation, exploring more “rebellious” designs make brands stand out from their competitors. Breaking rules or making new ones is how trends start.
Practically speaking, mixing up the 60–30–10 rule may be beneficial for incorporating more than one accent color. If your product has different categories of items or features, using two different accent colors can communicate that and provide a smoother user experience.
Alternatively, for designers who want to spice up their designs, the 60–30–10 rule argues for the use of different hues from the preestablished color palette. This is a good tip to keep in mind for maintaining a brand’s colors. However, this limits…
