What is the 3 color, aka 60/30/10 rule of Web Design?

The 3 color, or 60/30/10 rule, is simply utilizing 3 colors in part with your branding and website design. 60% main, 30% secondary, and 10% for the tertiary.

Building a website and trying to grow its presence with digital marketing utilizes psychology, and color theory. Strategically utilizing colors to influence brand perception and user-experience. It’s basically the same as designing the interior of a home to achieve feng sui, or a business to be inviting and on brand, but in website terms.

The first color (60%) is the main and will be used the most.

The secondary (30%) is an accent, to help differentiate or make something stand out.

Then the third (10%) is used sparingly to draw attention. For example on a CTA.

Sources and more information:

https://www.paigebrunton.com/blog/60-30-10-color-rule-for-web-designers#:~:text=The%20rule%20breaks%20down%20into%20three%20rectangles:,30%25%20whitish%2Dgrey%20text%20*%2010%25%20corral%2Dy%20orange

https://supercharge.design/articles/what-is-the-3-color-rule-in-ui-design

https://www.reddit.com/r/web_design/comments/12luzan/please_help_me_understanding_color_theory_in_web/

https://www.figma.com/resource-library/what-is-color-theory/

https://it502.cs.unh.edu/tutorials/spring25/jlb1207/color_systems.html

https://elementor.com/blog/color-theory-web-design/

Ray Cheselka

Ray is the COO at webFEAT Complete, and has been working on websites, and managing digital marketing accounts for 10+ years. He's passionate about growing business exposure, leads, and revenue through websites, and ultimately helping businesses grow. When out of the office he's probably traveling, snowboarding, golfing, or hiking.