The 60-30-10 Color Rule

A day in the life of a Web Designer
June 10, 2013
The Creative Agency Promise
June 19, 2014
Show all

The 60-30-10 Color Rule

It is said that good designers know the rules and great designers know when to break them. This statement couldn’t be further from the truth when it comes to UI design in general. From a Creative Agency perspective, every designer should at least start off following this simple staple, adhering to the rule, then really figure out when to break out of that box.

When designing UI for web sites and mobile device apps, this 60-30-10 color rule plays a vital role because the visible (above the fold) space that we have is so limited, its important to know how to balance the colors on the page to achieve cohesive aesthetics.

For those unfamiliar with the 60-30-10 rule, here is a quick breakdown. So when designing a UI for a web site or mobile app keep this in mind.

Use 60% of a dominant color
Use 30% of a secondary color
Use 10% of an accent color

Web space and mobile space are very different, so when you think about 60-30-10 for web this may translate to

60% of the site would be the negative space
30% of the site would be the content itself
10% of the site would be the call-to-action items

The primary color should cover about 60% of the space and creating the overall unifying design theme. Then add about 30% of the secondary color creating contrast and visual appeal. Lastly use about 10% of the accent color to provide that final touch of elegance.

Honestly, a good designer can get away with using as many colors as they want, however, the risk of using too many colors, is greater than the risk of running too few colors. So it’s probably always best to stick with no more than 3 colors.