Itten's seven contrasts

Short answer

Johannes Itten, one of the Bauhaus's first teachers, classified how colors create an effect together into seven types of contrast: hue, light-dark, cold-warm, complementary, simultaneous, saturation, and extension. To see which contrasts are at work in a poster, it's enough to scan it one by one with these seven questions: do the colors separate by hue, by lightness, by temperature, by saturation, by area; are there any opposite pairs; does one color change its neighbor? Most strong designs use several contrasts at once, and among them, the light-dark contrast is almost always the one carrying the weight.

Where do the seven contrasts come from?

Beginning in 1919, Itten ran the preliminary course that students took in their first year at the Bauhaus school in Weimar, and he built the foundation of its color teaching there. The twelve-part color star covered in DT-04 is a product of this period. Years later, in his book Kunst der Farbe (1961), he laid out in detail the system that divides color effects into seven types of contrast.

Itten's own warning also says how this system should be used: the seven contrasts are an analysis tool, not a recipe. They don't put the world of color into complete order, but they let you name what the eye is responding to.

The seven contrasts, one by one

Contrast of hue. This is the simplest contrast: pure, clearly distinct hues, such as red, yellow, and blue, placed side by side. It shows up often in children's books, toys, and folk art, and it gives an energetic, cheerful effect.

Light-dark contrast. This arises from the difference in lightness between colors. Black and white are its most extreme form, but the same effect shows up between a light yellow and a dark navy. Because value, covered in DT-01, is the main carrier of readability and form, this contrast is the backbone of most designs.

Cold-warm contrast. This arises from warm and cool colors sitting side by side; DT-05 discussed where the perception of warmth comes from. Warm and cool areas in an image can create the feeling of near versus far, sun versus shade, or inside versus outside.

Complementary contrast. This is the contrast of colors sitting opposite each other on the wheel, each intensifying the other; it's the subject of DT-08.

Simultaneous contrast. A neighboring color makes a color look different from what it is: a gray square looks pinkish on a green background and greenish on a red background. The mechanism behind this effect in the eye and brain is explained in BI-14.

Contrast of saturation. This is the contrast between a vivid, saturated color and a faded, broken version of the same hue. In a field full of broken tones, a single saturated color stands out without shouting.

Contrast of extension. This is the contrast that arises from the proportion of the areas colors cover. Itten argued that brighter colors take up more visual weight in the eye and therefore need a smaller area to stay in balance; the details of these proportions are given in DT-08, and deliberately breaking this balance is a powerful way to make a color stand out.

Scanning an image with seven questions

The question on the lesson card asks how this system turns into an analysis tool: which types of contrast can you see in a poster?

To analyze a poster, it's enough to turn the seven contrasts into a question, one at a time. Hue: are there clearly distinct pure hues in the poster? Light-dark: where are the lightest and darkest areas, and do the headline and image sit at one of those extremes? Cold-warm: how are the warm and cool colors distributed, do they separate the foreground from the background? Complementary: is there a pair sitting opposite each other on the wheel? Simultaneous: does a color look different from what it is because of its neighbor? Saturation: where is the most saturated color, and is its surrounding faded? Extension: which color covers most of the area, and which one remains as a small accent?

This scan lets you name why a poster works or doesn't work. It also gives you a clue: a design where all seven contrasts are strong at once is often noisy; good designs usually bring one or two contrasts to the front and put the rest in their service.

You should also know that the seven categories aren't completely independent of each other. Complementary contrast is a special case of contrast of hue and often comes together with cold-warm contrast. Simultaneous contrast, unlike the others, isn't an arrangement the designer chooses; it's an effect the eye produces on its own. Saturation and light-dark contrast also shift together when black or white is added to a color. These overlaps don't make the system worthless; they just remind you to use a contrast analysis not as a scorecard, but as a way of naming what the eye is responding to. That was Itten's own warning too.

Example — analyzing a campaign poster

Picture a fictional poster for a city's bike week. The background is a broad, dark navy; a bold white headline sits over it; in the middle, a large photo of three cyclists with different skin tones; in the bottom-right corner, a small, bright orange "join" button.

Scanning the poster with the seven questions gives this picture. Light-dark contrast carries it: the dark navy background with the white headline keeps the poster legible even from a distance. Complementary and cold-warm contrast work together: the cool navy and the warm orange button sit on opposite sides of the wheel. Contrast of extension balances this pair: navy covers most of the area, orange stays in a very small area, and that's why the eye goes there first. Contrast of saturation also supports the button: the surrounding colors are relatively faded, while orange is the most saturated color. Contrast of hue and simultaneous contrast stay in the background in this poster.

The faces in the photo are also part of this analysis. Because human skin tones sit on the warm side of the wheel, they form a cold-warm contrast with the navy background and look vivid against it. But the light-dark contrast isn't the same for every skin tone: the dark navy background creates a strong difference in lightness against a light skin tone, while against a dark skin tone this difference shrinks and the edges of the face can blend into the background. What the designer can do here is lighten the background a little behind the faces, add a thin rim of light to the faces, or place a lighter area behind the photo; that way, every face separates from the background regardless of its skin's lightness.

Common misconception

Summary

1. In a system that grew out of his teaching at the Bauhaus and matured in his book, Itten divided color effects into seven types of contrast, ranging from hue to extension.
2. The seven contrasts are an analysis tool, not a recipe; scanning an image with these seven questions lets you name why it works, and the light-dark contrast is often the one carrying it.
3. Good designs bring one or two contrasts to the front; in images that include human faces, the light-dark contrast needs to be secured separately for each skin tone.

Test yourself

1. (Easy) Name Itten's seven types of contrast.
2. (Easy) What is contrast of saturation?
3. (Medium) Which types of contrast can you see in a poster?
4. (Medium) How does contrast of extension determine where the eye goes in a design?
5. (Hard) If a poster is still legible when converted to grayscale, what does that tell you about which contrast?
6. (Hard) In a poster with faces of different skin tones against a dark background, which contrast isn't the same for every face, and how can this be fixed?

Answers

1. Contrast of hue, light-dark, cold-warm, complementary, simultaneous, saturation, and extension ("The seven contrasts, one by one").
2. It's the contrast between vivid, saturated colors and faded, broken colors; a saturated color looks more vivid in a faded surrounding ("The seven contrasts, one by one").
3. By scanning the poster with seven questions: distinct pure hues, the lightest and darkest areas, warm and cool areas, opposite pairs, colors that change because of their neighbor, the most saturated color, and the proportion of the areas. For example, in a poster made of a dark navy background, a white headline, and a small orange button, light-dark, complementary, cold-warm, extension, and saturation contrasts work together ("Scanning an image with seven questions", "Example — analyzing a campaign poster").
4. A color that stays within a small area inside a larger surrounding area gains emphasis; the eye often goes to that small area first ("The seven contrasts, one by one").
5. That the light-dark contrast is the poster's load-bearing contrast; form and readability are secured through differences in lightness, independent of hue ("Scanning an image with seven questions").
6. Light-dark contrast: a dark background creates a strong difference in lightness against a light skin tone, while this difference shrinks against a dark skin tone and the edges of the face can blend into the background. Lightening the background a little behind the faces, adding a rim of light to the faces, or placing a lighter area behind them separates every face from the background ("Example — analyzing a campaign poster").

Sources

• Itten, J., The Art of Color, Reinhold Publishing, New York, 1961; German original edition Kunst der Farbe, Otto Maier Verlag, Ravensburg, 1961.
• Getty Research Institute, "Bauhaus: Color," online exhibition.
• Worqx, "Johannes Itten's Color Contrasts."

Next step

DT-12 turns contrast of extension into numbers: it discusses where the suggestion of splitting colors on a page or in a room into shares like sixty, thirty, and ten comes from, how this suggestion connects to older ideas of color weight, and when breaking the proportion actually works. DT-16, meanwhile, turns simultaneous contrast into a classroom exercise: it describes the assignments in which Josef Albers had his students make the same piece of paper look like two different colors on two different backgrounds, and two different pieces look like matching colors on the right backgrounds.