60-30-10: the proportion of color

Short answer

The 60-30-10 rule suggests dividing a room's or a design's area roughly sixty percent to a dominant color, thirty percent to a supporting color, and ten percent to an accent color. Its origin isn't a documented person or book; it's a habit that comes from interior design and fashion practice, and the idea behind it is much older, going back to Goethe's view that colors carry different visual weights. An accent color is powerful when it's used sparingly, because the eye catches a small, scarce color that stands apart from its surroundings on its own; if that same color covers half the area, it's no longer an accent, it's the new background.

What does the rule say?

The 60-30-10 rule gives three roles to the colors in a palette. The dominant color covers the largest part of the area and sets the mood for the whole: the walls and the large rug in a room, the background of a web page. The supporting color complements the dominant color and separates areas from one another: sofas, curtains, cards, menus. The accent color is the smallest share and draws the eye to specific points: cushions, a vase, a button, a link.

The numbers aren't exact; they're a suggested ratio. It could just as well be sixty-five, twenty-five, ten, or seventy, twenty, ten. What matters is that the three colors don't occupy equal areas and that a clear hierarchy is set up between them. This is the dominant-color idea from DT-10, turned into a number.

Where does the rule come from?

The origin of the 60-30-10 rule is often cited as "one of the oldest rules in interior design," but it has no documented source. The design writing that explains the rule openly admits as much: its origin is uncertain, it became established in interior design, and from there moved into fashion, graphic design, and most recently web and interface design. A frequently given example is its fashion-world counterpart: a suit's fabric is the dominant color, the shirt is the supporting color, and the tie or pocket square is the accent color.

A rule's uncertain origin doesn't make it worthless, but it does determine how you should read it. It isn't the result of a measurement; it's a practice distilled from practitioners' experience. You must use it as a default setting, not as a law.

Goethe's balance of quantity

The idea behind the rule, however, is documented, and it's more than two hundred years old. Goethe thought that colors carried different visual weights and needed to be used in different-sized areas for a balanced look. As Itten reports it, Goethe assigned colors a light value: yellow 9, orange 8, red 6, green 6, blue 4, purple 3. A bright color is balanced by a small area, a dull color by a large one, so balanced areas are inversely proportional: yellow 3, orange 4, red 6, green 6, blue 8, purple 9. DT-08 covered what this idea produces in complementary pairs; in DT-11 we also saw Itten fold it into his system under the name contrast of extension.

The relationship between 60-30-10 and Goethe's scale is this: both say "areas shouldn't be equal." Goethe ties how much area a color needs to the color's own brightness; 60-30-10 is a shortcut based on roles, independent of which colors are involved. In practice, combining the two works well: the accent color is often chosen as the palette's brightest, most saturated color, and is balanced by a small area.

Why is an accent color powerful when used sparingly?

The question on the lesson card brings together three explanations for why the ratio works.

The first is attention. The visual system notices, almost instantly and without needing to search, a single element that stands apart from its surroundings in color. The theory of attention that Anne Treisman and Garry Gelade published in 1980 argues that color is one of the basic features that creates this kind of "pop-out" effect. A single blue dot among red dots is spotted immediately; but in a field that's half red and half blue, no dot stands out. The accent color pops out because it's scarce; as it multiplies, it loses this advantage. Attention itself is the subject of PS-04.

The second is adaptation. As we saw in BI-14, the eye adapts to a large color viewed for a long time and feels its vividness less. A saturated color that covers most of the area ends up looking duller after a while. A small area, on the other hand, escapes this adaptation and keeps its vividness.

The third is role. The accent color is a sign that says "look here." If the same sign appears everywhere on the page, it points to nowhere. If every button, every link, and every heading on a web page is the same bright orange, the user can't tell which one matters most.

Breaking the rule on purpose

Like any rule, 60-30-10 can be broken, but on purpose. A campaign poster might aim to catch attention from a distance with a reversed ratio, where a single bright color covers most of the area and the text stays in a small neutral area. A child's room might deliberately create a cheerful, lively feel with a multicolored layout of equal shares. In a monochromatic design, as we saw in DT-09, the three roles are distributed across different values of a single hue.

The cost of breaking it is that the hierarchy has to be built some other way. Once the ratio is equalized, you need another tool to guide the eye — a strong light-dark difference, size, or position, for example. How these tools are used together is the subject of GT-03. The practice of color proportion in a physical space is covered in MI-02.

Example — accent color and the face in clothing

The most everyday application of the 60-30-10 rule is clothing. Picture someone wearing a dark navy jacket (dominant), a light gray shirt (supporting), and a small, saturated scarf or tie (accent).

The accent color usually sits closest to the face, which makes it the face's "neighbor." The simultaneous contrast we saw in BI-14 comes into play here: a saturated green right under the face pulls the skin toward pink and red; a saturated orange can make the skin look a little cooler and paler. The effect shows up on every skin tone, but its direction and size depend on the skin's own lightness and undertone. A very dark accent next to a dark skin tone can blend into the face; so can a very light accent next to a light skin tone.

The practical principle that follows is this: choose the accent color not only relative to the rest of the palette, but also relative to the skin of the person who will wear it. The same palette might call for a different accent color on two different people. This isn't a "correct color" rule, it's a check: try the accent color next to the face and see how the skin looks.

Common misconception

Summary

1. The 60-30-10 rule gives the colors in a palette the roles of dominant, supporting, and accent, and divides roughly sixty, thirty, and ten percent of the area among these roles; its origin isn't documented, it's a default setting.
2. The idea behind it goes back to Goethe's light values: bright colors are balanced by small areas, dull colors by large ones; Itten folded this into his system as the contrast of extension.
3. An accent is powerful when used sparingly, because a scarce color stands apart from its surroundings on its own, escapes the eye's adaptation, and keeps its meaning as a sign; accents placed near the face, though, can change how the skin looks, so they're tried together with the wearer's own skin.

Test yourself

1. (Easy) What roles do the three colors take on in the 60-30-10 rule?
2. (Easy) According to Goethe's light values, in what ratio are yellow and purple balanced?
3. (Medium) Why is an accent color powerful when it's used sparingly?
4. (Medium) What do we know about the origin of the 60-30-10 rule?
5. (Hard) In a design that deliberately breaks the ratio, how is hierarchy maintained?
6. (Hard) How can an accent color placed near the face affect how the skin looks, and how do you account for this when choosing an accent?

Answers

1. The dominant color sets the mood for the whole, the supporting color complements it and separates areas, and the accent color draws the eye to specific points ("What does the rule say?").
2. Roughly one to three; since yellow's light value is 9 and purple's is 3, balanced areas are inversely proportional ("Goethe's balance of quantity").
3. A scarce color stands apart from its surroundings in color and draws attention on its own; the eye adapts to a color spread over a large area and feels its vividness less; an accent is also a sign, and when it's everywhere, it points to nowhere ("Why is an accent color powerful when used sparingly?").
4. It has no documented inventor or source; it's a practitioner's practice that became established in interior design and moved from there into fashion, graphic, and web design ("Where does the rule come from?").
5. Once the ratio is equalized, you need other tools to guide the eye: a strong light-dark difference, size, or position ("Breaking the rule on purpose").
6. Because the accent color is the face's neighbor, simultaneous contrast pushes the skin toward its complement, or the accent can blend into the skin at the dark or light extremes; the direction and size of the effect depend on the skin's lightness and undertone. That's why an accent is chosen not only relative to the palette, but by trying it together with the skin of the person who will wear it ("Example — accent color and the face in clothing").

Sources

• Itten, J., The Art of Color, Reinhold Publishing, New York, 1961.
• Treisman, A. M., and Gelade, G., "A feature-integration theory of attention," Cognitive Psychology 12(1): 97–136, 1980.
• Apartment Therapy, "How Design Pros Use the 60-30-10 Rule to Create Balance."
• Livingetc, "A decorator's guide to the 60-30-10 rule."

Next step

DT-13 opens up this lesson's word "weight" for discussion: it asks why a color looks heavy or light in a composition, what share value, saturation, and warmth have in that, and how advancing and receding colors change a page's balance. GT-03, meanwhile, turns how an accent guides the eye into a design method: it covers how a single color sets up a reading order on a page, how empty and neutral areas carry that color, and testing which element is seen first by blurring the design.