The 60-30-10 Color Rule: How to Pick Colors That Always Work

Three Colors, Three Jobs

Open any beautifully designed room, app, or website and you can probably spot the same pattern: a strong dominant color, a softer supporting color, and a small pop of contrast. That's the 60-30-10 rule. It's a simple formula that says: pick three colors, and use them in those exact proportions.

Imagine painting a bedroom. The walls take up the most space — that's your 60%. The curtains, bedding, and rug fill in the rest — that's your 30%. Then you add a few bright pillows, a vase, or a piece of art — that's your 10%. The room feels balanced because the eye knows what to look at, and nothing is fighting for attention.

Color Is the First Thing People Notice

Before anyone reads your words, looks at your layout, or clicks your button, they see your colors. A website with five clashing colors feels chaotic. A website with three purposeful colors feels confident — even before you understand what it's selling.

The 60-30-10 rule matters because it gives you a starting point when you don't know where to start. You don't need to study color theory, learn the color wheel, or train your eye for years. You just need to pick three colors and stick to the proportions. Professional designers use this exact rule (or close to it) in almost every project they ship.

How to Pick Your Three Colors

The 60-30-10 rule has three parts, and the order matters. Start with your dominant color, then pick a secondary that supports it, then choose one accent that pops. Here's what each one does:

The dominant color should match the mood you want. Calm? Try soft neutrals (off-white, light gray, warm beige). Energetic? Try a bold color used very lightly (a single bright wall in a sea of white). The secondary should support, not compete — usually a softer or darker version of the dominant, or a complementary color that's less saturated. The accent is your attention-grabber: bright, contrasting, used sparingly.

Applying 60-30-10 to a Landing Page

Here's the same landing page designed two ways. The first uses too many colors — the result feels busy. The second applies the 60-30-10 rule — the result feels calm and intentional.

<style>
  body     { background: #ffeb3b; }   /* bright yellow */
  .header  { background: #ff5722; }   /* orange-red */
  .card    { background: #4caf50; }   /* green */
  .button  { background: #2196f3; }   /* blue */
  .footer  { background: #9c27b0; }   /* purple */
</style>
<!-- Five different colors, no clear hierarchy.
     The eye doesn't know where to look. -->

<style>
  /* 60% — dominant: soft off-white */
  body     { background: #f7f5f0; }

  /* 30% — secondary: warm slate */
  .header,
  .card    { background: #2c3e50; }

  /* 10% — accent: punchy orange */
  .button  { background: #ff6b35;
             color: white; }
</style>
<!-- Three colors, clear proportions.
     The orange button is the only thing
     that demands attention. -->

The "bad" version has five different colors fighting for attention. The "good" version uses the same page but with three colors in 60-30-10 proportions. The button — the thing you actually want people to click — is the only thing that stands out, because it's the only 10% color on the page.

Knowledge Check

Test what you learned with this quick quiz.