Interactive Color Theory: Gestural
Interactive Color Theory: Gestural

Current Problem:

During a course teaching Color Theory and Interaction students learn about the basic color properties Hue, Saturation and Value. Typically a lesson involves a brief lecture describing the concepts to the students using visual aids. The students are then required to experiment with creating various color schemes based on the three properties. There is a large gulf of execution when it comes to the translation of the information taught during the lesson to the student being able to effectively create color schemes based on what they recall from the lesson. Additionally, The concept of saturation is a tough one. The terms tinting and shading usually have to do with changing the value of a color but they also have to do with changing the saturation. Tinting is mixing a color with white; shading is mixing a color with black (or mud, or the complement.) The term “tone” is used when a color has both white and black in it. In strict color theory books – a tone is a grayed out version of the original color that still has the same value of the original color.



Introducing a hands-on and interactive element in order to teach basic color properties will provide a more efficient and more effective platform for teaching this particular color concept. The interactivity will enhance the student’s comprehension of the conceptual differences between saturation and value as well as create a sense of ownership, which will increase the retention of the material and increase memory recall once the student begins to apply the concepts in their work.


In a dark classroom, three projectors are set up to cast simultaneous images on a white wall. The first projector will provide a full color spectrum of pure hues, entirely saturated. The second will project a diagram that has been used repeatedly throughout the history of design pedagogy and color theory education. The diagram is based on Faber Birren’s “Tint, Tone and Shade” drawing. This classic diagram appears in many books on color. It shows a color modified by adding white to get tints, gray to get tones and black to get shades.

A student’s hand acts as a magnifying glass for the “hue circle” in the diagram as they move they hand over the projected spectrum. Once they hover over a particular hue for a few seconds, the hue appearing in the magnifying glass will fill the circle in the diagram and the circle becomes inactive. After they have selected the hue they choose to complete the diagram with, the projected spectrum of colors fades. A third projector will cast a monochromatic spectrum of the selected hue onto the wall in the same place. The student can then “grab” one of the remaining three circles in the diagram, tint, tone and shade. They will repeat the action of hovering over the wall of color until they fill the remaining empty circles.

Interactive Color Theory: Gestural

  • Categories →
  • Design Research
  • Education
  • Instructional
  • UX


client logos
Back to top