The 60-30-10 rule is one of the oldest tricks in interior design, and it works just as well for websites, outfits and social media posts. It tells you how much of each color to use so nothing fights for attention.
How it works
- 60% dominant color. The walls of a room, the background of a website, the main piece of an outfit. Usually a light or muted neutral.
- 30% secondary color. Furniture, cards and sections, trousers or a jacket. It supports the main color and adds depth.
- 10% accent color. Cushions and art, buttons and links, shoes or a bag. This is where your boldest color goes.
Why it works
Our eyes look for a resting place and a point of interest. A large calm area gives the rest; a small bright accent gives the focus. When colors are split evenly, nothing leads, and the result looks busy even when every color is lovely on its own.
Applying it to a website
Use your lightest color for page backgrounds (60%), a mid-tone for panels, headers or the footer (30%), and your most saturated color only for buttons, links and highlights (10%). Keep body text in your darkest color so it stays readable.
Bending the rule
Treat the numbers as a guide, not a law. Many rooms work as 60-30-5-5 with two small accents. The point is a clear order: one color leads, one supports, one sparkles.
Every palette you make on Colrify shows a room preview built on this rule, so you can see the balance before you paint a wall.