60-30-10 Color Rule for Service Interior Design Websites
Know about the designer "secret” called the 60-30-10 rule? It makes creating cohesive color palettes pretty much foolproof! We’re talking specifically about interior design websites here, but this design principle will help with any project whether you’re working on a living room or a website.
Let’s dive in:
Applying the 60-30-10 rule to web design
Rather watch the 60-30-10 Color Rule for Websites video?
Click the image!
New to Squarespace? You can sign up for a free trial, and I can even get you a discount! Use code GREENHOUSE10 to save 10% off your first year. (affiliate link)
What is the 60-30-10 rule?
The 60-30-10 rule is a design guideline for creating cohesive color palettes. It states that 60% of the space should be devoted to your dominant color, 30% should be the secondary color, and 10% should be an accent color.
The 60-30-10 color rule came from interior design originally, but applies perfectly to web design too - maybe even better! Whether interior OR web design, understanding this rule can be a big help in elevating your design work.
The 60-30-10 rule reminds us that we don’t have to go crazy with our color choices. Three colors are usually enough to create a look that’s both dynamic and cohesive in most any space.
In web design, The 60-30-10 rule encourages potential clients to take action on your website’s primary goal by guiding their attention toward your CTAs, or Calls To Action.
Also, using this rule creates a design constraint, and like many design constraints, whether it’s a color palette or a budget, it ultimately makes our jobs easier because we have a set of parameters to work with.
The percentages don’t need to be exact! They are meant to be a guideline. In fact, I will show you how and why you may need to bend the 60-30-10 rule in your web design color palette shortly. But it does provide a rough guideline for how much of each color to use in a design, whether it’s a room or a webpage.
How does it do this? Let’s find out:
So let's start out by looking at some interior design examples:
60-30-10 color rule in interior design
Here we have an image by Lucas Browning Design. Look at the composition and you see that it's a near perfect representation of 60% neutral with the white walls, 30% secondary color with the black dresser and accessories, and 10% accent color through the green eucalyptus leaves. This image is a very clean and beautiful representation of the 60-30-10 rule.
Next we have an image from Lauren Leiss Interior Design Studio. Look at the 60% neutral background color from the white walls, stone floor, fireplace and some of the mounted stone artifacts. 30% of the color comes in the browns from the floor, furniture, mounted angels and darker stone carvings. Then you get a vibrant green accent pop with the fan palm on the mantel and coconut inflorescence on the coffee table. It's a harmonious and sophisticated composition using a neutral palette!
The 60-30-10 color rule in interior design. Design: Lauren Leiss Interior Design Studio, Photography: Helen Norman.
The last image is from Jessica Helgerson Interior Design and it illustrates how the 60-30-10 rule is a guideline and not a hard and fast requirement.
We have our 60% from the creamy white of the wall paint and the subway tile, 30% from the warm wood of those gorgeous gothic-arched medicine cabinets and cabinetry, and then we get a fantastic focal point through the bright orangey-red calla flowers, our 10% accent color. The eye goes right to it. And although it kind of recedes in this image, certainly the blue green floor tile along with the patinated metal urn on the counter is an additional alternate color, especially if the flower arrangement were removed.
The 60-30-10 color rule is a guideline, not a mandate. Design: Jessica Helgerson Interior Design, Photography: Aaron Leitz.
How does the 60-30-10 rule apply to web design?
In web design, 60% will be the main background color - usually but not always a neutral. 30% will be smaller page section colors and block background colors. 10% will be your CTAs (calls to action) - your all important buttons and links. It’s these CTAs that we want to stand out on a page to help visually guide visitors’ eyes toward taking action on a website’s primary goal whether it's submitting an inquiry through your contact page, scheduling a discovery call, or making a purchase from your shop.
Your CTAs should be your 10% accent color, even if it’s a neutral. The goal here is contrast whether it’s a black button on a white background for vice versa. It doesn't have to be a bright color, it just needs to contrast.
In web design, The 60-30-10 rule encourages potential clients to take action on your primary website goal by guiding their attention toward your CTAs, or Calls To Action.
60% pale neutral, 30% brown-gold tones, and black is the10% accent seen in the planters and CTA buttons in the custom Squarespace template included in my digital course, “Website Launch Blueprint for Interior Designers” launching in May ‘23. The green olive branches certainly provide a second accent color and focal point too.
Tips for creating your 60-30-10 web design palette
You may be wondering how you can easily try out different color palette ideas and see how they’ll work without doing it in your website building platform. Keeping files and ideas organized in design is no small feat, no matter what kind of project it is.
I keep a Canva file for my brand color palette. It's not just for referencing my hex colors though; I do lots of experimenting in this file. And when I'm testing out a color combo, I take it to what I call my 60-30-10 page where I lay out color blocks according to those percentages.
A 60-30-10 color palette I created in Canva using neutrals for an interior design website.
It makes it really easy to see how well colors look next to each other, to make sure there’s enough contrast between them, and that the accent color especially pops, even when using a neutral palette. Ideally the 10% accent color will look good and stand out against both the 60% color and the 30% color.
You can quickly create a color palette file for your own brand for reference and especially when choosing your own website color palette. (link to Canva)
Give 110%! (bending the 60-30-20 rule)
Sometimes you do need more flexibility though than 3 colors. For example, you may want more than one accent color and/or lighter and darker versions of particular colors.
A similar palette to the one above with an additional 10% accent color inspired by the watercolor image. The 60-30-10 rule is a guideline for creating a cohesive color palette, not a requirement!
That's why Squarespace's main color palette gives you five colors to work with. (SQS also gives you the option to add a completely custom color anytime you need it.)
Sometimes on your web pages, a color appears a little too dark or a little too light in certain situations, and so you might want a couple more variations in your color scheme. And that's okay! 60-30-10 is meant to be a guideline, not a hard and fast rule.It's meant to make your life easier not harder!
I recommend for sure using it as your main starting point, and if you can keep your website palette to three colors then great, you've made your life easier!
But sometimes you might need to bump it up to 110%! If you find you need to add in a couple more shades for certain situations then do so, just make sure each of the colors looks cohesive next to the rest of your palette, and all will be well.
Squarespace’s primary palette includes 5 colors plus the option to add a custom color when desired. It combines those 5 colors into 10 unique color themes that can be assigned to Page Sections.
So I hope that helps you out with your web design process! How do you develop color schemes, whether it’s for your interior projects or brand colors? Leave me a comment below and let me know!
New to Canva? Canva's FREE version is amazing! It makes design work fun and easy. (affiliate link)
New to Squarespace? You can sign up for a free trial, and I can even get you a discount! Use code GREENHOUSE10 to save 10% off your first year. (affiliate link)
[This post contains affiliate links. Click here to read my full disclosure.]
Other interior design business-building posts you’ll love:
Don’t forget to Pin it for later!
If you have any questions or comments, please drop me a note below. Be sure to check back for my response (I always respond) since no notification is sent.
