A Study on the Psychology of Color Perception In Color Palettes & Color Pickers

A Study on the Psychology of Color Perception In Color Palettes & Color Pickers S. M. Fazlul Hoque Department of Computer and Systems Sciences The Royal Institute of Technology (KTH) Stockholm, Sweden - Spring 2006 hoque@kth.se, smfa-hoq@dsv.su.se ABSTRACT This document corresponds to the individual report of the course Principles of visualization (2I1711). The present paper can be considered as a theoretical study on the issues of different color presentation schemes in modern computer applications and how they aid color selection. To provide a firm reasoning, it will relate to two imperative studies within this domain ([10], [11]) that are particularly concerned with color psychology, color perception and designing of color palettes/pickers. It will also encompass a firm discussion on several functionalities that are currently used in modern color selection schemes. This review is such a study in the area of computer graphics. INTRODUCTION Much of our perception of physical world includes our identifying objects by vision, and colors are typically essential part of it. Because colors are defined to have perceiver-dependent properties, it can be considered as subjectivism [12]. As a consequence color has become one of the most powerful tools in the modern computer toolbox which allows certain manipulation in order to adjust the subjectivity level independently for each user. Like good writing, good graphical displays of data communicate ideas with clarity, precision and efficiency. Color is the key here. The choice of which colors are to be used is determined by the user and is highly influenced by the color schemes available. Most user interfaces for color selection consist of a visible screen representation, an input method, and the underlying conceptual organization of the color model. The most common method practiced today is a direct-manipulation color selection tool called a color picker which is commonly accompanied by a set of color palettes or swatches. Like other tools, many variations have evolved each with its own blend of features and color models to make color selection easy and precise. Before diving into the details discussion of color pickers this paper takes a look at the human visual system and also the challenges of producing color in computers that as a whole affects the type of color tools that have flourished. THE HUMAN VISUAL SYSTEM The human eye and brain together translate light into color. Light receptors within the eye transmit messages to the brain, which produces the familiar sensations we perceive. Considered to be part of the brain itself, the retina is covered by millions of light-sensitive cells, some shaped like rods and some like cones. These receptors process the light into nerve impulses and pass them along to the cortex of the brain via the optic nerve [1]. An interesting phenomenon is that the human eye can perceive more variations in warmer colors than cooler ones. This is because almost 2/3 of the cones process the longer light wavelengths (reds, oranges and yellows). The following diagram shows the spectral absorption curves of the short (S), medium (M) and long (L) wavelength pigments in human cone and rod (R) cells. Visual deficiencies in humans According to the statistics produced by Color Psychology and Color Therapy studies [5], 8% of men and 1% of women have some form of color impairment. Most people with color deficiencies aren't aware that the colors they perceive as identical appear different to other people. Most still perceive color, but certain colors are transmitted to the brain differently. 1

The most common impairment is red and green dichromatism which causes red and green to appear indistinguishable. Other impairments affect other color pairs. People with total color blindness are very rare. PERCEPTION & PSYCHOLOGY OF COLOR Moving on from vision, next it is essential to understand the processing of the inputs that are captured by our vision. All incoming data from the retina to the brain are filtered and organized in a understandable form. This process is known as perception. In the visual world, color differences provide the means of perceving between fore ground and background. There are two types of color, namely achromatic color and chromatic color. The color that stands out just because of its greyness(is also called as lightness) is called a achromatic color. There is no component of hue in it. Chromatic colors are those that have a hue component to them [ ]. Hue matters because one color affects another. Adjacent or background colors affect the perceived brightness or shade of a particular color. A neutral color (for example, light gray) is often the best background color as used in most color selection schemes. Opposite colors such as red and green can make it difficult for the eye to focus considering the visual impairment discussed in the previous section. Dark colors tend to recede in the visual space, whereas light colors come forward [6]. This is an important issue considered while designing color tools. Depending on perception psychology is provoked. Aggregated from different color research results it has been found that each color has a certain effect on the user. For example, red is a good way to get a reader's attention. The eye is drawn to red. It is a good way to highlight an important point, but it tends to induce eyestrain and fatigue. Blue on the other hand has a tendency to have a cheerful affect on the readers. It also produces very little eyestrain and fatigue. Green is associated with nature in many cultures. It is a good idea to use green when the subject is the environment. And lastly, Yellow, like red, tends to be an eye catcher, but also induces much eyestrain. In fact yellow induces more eyestrain than any other color in the color spectrum. HOW COLOR IS PRODUCED To be realsitc, its not only how we see colors and how each of them effect us but the technical limitaions of producing colors within computer applications pose a certain challenge itself. Windows handles color palettes in the 8-bit (256 colors) display mode. 8-Bit mode means that a maximum of 256 different colors can be displayed at any time. This restriction applies for the whole screen. A color value in a palette consists of three bytes: one for the red component, one for green and one for the blue [7]. Most colors are based on the color models such as RGB, CMYK, Pantone, etc. The method of encoding colors (e.g. RGB) allows a range of 16.7 millions different colors; however in 8-bit display mode only 256 can be displayed simultaneously. The 8-Bit display mode uses palettes to display the 256 colors. A bitmap that uses a palette doesn't contain a three-byte-value for every pixel describing the absolute RGB-value for this pixel but rather a one-byte-pointer to a palette-entry [7]. For example if a desktop picture has a photo of the mercurysurface and the user is editing a photo of a beach in a window that doesn't take up the whole screen, then the mercury-image will be displayed using the palette of the beach-photo. This happens because the system can only display 256 colors at a time on the whole screen and the palette of the beach-photo is used because it has higher priority - it is the window which currently is on top. Color Palettes and Pickers A palette, in computer graphics, is a designated subset of the total range of colors supported by a computer graphics system. It can be thought of as an array of color samples that represent colors that can be used. Each color in the palette is assigned a number, and for each pixel, one of these numbers is stored. This number determines the color of the pixel. The following is a sample image of a palette: Basically there are two different types of palettes: logical palettes and the system palette. A logical palette is stored in the memory and belongs to a Device Independent Bitmap (DIB). The only limit for the number of logical palettes is the amount of memory available [7]. The system palette (or hardware palette) contains 236 colors of the palette(s) with the highest priority, as well as 20 reserved entries, that windows uses to draw windows, buttons and other objects in the OS. Every DDB (Device Dependent Bitmap) that is currently displayed uses the colors of the system palette which is managed by Windows itself [7]. While palettes offers a set of predefined colors, color pickers allow the users to set parameters to change the values or color codes to make more accurate selections. A user can select a color from existing palette and then further refine it with a color picker tool. 2

DISCUSSION AND CORELATION After reviewing the basics of vision and concepts of color production, the question may rise why there isnt an uniform scheme available for color representation. The reason is simple - not all systems require the use of functional color. The term Functional Color " is generally applied to uses and applications of hue in which beauty or appearance are secondary to more practical purposes [5]. Where color may be employed to aid visual acuity--as in a hospital surgery--it is obvious that an objective rather than subjective attitude must be taken; good vision must be served, not the likes and dislikes of the individual. In other words, a great number of color problems are to be handled through technical rather than artistic methods as we have seen in How color is produced section. Functional color is concerned with measurable facts. It is founded on research, on known visual reactions, on data which may be statistically analyzed. It differs from socalled "interior decoration" in that personal preferences or emotional attitudes are denied for well-ordered scientific practices. So, depending on the use of the applications each of them have their own mechanisms for handling color. For example considering Microsoft Word, where color only plays trivial role in highlighting information or to enhance aesthetics, it has a simple a palette representation. A total of 40 cubes represent the most possible color choices. However, the user has the possibility to use enhanced color selection with extended features that can be accessed via a detailed link at the bottom. Key for Adobe Color Picker: A. Picked color B. Original color C. Adjusted color D. Out-of-gamut alert icon E. Not Web-safe alert icon F. Web Colors option G. Color field H. Color slider I. Color values Probably the most fundamental color tool used commonly for most schemes is the color wheel. They display the spectral hues in a circle and show color relationships such as complements and analogous colors. The user spins the pointer around the color wheel to select the hue. The following example shows a very simple color wheel. As opposed to graphical applications such as Adobe Photoshop or illustrator, where each pixel of color matters greatly and thus the features for color management differs vigorously. One can expect advanced technique which has input mechanism for RGB; CMYK and also free sliders to control the limit of the color. This is what Adobe Color Picker lets a user do - to select a color by choosing from a color spectrum or by defining colors numerically. In the Adobe Color Picker (ACP), one can select colors based on the HSB (hue, saturation, brightness) or RGB (red, green, blue) color models, or specify a color based on its hexadecimal values. The ACP can also be customized to choose only from Web-safe colors or select from several custom color systems. The next diagram depicts the ACP tool. Research has found that non-planar relationships are especially important when using a perceptually based color space. In such a space, a planar slice perpendicular to the brightness axis gives colors of equal brightness so that even light colors like yellow aren t brighter than dark colors such as purple within the slice. This is an issue that needs significance for the slider options most pickers utilize to adjust their hue. Perception research affirms that brightness contrast is important for distinguishing objects from one another. It can also create a more aesthetic combination of colors. Research also shows that a color field s size and shape, influences the frequency with which a color appears in a 3

composition, and the background color all affects our perception of a color [9]. Advanced color pickers such as the ColorPic have additional features that increase accuracy. For example it aids selection by the use of color names to choose colors. The particular colors that match a name are subjective, but quickly finding a color based on a name can be useful start, especially how cumbersome many color pickers are. The name feature is particularly appropriate for rapidly calling up difficult to locate colors in current color pickers such as brown. The following diagram is a good representation where naming of colors is well practiced [8]. keyboard one can nudge the mouse pointer to help choose a value. As perception research shows [9], it would be difficult to decide, for example, which is the darker of two browns in a grid when one is next to a hot pink and the other next to light blue. It would be ideal to utilize how the painters might arrange their colors sequencing light colors at one end and the dark one on the other. Another good color selection scheme for the web is Victor Engel's Netscape (6x6x6) Color Palette Map [3]. It is a JavaScript page to aid selection of colors in an HTML document. It contains the best design displaying the 6 x 6 x 6 set of colors in the Netscape color palette. The color chips are hexagonal cells, arranged in two main grids to show the graduations from black to color at the left, and from white to color at the right. This allows a good composition to differentiate between multiple color backgrounds for a single color code. In the above tool, it has additional features which include a mixer section which has four color mixers on separate tabs which can be used by clicking the desired color. Using the arrow keys or mouse wheel the color can be adjusted exactly. Each tab has Hue, Saturation, Value, Red, Green and Blue constituent parts. Advanced features of this too such as the magnify section contains a configurable magnifier that makes grabbing colors simple. A user can change the magnification factor using the slider. Specifying Hi-Lite or Grid overlay a central square or grid on top of the magnifier, the user can use to help pick a color. Further it is possible to change the colors of these overlays by clicking the color squares to the left of the checkboxes. Using the arrow keys on the As a remark it can be denoted that the flexibility of choosing a precise color is not the only key. Color theorists and painters agree that color relationships are more important than the colors themselves. An important opinion of artistic floor theory and related scientific experimentation also supports that tools that display colors in isolation of in groupings unrelated to an image will fail to provide all the necessary information to make a color choice, and it can also significantly mislead the user. In their study Interactive Color Palette Tools [10], the authors mentions that it is a tedious setup processes for working with color and aren t generally undertake in everyday usage. In their experience, with using different tools, they found that most people use a subset of the tools tailored to their work style or project needs. To overcome such barriers where most users omit some of the core features of a tool, the authors designed their own artifact which had redundant and some times overlapping functionality to accommodate these changes. As a result an increased possibility of usage of the features was provoked. 4

CONCLUSION As a conclusion it can be mentioned that visual feedback and design of the interface may be an equivalent factor in improving the usability of a color selection interface as the particular color model being used. The reason is that perception doest not only depend on the colors itself but also on how they are presented. They seem to be coupled closely in a rational bind. Secondly, many systems may have technical limitations on the range of color models that they can produce, and the interface of the color pallets and the pickers are the only means of improving user perception and their choice of selection. Consideration should be given that the accessibility of the pallets and pickers - it must be easy and simple to use. They should have clear affordance and provide accurate mental models for users to manipulate it. It is also essential that the color tools use more than one technique to facilitate color tuning and selection. REFERENCES 1 Color Perception: Retrieved from http://hyperphysics.phyastr.gsu.edu/hbase/vision/colper.html 2 Color Perception2: Retrieved from http://hyperphysics.phyastr.gsu.edu/hbase/vision/colper.html 3 Victor Engel's Netscape (6x6x6) Color Palette Map 4 Gallery of Data Visualization http://www.math.yorku.ca/scs/gallery/colorpick.h tml 5 Color Psychology and Color Therapy: A Factual Study of the Influence of Color on Human Life by Faber Birren. Retrieved from the web: http://www.questia.com/pm.qst?a=o&d=1176505 2 6 MSDN Microsoft Library http://msdn.microsoft.com/library/default.asp?url =/library/en-us/dnwue/html/ch14b.asp 7 Palettes in Windows http://www.fortunecity.com/skyscraper/windows/3 64/palinwin.html 8 ColorPic http://www.iconico.com/colorpic/ 9 C. Ware, Information Visualization: Perception for Design, Morgan Kaufmann, 1999 10 Interactive Color Palette Tools by Barbara J. Meier, Anne Morgan Spalter, and David B. Karelitz, from Borwon University, USA 11 Model and Representation: The Effect of Visual Feedback on Human Performance in a Color Picker Interface by SARAH A. DOUGLAS And ARTHUR E. KIRKPATRICK 12 Color Your Feeling, Design Support System for Color Coordination by Ji-Hyun Lee and Wei Qian Graduate School of Computational Design, National Yunlin University of Science & Technology, Taiwan (R.O.C.) 13 Wikipedia on Vison: Retrieved from http://en.wikipedia.org/wiki/image:coneresponse.png 5