Albers’ studies

Here’s a list of studies based on experminets found in Albers’ brilliant book Interaction of Color. Remember, these are studies, rough sketches.

Lighter or darker

A few simple experiments with a frame around a gradial qualitative contrast.

You should scroll these — scrolling works on the illustrations themselves in most browsers, or you can click to see them. If you scroll down you see a slightly different version. I created these studies to see wether a certain effect occurs with certain settings, and if so, when.

  1. A qualitative greyscale contrast with a frame

    Twenty frames, from black to white, around a 20 step gradient from black to white. Scroll down to see them all.

  2. A qualitative monochrome lighntess contrast with a frame

    Twenty monochrome frames around a 20 step monochrome gradient. The colour is generated by selecting a random hue, and a random saturation. If you scroll down you'll see 20 frames. The lightness of the frames is adjusted in 20 steps.

  3. A qualitative monochrome saturation contrast with a frame

    In this study I was looking at saturation. The colours are generated with a random hue, a lightness of 50% and 20 steps of saturation: from colourless grey to 100%. If you scroll down you'll see 20 frames.

Reversed grounds

Make three colours appear like two. Or make one colour appear like two. This sounds like magic, and at first I didn't understand what it was about. So I started creating these studies.

You should scroll these — scrolling works on the illustrations themselves, or you can click to see them. If you scroll down you see a slightly different version. I created these studies to see wether a certain effect occurs with certain settings, and if so, when.

  1. Understanding the principle: at random

    This is the first study I created. I didn't understand the principle at all and simply generated two random colours to see if the effect would always occur. It doesn't. And definitely not in this setting. This is not a valid test.

  2. Understanding the principle: lightness

    Generating random colours was not the way forward. So I decided to create a test with two colours of the same hue and saturation, but a different lightness. This comes close to what Albers is trying to teach. If you scroll down, the effect often occurs after scrolling one or two down. The rectangle on the left is between 0% and 20% lighter than the rectangle on the right. The small rectangles in the middle start out as the exact same hue as the rectangle on the right, but increase in lightness in steps of 5% when you scroll down.

  3. Understanding the principle: saturation

    The big rectangle on the left is less saturated (between 0 and 20% less) than the rectangle on the right. The rectangles in the middle start with the exact same hue as the rectangle on the right, and increase in saturation with 5% when you scroll down. Usually the desired effect of three colours that appear as two occurs after a few steps.

  4. Understanding the principle: less saturation

    This is a similar study to the previous one. The difference is that the small rectangles in the middle have a saturation of 0% in the first step.

  5. Understanding the principle: random colours

    The hues of both colours are generated at random. The saturation of the colour on the left is between 50% and 100%. The saturation of the colour on the right is between 5% and 40% lower than the one on the left. Both have a lightness of 50%. The shapes in the middle have the same hue and lightness as the rectangle on the left. Their saturation increases with 5% steps when you scroll down. When a version of this experiment works, it's usually because the colours are complementary. It also only works if the natural intensity of the colour on the left is higher.

  6. Understanding the principle: complementary colours

    These colours are generated with a random hue, a saturation between 50% and 100%, and a lightness of 50%. The colour on the right is complementary to the colour on the left (add or subtract 180°). This often works with solid grey as a colour for the forms in the middle.

  7. Understanding the principle: 120° contrasting colours

    The same experiment as the previous one but this time the difference in hue between the left and the right colour is 120°.

  8. Understanding the principle: 90° contrasting colours

    The same experiment as the previous one but this time the difference in hue between the left and the right colour is 90°.

  9. Understanding the principle: 60° contrasting colours

    The same experiment as the previous one but this time the difference in hue between the left and the right colour is 60°.

  10. Understanding the principle: 30° contrasting colours

    The same experiment as the previous one but this time the difference in hue between the left and the right colour is 30°.