JDC Spring-2000 v2 - Digital Color Design with the RGB Color Cube: Visualization and Color Coordination Activities

Digital Color Design with the  RGB Color  Cube: Visualization and Color Coordination Activities Petrônio Bendito, M.F.A. Northern Illinois University E-mail: pbendito@niu.edu Abstract This paper reveals a set of instructional visualization materials - including charts and computer generated animation - that were developed to teach students the potential of the RGB cube as a design tool. After instruction students were able to propose and produce original digital color palettes based on a logical process. Activities based on Joseph Albers' book Interaction of Color , and various color coordination principles were incorporated in this study. Background Information Computer technology has introduced light as part of an everyday color palette for artists and designers. While the principles that underlie color design are the same for pigment and digital colors, the tools to make color selection are quite different for each one. The implementation of effective color schemes may be directly related to formal understanding of color properties, color relationships and interactions, as well as to the psychological implications of color to the design. Awareness and understanding of color models, as well as inquisitive color explorations, are crucial for designers and artists in helping them to overcome unsophisticated color usage. Due to the increase of design produced on and for the computer screen, the understanding of computer-generated color models is of great importance. In essence, color models help designers to deal with color in systematic ways. They are visual cues to preconceived color organizations. Once learned, they allow color selection or manipulation based on perceptually distinguishable structures. Richard Norman in Electronic Color emphasizes the importance of such models: "To speak the language of color, one must have both a color vocabulary and an understanding of how colors interact. This requires a familiarity with some system of order - a color model" ( 1990, p. 69 ). After graduation, many design students will be working on web pages, CD-ROMs, digital illustrations, 3D renderings, and interface design for software applications. On the computer screen, color is a result of transmitted light, whereas on printed media, color is a product of reflected light. The fact that students have difficulties making systematic color selection on the computer screen can certainly be overcome by proper instruction. A traditional approach to teaching color design using paint and colored papers, for example, may not be the best way to prepare students to work on digital media development, even though formal understanding of color principles is not directly related to any particular medium. Undergraduate students at Northern Illinois University were introduced to the potential of the RGB Color Cube ( Figure 1 ) as a cognitive tool to support color design decisions for the computer screen. Two sets of activities were developed. The first set dealt with the visualization of the RGB Color Cube, and the second set dealt with standard color coordination and interaction principles. Figure 1. Two Views of the RGB Color Cube. Color harmony is a very controversial topic because people from different cultures tend to react differently towards different color schemes. Furthermore, semantic use of color is directly related to each individual culture and even personal taste. For this study, the activities that focused on color coordination were based on systematic structural relationships in which color harmony principles were defined as "successful color combinations, whether these please the eye by using analogous colors, or excite the eye with contrast" ( Wong, 1997, p 110 ). The series of color design activities in which the students participated was in essence an extension and application of standard color schemes. However, after students went through a series of activities dealing with the visualization of the RGB Color Cube, they were also engaged in higher-order thinking ( Norman, 1993 ) by being asked to propose new perceptual structures (color palettes) that would eventually aid in the color design process on the computer screen. The cognitive potentials of the RGB Color Cube are based on the following assumptions: "If artists and designers dealing with electronic color are able to comprehend the RGB Color Cube and access different geometric structures within the Cube, and if those geometric structures support systematic design decisions, then the configuration of the RGB Color Cube would serve not only as a place holder for mathematical structures, it would also provide a systematic model to interact with digital color" ( Bendito, 1998 ). Visualization Process Before NIU students could utilize the RGB Color Cube as a color design tool, they needed to be able to visualize and understand the RGB Color Cube color organization. The visualization process they undertook had the purpose of helping them see the perceptual structure which is inherent in the RGB Cube. Even though the RGB Color Cube can be visualized in thousands or millions of colors, the Mac Color Lookup table (CLUT), which comprises the 216 cross-platform web-safe colors, was used as a color model in the visualization process. The visualization process was divided into six phases. Figure 2 shows the visualization process in a diagrammatic format. The objective of each visualization activity is as follows: Activity I: To create six plates based on the CLUT Activity II: To create a "slide tray" view of the RGB Color Cube Activity III: To create four predetermined side-views of the Cube Activity IV: To create a planar view of the RGB Color Cube Activity V: To create predetermined additional palettes Activity VI: To construct a color wheel based on the RGB Color Cube Figure 2: RGB Cube Visualization Activities. After visualization activities, students proceeded to engage in higher-order thinking by proposing a customized color palette based on the structure of the RGB Color Cube. Additionally, student thought of strategies to use the RGB Color Cube as a tool while making color design decisions. Instructional Resources For this study, a set of instructional materials - including diagrams, color palettes, and computer generated animation - were developed which allowed students to visualize the RGB color cube and produce digital color palettes based on a logical process. Donald Norman, a cognitive psychologist stresses the importance of visual representation to facilitate understanding and learning. He argues that external aids, whether physical or visual representations, help to increase memory, thought, and reasoning. Therefore, cognitive artifacts are crucial in strengthening our mental abilities: "The ability to represent the representations of thoughts and concepts is the essence of reflection and of higher-order thought. It is through meta representation that we generate new knowledge, finding consistencies and patterns in the representations that could not be readily noticed in the world" ( Norman, 1993. p. 51 ). In short, the instructional resources developed for this study focused on the representation of thoughts and procedures and also had the purpose to function as artifacts that would lead to perceptual observation and analysis of the RGB Color Cube. Following are brief descriptions and rationale for each instructional tool: Animation Animation was used to familiarize the students with the perceptual structure of the RGB color cube and to demonstrate the visualization process they would be working with. It was also used to enhance the directions provided both in writing and in visual notes (diagrams) available in the activities handouts. Animation was used during the introduction of the project and was accessible as a tool for any activity at any time via the web. Instructional Graphics Major steps of the RGB Color Cube visualization process had their own instructional graphics. The purpose of the instructional graphics was to provide printed copy with visual notes of specific procedures students had to perform. After the students saw the animation, the instructional graphics functioned as their "visual guides" through the activities. Activity Plates Six activity plates with visual notations were developed in Adobe Photoshop as tools to support the visualization process. Each activity encompassed prerequisite skills to move a step forward. Following are descriptions of visual strategies used in the activity plates. Initiating Graphic : Each plate is comprised of initiating graphics to be manipulated and analyzed by the students in the computer screen. Feedback image : Each activity plate, with the exception of the first one, provided feedback on whether students had achieved the previous activity's expected outcome. Visual clues of expected outcomes : Certain graphics functioned as guiding devices showing students where they would be heading by finishing the required steps. Visual Thinking Strategy or 3D Association : The 2D representations of the 3D structure of the cube worked as reminders that even though the project was developed on a 2D surface, it really related to the 3D structure of the RGB Color Cube. Visualization was achieved by providing correlation between the activities with the structure of the RGB Cube - which is fundamental to exploiting the RGB Cube potentials as a cognitive tool. Students' Practice: Customized Reorganization of Web CLUT Instruction took place during an entire month. The first two weeks were devoted to the visualization activities. After students were introduced to the perceptual structure of the RGB Color Cube ( Bendito, 1998 ), they were asked to propose an alternative color organization of the CLUT. This activity allowed students to inquire on the current perceptual structure of color palettes available on the computer screen and to develop alternative and effective ways to reorganize the CLUT visual structure based on the RGB Color Cube. Asking students to propose alternative color organizations of the CLUT was fundamental in helping them to understand the potential of the RGB Color Cube as a color design cognitive tool. This activity allowed them to question the ways color palettes are currently presented on the computer screen and how an understanding of the RGB Color Cube can help to develop customized color palettes. Figure 3 shows alternative color organization of web safe colors proposed by the students. Figure 3 : Color palettes developed by students Students were also asked to create compositions using color harmony formulas and to experiment with color interaction ( Albers, 1963 ). Figure 4 shows two color design activities that the students developed while making color selection directly from the perceptual structure of the RGB Color Cube. The plate on the left is a study on the perceptual change of color properties based on Albers' Interaction of Color in which a single color is perceived differently depending on its surroundings. The other plate shows a sequential color coordination in which color selection was based on the following: variances in value from light to dark, variances in chroma from bright to dull, and hue selection in a circular pattern around the RGB Color Cube (Adapted from Munsell, 1969 ). Throughout the color coordination and interaction activities, students were able to make color selection based on perceptual discrimination of color properties (hue, value and chroma). In addition, these activities helped to reinforce the notion that it is possible to use the RGB Color Cube as a tool to make systematic color selections on the computer screen. Figure 4. Students' works: Color interaction and standard color scheme. Conclusion This paper shows that the understanding of the RGB Color Cube can be useful for artists and designers dealing with computer-generated colors. It has been proposed that the RGB Color Cube can be approached not only as a mathematical configuration but as a "tool" to aid in the color design process. For this study a set of original instructional visualization materials - including charts and computer generated animation - were developed to teach students the potential of the RGB cube as a design tool. Standard color harmony principles were also incorporated in this study. Students introduced to the perceptual structure of the RGB Color Cube were able to generate new approaches to digital color organization by developing customized color palettes. Furthermore, by making color selection on the computer screen based on the perceptual organization of the RGB Color Cube, students were able to reproduce and generate color harmony and color interaction coordinations. Note: Teachers interested in using this technque should  contact the author pbendito@niu.edu for a teacher  guide. References Albers, J. (1963). Interaction of color . New Haven, Connecticut: Yale University Press. Bendito, P. (1998). Perceptual Analysis of the RGB Color Cube . Master's thesis, Northern Illinois University, Illinois. Bendito, P. & Allmendinger, L. (2000, January). Potentials of the RGB Color Cube as a color design cognitive tool . Paper presented at the Design Communications Association Conference, Tucson, AZ. Munsell, A. H. (1969). A grammar of colors . New York: Van Nostrand Reinhold. Norman, D. (1993). Things that make us smart . Reading, Massachusetts: Addison-Wesley. Norman, R. B. (1990). Electronic color: The art of color applied to graphic computing . New York: Van Nostrand Reinhold. Rogers, D. F. (1998). Procedural elements for computer graphics (2nd ed.). Boston, Massachusetts: WCB McGraw-Hill. Travis, D. (1991). Effective color displays: Theory and practices . San Diego, California: Academic Press. Salomon, G. (1990). New uses for color. In Laurel, B. (Ed.). The art of human-computer interface design (pp. 269-278). Reading, Massachusetts: Addison-Wesley. Weinman, L. (1996). Designing web graphics . Indianapolis, Indiana: New Riders. Wong, W. (1997). Principles of color design: Designing with electronic color (2nd ed.). New York: Van Nostrand Reinhold.