What is the 60-30-10 Rule with Website Design?
TL;DR
The 60-30-10 Rule suggests that you have 60% of your design using a dominant color, 30% using a secondary color, and 10% using an accent color.
This post covers why these proportions matter and includes mockups illustrating this “rule.”
This post may contain affiliate links, which means I may receive a commission if you make a purchase using these links.
I only recommend products and services that I use myself and genuinely believe in!
The 60-30-10 rule for color palettes is essential because it provides a framework for creating a balanced and visually appealing color scheme on your website. You can create a harmonious and professional-looking design that reflects your brand’s identity and goals by using a dominant, secondary, and accent color in specific 60% - 30% - 10% proportions.
If you’re designing your own Squarespace website, you are likely inexperienced with website design. It can feel daunting to take on a visual project like this when you’re unsure about the design choices you have to make.
My advice for DIY websites is to start with a simple and clean design. Select a color palette that reflects your brand’s identity and use it consistently throughout your website. Use white space (aka negative or empty space) effectively to make your content more readable and visually appealing.
Consider using the pre-made Squarespace templates as a guide that offers pre-designed layouts and color palettes to make the process easier. Don’t be afraid to ask for feedback from friends, family, or colleagues to get an outside perspective on your design.
Finally, remember that website design is an ongoing process; you can always make changes and improvements as you go along.
Color Proportions on a Website Page
Let’s break down the proportions of 3 primary colors for your website:
The dominant color should comprise around 60% of the color palette and is the primary color used throughout the website.
While the dominant color can technically be any color, we recommend using more neutral colors that are easy on the eye.
The secondary color should make up around 30% of the color palette and is used to support the dominant color. This color should complement the dominant color and add visual interest to the design.
We like to think of the secondary color as a supporting cast. Having the same color for larger headers and graphic elements on the page can bring cohesion to your design.
Remember, your primary goal is to be clear about who you are, what you do, and whom you serve. If your website visitors are distracted by having conflicting elements and competing colors on the screen, you’ve already lost the battle.
The accent color should make up around 10% of the color palette, highlight essential elements, and create contrast. Use this color sparingly and strategically to draw attention to specific parts of the design.
I often refer to this as the “pop” color. It’s the perfect shade that says “Hey! Look here!” and is recommended for Calls to Action (like your buttons and important sections).
Website Mockup Examples of the 60-30-10 Rule
Click on any image to view larger.
Additional Guidelines for the 60-30-10 Rule
The rule is a guideline, not a hard and fast rule.
While having these proportions can be a helpful starting point, it’s ok to find that different proportions or colors work better for your website and brand.
Color Psychology
The colors you choose can significantly impact how visitors perceive your website. Consider the emotions and associations different colors evoke, and choose colors that align with your brand and messaging.
Red: Often associated with passion, energy, and excitement. It can also be seen as bold, attention-grabbing, and even aggressive.
Orange: Often associated with creativity, enthusiasm, and warmth. It can also be seen as playful and energetic.
Yellow: Often associated with happiness, optimism, and intellect. It can also be seen as attention-grabbing and eye-catching.
Green: Often associated with growth, harmony, and balance. It can also be seen as natural, calming, and refreshing.
Blue: Often associated with trust, loyalty, and stability. It can also be seen as calming and soothing.
Purple: Often associated with luxury, creativity, and spirituality. It can also be seen as mysterious and sophisticated.
Pink: Often associated with femininity, romance, and tenderness. It can also be seen as playful and energetic.
Black: Often associated with sophistication, elegance, and power. It can also be seen as mysterious and serious.
White: Often associated with purity, cleanliness, and simplicity. It can also be seen as sterile and cold.
Gray: Often associated with neutrality, sophistication, and balance. It can also be seen as dull and unemotional.
Color psychology is complex and can vary depending on cultural and personal associations. These descriptions are just a general guide, and choosing colors that align with your brand and messaging is important.
Test Your Color Palette
With Squarespace, it’s easy to customize your color palette and generate ten themes with a few clicks!
Consistency is Key
Be consistent with how you use your color palette throughout your site. Don’t be afraid to experiment and try new things (that’s the beauty of Squarespace - it’s so easy to have a test page and play around with layouts and color choices without having to show the world!).
Hiding Pages in Squarespace
Once you’ve created your page, go to Page Settings, and under General, turn the toggle for “Enable Page” off. Now you have a page to experiment and play with!