[CV-03-009] Color Theory

Christophe, S. (2019). Color Theory. The Geographic Information Science & Technology Body of Knowledge (1st Quarter 2019 Edition), John P. Wilson (Ed.). DOI: 10.22224/gistbok/2019.1.9.

This Topic is also available in the following editions:  DiBiase, D., DeMers, M., Johnson, A., Kemp, K., Luck, A. T., Plewe, B., and Wentz, E. (2006). Color for Cartography and Visualization. The Geographic Information Science & Technology Body of Knowledge. Washington, DC: Association of American Geographers. 

1. Definitions
2. The Perception of Color
3. Color Mixing and Color Spaces
4. The Use of Color in Cartography and Data Visualization

1. Definitions

CMYK: a color space describes the intensities of Cyan, Magenta, Yellow and blacK, in a subtractive system, using in practice a fourth dimension, the black pigment.

color: the visual human perception of the spectral power distribution of a light source, that may be defined by its physical characteristics.

color hue: a dominant wavelength of visible light (e.g., red, blue, green).

color mixing: the process of combining primary colors to create new colors.

color value: light or dark variations of a single hue.

color saturation: the intensity of a single hue.

color contrast: the difference in the color and brightness (lightness) of an object and other objects in the field of view.

color palette: the set of all of the colors that are used in a project, and their relationships.

color scheme: a logical combination of colors, as a general plan for which colors to use.

color space: a specific organization of colors, where each color may be characterized by a point in a tri-dimensional (in general) space.

color transformation or conversion: the transformation of the representation of a color from one color space to another. 

color visual deficiencies (differences) (CVD): the inability to distinguish some shades of colors.

gamut: the subset of colors, which can be represented within a given color space or by a specific device.

harmony: a satisfying balance between colors that make sense together.

HSV: a color space describing a color by its Hue, Saturation and Value.

monochrome: an image in one color hue, potentially varying in value and saturation.

perceptually uniform: a change of the same amount in a color value resulting in a change of about the same visual importance.

RGB: a color space describing the intensities of Red, Green and Blue.

Schemes: logical color combinations made using the color wheel, enhancing color harmony.

sequential schemes: a logical arrangement of colors from low to high, represented by sequential lightness steps.

diverging schemes: a logical arrangement of colors that pairs two sequential schemes based on two different hues diverging from a shared light color (the critical midpoint), toward dark colors of different hues at each extreme.

qualitative schemes: a logical arrangement of colors that uses differences in hue to represent differences in categories.

2. The Perception of Color

Color is the visual human perception of the spectral power distribution of an energy source. Color may be defined by the wavelength of the light that is reflected from related objects. The range of wavelengths humans can perceive, or the visible spectrum, is approximately of 380-750 nm: it includes all colors forming the well-known rainbow described by Newton in 1671 with the help of splitting the white light with a prism. Those pure spectral colors form a continuous spectrum and are approximately divided into: violet (380-450 nm), blue (450-495 nm), green (495-570 nm), yellow (570-590 nm), orange (590-620 nm), and red (620-750 nm) (from left to right on Figure 1).

Figure 1. Approximation of Spectral Colors. Source: author. 

Color perception comes from the varying sensitivity of different cells in the retina, the neuronal layer of the eye, to light of different wavelengths (Figure 2a). The light arriving at the eye from a given direction determines the color sensation in that direction. There are two types of photoreceptors in the human retina: rods and cones, varying in absorbances (Figure 3). Rods are responsible for vision at low light levels (black, white, gray, and night vision). Cones are active at higher light levels to see color and fine detail. The central fovea of the eye is rod-free and has a very high density of cones. When light energy strikes rods and cones, neural signals are created as a result of chemical and routed through bipolar and ganglion cells forming the optic nerve (Figure 2b). This nerve then transmits information to the brain’s visual cortex (Ramamurthy et al. 2015).

Figure 2a. Eye anatomy (Source: vector graphics designed by Freepik) and 2b. Photoreceptor cells in the human eye (Source: OpenStax College).

Color vision and perception is a complex process that involves the eyes and brain. The trichromatic theory of color vision explains one part of this process, focusing on the photoreceptors in the eye that then send signals to the brain. Each type of cone is sensitive to approximately 200 color variations, thus human can distinguish about 10 million different colors (Wyszecki, 2006), although most people see less in practice. In trichromatic color vision theory, normal human vision is trichromatic, meaning three different types of cones in the retina are responsive to the colors blue (420nm - 440nm wavelengths), green (530nm - 540nm wavelengths), and red (560nm - 580nm wavelengths), respectively. The cones generate sets of responses of identical shape regardless of the wavelength that excite them (see the blue, green and red curves in Figure 3). The brain then interprets the color by comparing the inputs from each type of cone. The opponent process theory, in contrast, focuses on how color vision operates at the neural level and how the cones connect to the ganglion cells. The opponent process theory suggests that color perception is controlled by the activity of two opponent mechanisms, blue-yellow and red-green, opposing each other in excitatory and inhibitory responses, controlled by opponent neurons. Therefore, only one color can been seen at the time, because both colors oppose one another: for instance, red creates an excitatory response when green creates a negative one, and thus greenish-red cannot be seen because the opponent neurons only can detect one of these colors at the time. At the neural level, the opposing elements inhibit each other to determine how color is perceived. Both theories of color vision are needed to explain the complexity of color vision perception.

Figure 3. Normalized human photoreceptor absorbances for different wavelengths of light. Source: OpenStax College.

Color is divided into three separate visual variables: 1) color hue, the dominant wavelength in the visible spectrum; 2) color value, the overall amount of light emitted or reflected; 3) and color saturation, the breadth of the signal across the visible spectrum (see Symbolization & the Visual Variables).

Color vision deficiencies (differences) (CVD) is the inability to distinguish some shades of colors (Figure 4). One of the cone cells could be missing or damaged: the absence/alteration of red cone pigments (protanopia/protanomaly) or the absence/alteration of green cone pigments (deuteranopia/deuteranomaly) produce confusions between blue and green colors and between red and green colors, respectively. The absence of blue cone pigments, making colors more reddish, is very rare (tritanopia/tritanomaly). The two first cases are sex-linked, and may affect more than 5% of the male population. Some people may also suffer from low contrast sensitivity, a symptom of certain eye conditions or diseases. These differences in color vision and perception should be taken into account during the map design, so that everyone can still read the map.

Figure 4. Simulations of color vision differences of the visible spectrum of Figure 1: red-weak protonomaly, red-blind protonopia, green-weak deuteranomaly and green-blind deuteranotopia. Source: author. 

3. Color Mixing and Color Spaces

A number of color mixing methods and color spaces are available to reproduce colors for any media.

3.1 Color mixing

Color mixing refers to the process of combining primary colors to create new colors. There are two color mixing methods: additive and subtractive. The additive method (Figure 5a) combines red, blue, and green light to produce colors for television and computer displays; adding more colors (light) produces white light, and removing all color (light) produces a black screen. The subtractive method (Figure 5b) refers to how light is absorbed or absorbed by colored inks and pigments, typically cyan, magenta, and yellow; as more colored pigments are combined, more light is absorbed—that is, wavelengths are subtracted—which produces a darker color.

Figure 5. Additive (a) and subtractive (b) methods: in additive color space (a), combining red and green produces yellow. In subtractive color space (b), subtracting blue and yellow wavelengths produces green. Source: author. 

3.2 Color Space

A color space is a specific organization of colors, where each color is characterized by a point in a tri-dimensional space: physically produced colors are mapped to an objective description of color sensations registered in the eye, typically based on three parameters. Four color spaces are in common usage; each suited for particular display types and tasks:

• RGB space describes the intensities of Red, Green, and Blue, in an additive system. The RBG space is practical for describing the colors of an output device, such as a computer screen, as each pixel is composed of red, green, and blue sub-pixels. The RGB space is a cube in which each color is described by its coordinates (R, G, B), where values can be respectively included between 0 and 255 in 8-bits, or described in hexadecimal web color.
• CMYK space describes the intensities of Cyan, Magenta, Yellow, and blacK, in a subtractive system, using in practice a fourth dimension, the black pigment. The CMYK space is suitable to describe colors for printing.
• HSV space describes a color by its Hue, Saturation and Value. HSV is a more intuitive color space, based on a pure spectral hue. One notable disadvantage of these three color spaces is that they are perceptually non-uniform: the same change between two different colors is mathematically equal, but not visually perceived as equal. Modifying one parameter of a color (for instance the hue in HSV) causes a perceptual change in the other two parameters (saturation and value, if HSV).
• CIELAB or CIE L*a*b*, color space measures a color by its Lightness (L*, 0 to 100) and position between green-red (a*) and blue-yellow (b*)(-128 to 128) (CIE 1976; Fairchild 2005). Unlike RGB, CMYK and HSV, CIELAB is device-independent and perceptually uniform; the perceptual differences of two colors correspond with the numerical differences of their CIELAB measurements. CIELAB is very useful for printing issues (Figure 6).

Figure 6. Yellow and brown colors described in RGB, Hexadecimal, CMYK, HSV and CIELAB. Source: author. 

3.3 Gamut

Gamut refers to the subset of possible colors that can be expressed from three primaries or within a given color space for a medium. Identical color reproduction cannot be guaranteed between media (when changing computer screens, a RGB code may provide various color sensations), but it is possible to transform the representation of a color from one color space to another. The CIELab gamut is larger, i.e., it has more colors, than the RGB gamut, which is larger than the CMYK gamut. Parts of the gamut therefore need to be approximated when transforming between models. For instance, when it is required to print an RGB image of a map, colors that fall outside the CMYK gamut means that the color cannot be reproduced in print and therefore must be shifted in some way. CIELab is used as an interchange format when graphics for print have to be converted from RGB to CMYK. Color conversion may be mathematically difficult to compute, but online tools exist to facilitate it (see Additional Resources).

Figure 7. CIE Chromaticity Diagram: CIELab has a bigger gamut than RGB which has a bigger gamut than CMYK. AdobeRGB have more gamut than sRGB, which is the lowest common denominator color space specified by default for monitors and televisions. Source: © Harold Davis www.digitalfieldguide.com. Used with permission limited to this digital publication only. 

4. The Use of Color in Cartography and Data Visualization

Color is a powerful visual variable. Its easy digital manipulation in GIS and graphic design packages may result in many mistakes and misunderstandings from default or poor color choices. Combining colors in color palettes requires knowledge of color relationships in order to correctly encode information, guide visual attention, and establish or reinforce the visual hierarchy, achieving visual balance (See Visual Hierarchy & Layout or Aesthetics & Design (forthcoming)). Color has been extensively described in fundamentals papers and books for thematic and topographic map design. This section summarizes the main specific color issues which have to be taken into account for map and visualization design.

4.1 Notion of Color Schemes

The color wheel is the starting point for combining colors: it is a color diagram representing color hues arranged circularly according to their chromatic relationships, designed by Newton in 1666. Color schemes are logical combinations made using the color wheel, enhancing color harmony. Color harmony is a satisfying balance between colors that make sense together (Sutton & Whelan 2004). Various color schemes, proposed by theoretical and practical knowledge in visual arts, are based on the seven color contrasts of Itten (1977): hue, light and dark, warm and cool, complementary, simultaneous, saturation, and quantity (See Additional Resources). There are four principal schemes (Figure 8):

• Monochromatic schemes use only variations of a single hue in order to make a monochrome image (Figure 8a).
• Analogous or adjacent schemes use two or three colors that are close to each other (Figure 8b).
• Complementary color schemes use one color and its complementary color on the exact opposite, offering the highest hue contrast (e.g., red and green) (Figure 8c).
• Triadic schemes use three main colors equally spaced on the wheel making a diverse palette (Figure 8d).

Figure 8. Principal color schemes: monochromatic (a), analogous (b), complementary (c) and triadic (d). Source: Paletton Colorpedia. 

4.2 Color Schemes for Thematic Maps

In order to design better maps and visualizations, colors have to be properly chosen and arranged to correspond to the structuring of the data. A database of color palettes has been proposed targeting choropleth and qualitative maps, based on three types of color schemes, depending of the number of classes and the nature of data (Brewer, 1994, 2005):

• Sequential schemes are logically arranged from low to high, and this sequence should be represented by sequential lightness steps. Low data values are usually represented by light colors and high values represented by dark colors. Sequential schemes are suited to order data that progress from low to high: for instance, percent, densities, etc.
• Diverging schemes pair sequential schemes, based on two different hues diverging from a shared light color (the critical midpoint), toward dark colors of different hues at each extreme (e.g., increase and decrease of a phenomenon, larger and smaller proportions of a quantity, etc.)
• Qualitative schemes use differences in hue to represent differences in categories. The lightness of the hues used for qualitative categories should be similar but not equal. The lightest, darkest, and most saturated hues in the scheme should be given to data to emphasize in the map. Qualitative schemes are best suited to representing nominal or categorical data: for instance, inventory maps, land use, etc.

Figure 9. Sequential (1), diverging (2), qualitative (3) color schemes for maps. Source: Cindy Brewer. Used with permission limited to this digital publication only. 

4.3 Specific Color Issues

Specific color issues may appear, according to the context of use (e.g., the map’s purpose, its intended audience, and format of use) and may have to be taken into account to support color perception and avoid misinterpretation. (see Usability Engineering & Evaluation, Map Interpretation):

• Cultural and real-world connotations: Real-world color connotations are also cultural ones, implying that few colors possess universal connotations. Colors may be associated with their physical colors in nature, based on the existing words to name them, in a cultural and temporal context: for instance, the sea and hydrography are seen and represented “blue”, wooded area mostly “green” or “brown”, and land uses may be “yellow”, “red”, or “brown”, for some Western populations. This requires to pay attention to color arrangements according to the targeted audience. Nevertheless, it is also possible to represent a forest with a reddish color, which may be relevant in the fall season or when there is no risk of misinterpretation. For data without strong natural color associations, intuition may be developed by consistently associating each variable with its own color map.
• Conventional rules help the understanding of the map as people are used to them, related to the cultural and historical context. It could be specific color conventions related to navigational charts, well-known authoritative topographic styles or worldwide well-known styles, such as the Google Maps or Open Street Map styles.
• Semantic color relationships (difference, association, order): semantic structuring of data and thus colors, as developed by (Bertin 1967, Brewer, 2005), are also used for topographic data: two themes involved in an association should be represented by similar hues (e.g., lakes and rivers); two different themes should be represented by distant hues (e.g., vegetation and buildings); ordered themes should be represented by a color shading of the same or adjacent hues (e.g., roads).
• Color contrasts: Color is never seen isolated; color always interacts with other colors and involves color effects.
  • Simultaneous contrast: When selecting colors, the contrast between a colored object surrounded by another color may be enhanced, even made an unexpected change in color,called the simultaneous contrast. Saturation is mainly affected by this contrast (Itten 1977, Brewer 1992).
  • Figure-Ground color contrast: the color of smaller objects may be difficult to perceive depending on the color of the surrounding area. For example, color values often look lighter when surrounded by darker shades of gray.
• Adaptation to color vision deficiencies (also differences) (CVD): For map readers suffering from CVD, missing shades are replaced by shades of greys to improve efficiency in map reading (Jenny & Kelso 2007, Brock et al. 2015). Solutions include using predefined adapted color palettes and adjusting the colors of all the objects in order to improve information access for CVD. CVD simulators exist to help designers to evaluate their color palettes (see Additional Resources).
• Adaptation to devices: Color perception may vary according to software, hardware, and lightning conditions. For some emerging display technologies, the energy required to display an image is directly linked to its colors: a map can be more sustainable using dark colors rather than light ones. The optimal color palette, lowering the energy consumption on mobile devices while preserving semantic relationships, is one with a darker background and only few bright colors, for a given topographic map.
• Artistic and aesthetic issues: Inspiration from photography, painting, or other visual arts helps to select suitable color palettes for map and visualization design. For instance, Pop Art maps from Christophe & Hoarau (2012), revisited by a 2015 cartography class at Penn State University, maps in the manner of van Gogh or of Derain in Christophe (2011). This transfer of style, from art to map, is not only trendy today, but also useful in order to handle original color palettes and color contrasts to properly structure the data (see Aesthetic & Design, forthcoming). Optimizing the exploration of color combinations for palette design is an open research issue (See Additional Resources).
• Color and the other visual variables: Color perception is affected by the other visual variables, mainly shape and texture that have to be properly considered combined together (see Symbolization & Visual Variables).

Texts

• Gage J. (2006). Colour in Art. Thames & Hudson World of Art.
• Kandinsky V. (1989). Du spirituel dans l’art, et dans la peinture en particulier. Gallimard, coll. « Folio Essais », Paris.
• Mersey J. (1990). Colour and thematic map design: The role of colour scheme and map complexity in choropleth map communication. Cartographica, 27(3):129-138.
• Sawahata L. (2001). Color Harmony Workbook. Rockport Publishers, Inc.
• Spekat, A. and Kreienkamp, F. (2007). Somewhere over the rainbow; advantages and pitfalls of colourful visualizations in geosciences. Advances in Science and Research, 1(1):15-21.
• Thyng, K., Greene, C., Hetland, R., Zimmerle, H., and DiMarco, S. (2016). True colors of oceanography: Guidelines for effective and accurate colormap selection. Oceanography, 29(3):9-13.

Tools

• Color vision differences simulators:
  • Color BlindR, R package: https://github.com/clauswilke/colorblindr
  • Color blindness simulator COBLIS: https://www.color-blindness.com/coblis-color-blindness-simulator/
• Color spaces and gamuts:
  • Color converter: https://www.nixsensor.com/free-color-converter/
  • Color Gamuts Visualization and Comparison: https://www.youtube.com/watch?v=cvGCO9u_Ios
  • Color Space Conversion: http://www.cambridgeincolour.com/tutorials/color-space-conversion.htm
• User-friendly color wheels, schemes and palettes:
  • ColorBrewer: http://colorbrewer2.org
  • ColourLovers helps to explore over a database of palettes, patterns and colors:http://www.colourlovers.com/
  • Color gradients explorer helps to generate color gradients based on starting, inflexion and endingcolors: http://www.geotests.net/couleurs/gradients_inflex_en.html
  • Adobe Color CC, formerly Adobe Kuler: https://color.adobe.com/create/color-wheel/
  • Paletton: http://paletton.com/
  • Color Oracle: http://colororacle.org/design.html (Jenny & Kelso 2007)