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.