Is background color and primary color same in 60-30-10 rule?

I was reading the 60-30-10 rule for using color on a website where 60% is the primary color, 30% a secondary color, 10% tertiary color. But I am confused, what should be the background color of a website. Is it the same as a primary color or neutral color such as grey, white, etc?. Also, what should be the text color of the website? If I use two different colors for text and background, there is a total of 5 colors on my website. I want to know does 60-30-10 rule excludes background and text color?

You typically want the background color to be white with a little shade on it (a little darker) or you can make the background as your secondary color, because your main color will be used in most texts, buttons, and navbars. So if the background is the secondary color, it won’t intercept with the other elements.

Most of the time, you want to keep your text color consistent and make it stand out from the background, making sure the contrast is right. It doesn’t necessarily exclude the background from the rule unless it’s just white with any shade.

Having too many colors in your text will make the site a bit unorganized. Most of the time, you will use 2 colors for text only for different backgrounds, and the rest of the colors for your website will be in the 60-30-10 rule

Here’s an example I made:
Notice there is only 4 colors: White background and text, black text, blue and pink. You want the colors to be consistent throughout the website.

Hope this helps a little bit :slight_smile:

thanks for your help. I saw your website and understood what you mean. Thanks