An Examination of Color Theories in Map-BasedInformation Visualization

Sussan Einakiana,b, Timothy S. Newmanb

aCalifornia Polytechnic State University, CA, USAbUniversity of Alabama in Huntsville, AL, USA

Abstract

The suitability of certain classes of color combinations for overlay of data at-

tributes in map-based information visualization are considered here through

user evaluations. The color combination classes considered include (1) harmo-

nious colors, (2) opposing (i.e., opponent) colors, (3) high saturated colors, (4)

low saturated colors, (5) high lightness colors, (6) low lightness colors, and (7)

disharmonious colors. The evaluations focus on noticeability, in particular of

the first six classes versus disharmonious colors since earlier work has suggested

disharmonious colors may be advantageous. The first class, of which there are

a variety of artistic color theories, is of special interest here.

Keywords: color harmony, color theory, color opponency,

information visualization, map overlays

1. Introduction

Color can be a valuable cue in presentation and visualization. For example,

color can be used to visualize musical notes [7] and to differentiate features on

a map [9]. Suitable color backgrounds can also make vegetables appear more

attractive at a grocery store [27]. Many visualizations have used color as a visual5

cue, especially to represent one attribute of data. Use of color can be valuable

for several reasons, including (1) allowing more attributes to be displayed than

∗Corresponding authorEmail address: tnewman@cs.uah.edu (Timothy S. Newman)

Preprint submitted to Journal of Visual Languages and Computing August 7, 2017

if only grayscale was used, (2) allowing variation (or distinguishing levels) to

be displayed in an intuitively meaningful way, (3) possibly making structures

or trends more readily discoverable, and (4) allowing annotations or labels in a10

different color than the rest of the visualization. Although color can be readily

observed by standard observers, a visualization may be more useful if color is

used in a “safe” or prudent way. “Safe” usage has many aspects. One aspect is

the need to put the right color in the right place, as described by Tufte [31]. For

example, using the same color for the background and display of an attribute15

would not be a “safe” choice. The second aspect is the need to use a suitable

theme in the right place. For example, if using the combination of a colorful

foreground theme on a colorful background was visually stimulative but did not

foster ready discovery of trends by visualization users, such a combination would

be imprudent, or possibly even unsafe, for visualization.20

Here, we consider the application of certain theories of color combinations

in map-based information visualization. In particular, we explore if known

artistic color theory principles can be useful in such visualizations. The issues

considered here are related to larger questions of which color combinations can

create effective impressions of different types (or levels) of information for users.25

1.1. Harmony

One class of theories explored here are theories about harmonious color

combinations. Such theories posit that there are colors that are aesthetically

pleasing when used together. In addition, such theories include rules about

how to select color combinations that are harmonious. Some visualization re-30

searchers have shown interest in using harmonious colors according to artistic

color theories. For example, Wang and Mueller [34] have suggested that use of

harmonious color combinations may be suitable in visualizations that employ

color cues. Artistic color theorists typically define a harmony with respect to

some color space, for example, with respect to Goethe’s hue circle [33]. For35

example, Goethe believed that colors whose hues are located on opposite sides

of his hue circle could be regarded as a harmonious pair.

2

One motivation some have voiced for using harmonious color combinations

in visualization is that since such colors are aesthetically pleasing together, vi-

sualization using harmonious groupings of colors may well engage viewers and40

thus promote discovery of significant features or phenomena [33]. In addition,

since some color harmonies are specified by formulae or other formal relation-

ships, visualizations that use harmonious color combinations may be able to use

automatic, formulaic means to select colors.

However, other work [6] has found that disharmonious color combinations45

may be advantageous over harmonious color combinations, in particular in map-

based visualization.

In this paper, we report user evaluations that explore certain aspects of both

harmonious and disharmonious color combinations for presentation of data at-

tributes in map-based information visualization. In all, three models of harmo-50

nious colors are considered and two models of disharmonious colors are consid-

ered. We also report evaluations that considered alternative color combinations,

including opponent colors, high (and low) saturated colors, and high (and low)

lightness colors. A primary focus is consideration of the noticeability (visibility)

of structure(s) (or phenomena).55

1.2. Current Practices

There is currently a diversity of practice in applying various color combi-

nation schemes in map-based visualization. For example, we obtained a series

of weather forecast visualizations maps from the National Oceanic and Atmo-

spheric Administration’s (NOAA) National Weather Service. The color overlays60

on these maps were found to follow a variety of color theories or properties:

some overlays used harmonious colors (specifically, Itten harmonies, which are

explained in the Section 2.1), some overlays used disharmonious colors, and

other overlays used saturated colors. An example of a NOAA map with over-

lays using all three of these color theories or properties on the same map is65

shown in Figure 1.

3

Figure 1: Weather forecast map from the National Oceanic and Atmospheric Ad-ministration’s (NOAA) National Weather Service [41]

1.3. Organization

The paper is organized as follows. First, in Section 2, related work is dis-

cussed. Then, the performed evaluations are described in Section 3. Results

and analysis follow in Section 4. A discussion of results, based on consideration70

of perceptual difference, is presented in Section 5. Finally, the conclusion is

presented in Section 6.

2. Background and related work

Over the years, many artistic color theorists have proposed theories of color

relationships in paintings and other art works. Many of the early color theories75

were strongly motivated by personal philosophy. More recent theories about

color relationships in artistic, printed, and other presentation media have often

utilized knowledge of how the brain processes or perceives color. Some of the key

theories which could have applicability in map-based information visualization

are described in this section.80

4

2.1. Color harmony theory

In addition to the Goethe theory about color harmony, a few other theories

that describe or determine a set of colors that are harmonious when they appear

together have been proposed.

2.1.1. Itten Harmonies85

One of the well-known models for color harmony is the Itten theory [14].

That theory uses Itten’s hue circle (color wheel), which consists of twelve evenly

spaced colors. His hue circle was based on three subtractive (i.e., color of pig-

ments) primary colors of blue, red, and yellow. These primary colors in the

Itten hue circle form an equilateral triangle. The equal mixture of two primary90

colors produces a secondary color, and these are also evenly spaced on the hue

circle. The Itten hue circle’s six other colors are mixtures of primary and sec-

ondary colors. Itten described rules of color harmony from artistic perspectives.

In the Itten theory, color harmonies are based on the relative position of col-

ors on the hue circle and the relationships among them. Specifically, in Itten’s95

theory there are harmonious combinations of two, three, four, and six colors.

Colors separated by 180 degrees on his hue circle are considered to be two-color

harmonies (also called dyad or complementary harmonies). Any three colors

forming an equilateral triangle on his hue circle are three-color harmonies (also

called triadic harmonies) [38]. Colors forming a square (or rectangle) on his hue100

circle are considered to be four-color harmonies (also called tetrad harmonies).

Colors forming a hexagon are considered to be six-color harmonies (also called

hexad harmonies) [4, 14]. Itten’s color harmony theory has also been used by

Matsuda [17] and Tokumaru et al. [30], who introduced new sets of harmonious

color combinations, which we describe next.105

2.1.2. Matsuda Harmonies

The Matsuda [17] color harmony theory is based on Itten’s color model

[4] and on patterns of popular colors in the fashion industry from 1979-1984.

The theory categorizes these color patterns into eight hue template types and

5

Figure 2: Matsuda’s hue template types (duplicated from [4])

ten tone distribution types, creating a total of 80 color patterns. The hue110

templates, which are shown in Figure 2, are named the i (Similar harmony), V

(Adjacent harmony), L (Intermediate harmony), I (Complementary contrast), T

(Complementary half circle), Y (Three point contrast), X (Multi complementary

contrast), and N (Neutral value contrast) hue template types [17]. Each hue

template is defined by a radial relation on the hue circle rather than on any115

specific set of colors. Figure 2 shows the radial relations for each type in gray.

Any combination of colors having a radial relation shape matching that of some

template is an instance of that template type. (That is, any rotation on the hue

circle of a given type of hue template is another instance of that template [30].)

The Matsuda theory has been described by and used by Cohen-Or et al. [4],120

Tokumaru et al. [30], O’Donovan [25], etc.

2.1.3. Nemcsics Harmonies

Another theory for color harmony is what we will call the Nemcsics [19]

theory. His theory views colors as possessing three traits: hue (A), saturation

(T), and luminosity (V). The Nemcsics theory defines hue as the dominant125

wavelength of light, saturation as the degree of purity (colorfulness) of a color,

and luminosity as the degree of brightness of a color. The Nemcsics theory uses

the ColorOid color system and that system attempts to describe color in an

aesthetically uniform color space. The ColorOid was developed based on the

6

results of a series of experiments. It organizes color in a system that is cylindrical130

in shape. It has luminosity as its vertical axis. On this axis, the range is from

white to black. It has saturation as a direction quantity, expressed as distance

from the vertical axis. On this dimension, the lowest saturated colors are nearest

to the vertical axis and the highest saturated colors are farthest from that axis.

The ColorOid color system defines hue to be associated with radial location on135

the cylinder [15].

There are 48 ColorOid basic colors, spaced in a circle (the Nemcsics hue

circle) such that if one pair of colors has the same spacing as another pair of

colors, each pair will produce a comparable difference in sensation in the visual

system. These 48 basic colors have wavelengths between 450 and 625 nm [19, 22,140

23]. Each basic color specifies a half plane of constant hue. Colors are positioned

on each half plane based on two other traits, saturation and luminosity. The

circle of the 48 basic colors is partitioned into seven categories: yellow, orange,

red, violet/purple, blue, cold green, and warm green. Each category is further

subdivided into seven hues, except for red, which is subdivided into six hues.145

Figure 3 presents the ColorOid color space [40].

Figure 3: ColorOid Color space (duplicated from [40])

The Nemcsics theory considers color contrast in determining harmony. It

7

considers colors to be harmonious when they have a satisfactory contrast rela-

tionship in at least one of the three traits (hue, saturation, and luminosity). Hue

contrast is related to the distance of the color hues in the Nemcsics hue circle150

(i.e., contrast tends to increase with distance). Saturation contrast depends on

hue and lightness, and it corresponds to the difference in the perceived hue due

to the differences in lightness [23]. Luminosity contrast is related to lightness

contrast (i.e., the difference of perceived lightness values). The Nemcsics the-

ory considers that the hue contrasts that are harmonious are color pairs with155

hue angles between 30 and 40 degrees or between 130 and 140 degrees. It also

considers color pairs whose hue angles are between 70 and 90 degrees or close

to 150 degrees to be not harmonious [20, 21].

2.1.4. Other Harmony Models and Past Studies

One early theory is the Munsell [18, 3] theory. In this theory, each color has160

three basic traits: hue, value, and chroma. The hue trait describes the (single)

dominant light wavelength associated with the color. The value trait indicates

the degree of lightness; it distinguishes light and dark colors. The chroma trait

indicates color “purity.” Color purity indicates the degree to which a color is free

of any achromatic color. An achromatic color is one that is not characterized165

by a single wavelength, such as black, white, or gray. In the Munsell theory the

key factors in determining harmony in a visual work are color strength and area

(A). Color strength is the product of the color’s value (V) and chroma (C). A

“strong” color has a larger product of value and chroma than does a “weak”

color. Color area is the amount of the visual work (i.e., image) occupied by170

the color [18, 10]. The color area factor is tied to the scene rather than to a

property of the color itself.

In the Munsell theory, a combination of two colors is said to be balanced (and

thus harmonious) if the ratio of the color areas (i.e., the area of the scene that has

that color) is inversely proportional to the ratio of the color strengths: A1/A2 =175

V2C2/V1C1, where A1, V1, C1 are the area, value, and chroma, respectively, of

the first color and A2, V2, C2 are the area, value, and chroma, respectively, of

8

the second color [40]. For example, for two colors in an image to be balanced

and thus harmonious, the “strong” color needs to occupy less area in an image

than the “weak” one [40, 24]. In addition, the theory considers two colors to be180

harmonious if their mixture produces neutral gray [18].

One more recent color harmony theory is the Ou and Luo [26] theory. That

theory is based on psychophysical studies on human participants. In their stud-

ies, 1,431 color pairs were displayed against a median gray background. The

pairs were formed from 49 chromatic colors and 5 achromatic colors. The 49185

chromatic colors were based on seven universal colors and seven color tones.

Their universal colors were black, white, gray, red, orange, yellow, green, blue,

purple, pink, and brown, which are colors that many languages contain names

for, as described in a study by Berlin and Kay [35]. Their color tones were vivid,

pale, dull, dark, light-grayish, grayish, and dark-grayish. The five achromatic190

colors were white, light gray, medium gray, dark gray, and black. In the stud-

ies, participants viewed color pairs one by one on a CRT display in a darkened

room and determined which pairs were harmonious and which ones were not

harmonious.

One study of the Munsell [18] and Nemcsics (ColorOid) [21] color harmony195

theories (by Szabo et al. [28]) has also been described. Their study presented

combinations of two and three colors, displayed against a gray background,

to participants. For the paired combinations, two square color patches were

displayed side by side. For the triplets, three square color patches were displayed

in a triangular formation on the display. One pair or triplet was displayed on200

one half of the display. That color pair or triplet followed the Munsell color

harmony model. On the other half of the display, another color pair or triple

was displayed. That color pair or triplet followed the Nemcsics color harmony

model. For each color pair or triple, the observers rated their impression of color

harmony from the most harmonious to the least harmonious color combinations.205

In addition, Szabo et al. [28] have considered human impressions of two

sub-classes of harmonies, the monochromatic harmonies and dichromatic har-

monies. A monochromatic harmony is a set of colors with the same hue, but

9

possibly differing chromas or values. A dichromatic harmony is a set of colors

of complementary hues (i.e., the hues of the colors are separated by 180 de-210

grees on the hue circle) but possibly differing chromas or values [28]. Szabo et

al. found that, for the monochromatic harmonies, observers considered Munsell

harmonies colors to be more harmonious than Nemcsics ones. But they found

that for dichromatic harmonies (with equal chromas, but possibly differing val-

ues), the observers considered Nemcsics harmonies to be more harmonious than215

Munsell ones.

2.1.5. Color Combination Generators

Some automated tools that generate color combinations that follow certain

color theories exist. For example, Hu et al. [12] have described a tool that uses

the similarity and contrast of one or two traits of a color to create harmonious220

color schemes. In addition, Gramazio et al. [8] have developed Colorgorical,

which is a web based tool that can automatically generate color palettes based

on color perceptual distance, color name difference, etc.

2.2. Saturated Colors

Saturation can also be used as a visual attribute in map-based visualization225

(e.g., for integer data, for which it is suitable), although it is considered to be

an advanced topic [1] and thus is not used very often [1]. Saturated colors in

images do tend to catch a viewer’s attention [29], and high-saturation colors

can be used to make important features stand out on a map [9, 5]. In addition,

use of saturation differences may be prudent when there are many categories of230

qualitative data to be displayed on a map [32].

2.3. Opponent Color Theory

Another type of color relationship that potentially could offer value in infor-

mation visualization is use of opposing (opponent) colors. Theories of opposing

colors were first proposed some time ago (e.g., Hering’s [11] theory). The oppo-235

nency of interest to us here is the chromatic opponency (red versus green and

10

blue versus yellow) of the human visual system. Chromatic opponency is the

result of opponent neurons that have an excitatory response to one small range

of wavelengths and an inhibitory response to another small range of wavelengths

(i.e., the wavelength representing the opponent color) [11].240

3. Experiments and Methodology

In this section, we describe our experiments to explore effectiveness of oppo-

nent, high (and low) saturated, and high (and low) lightness color combinations

for map-based information visualization. Our emphasis is comparison versus

disharmonious color combinations, building off our prior work [6]. Five classes245

of experiments were performed and are described here. One supplemental inves-

tigation was also performed. (Results of experiments are presented in Section 4.)

These experiments used user perceptions to primarily test one aspect of the ef-

fectiveness of each sort of color combination: visual attentiveness (noticeability)

to aspects of the visualization.250

These experiments involved overlay of a color label on either a single- or

multi-color background. The background and overlay colors formed color com-

binations considered by the users.

It is worth noting that other parameters (which are beyond our scope here)

are also involved in noticeability, including the position, size of a feature of255

interest, hue contrast, etc.

3.1. Software and Tools

Suitable visualizations following each model were viewed by the participants.

All participants viewed the visualizations on the same moderate resolution dis-

play. The display was color-calibrated at least once per week or after every260

fifth participant, whichever came first. This calibration was performed using

the Windows 7 display color calibration and the PowerStrip [42] calibration

packages. In addition, room lighting was identical for all participants. Finally,

participants had the opportunity to adjust the seating and display positions for

best visibility.265

11

Figure 4: Crowded Symbology Map A (before additional overlays)

Figure 5: Crowded Symbology Map B (before additional overlays)

3.2. Experiment One: Itten Harmonies vs. Disharmonies

Experiment One was designed to evaluate the noticeability of the well-known

Itten color harmonies versus disharmonious color overlays. In it, the participants

viewed visualizations on two maps, called Crowded Maps A and B, using label

overlays colored harmoniously versus ones using label overlays colored dishar-270

moniously. The maps are shown in Figures 4 and 5. They already contained

labels for some well-known places. We overlaid additional labels (for less well-

known places) for the experiment. The harmoniously colored combinations were

chosen according to Itten’s rules of harmony. The disharmoniously colored com-

binations were colors separated by 80 or 150 degrees on the hue circle from the275

background color (since our prior work [6] had found colors with those sepa-

12

rations were disharmonious). Thirteen harmonious or thirteen disharmonious

labels were overlaid on each crowded map. Examples of the two maps with

harmoniously colored label overlays are shown in Figures 6 and 7.

Figure 6: Crowded Map A (after added overlays)

Figure 7: Crowded Map B (after added overlays)

The participants were asked to recite the overlaid labels in perceived notice-280

ability order. The time to complete this task was recorded for each participant.

These times were taken as the base measure for the degree of noticeability.

Twenty participants (10 Female and 10 Male) took part in Experiment One.

3.3. Experiment Two: Matsuda Harmonies vs. Disharmonies

Experiment Two considered the noticeability of the Matsuda i-type har-285

monies versus disharmonious color overlays. These overlays were also considered

13

versus overlays that were neither known harmonies nor known disharmonies. In

the experiment, participants viewed visualizations that involved three colored

maps of the U.S. state of Alabama. On each map, 12 labels were overlaid, each

in a different color. The colors were those whose positions on the hue circle were290

offset by 30, 60, 80, 90, 120, 150, 180, 210, 240, 270, 300, and 330 degrees clock-

wise from the background color. The labels at the 30 and 330 degree positions

formed Matsuda i-type harmonies with the background color. The labels at

the 80, 150, and 210 degree positions formed disharmonies with the background

color.295

The participants were asked to recite the overlaid labels in perceived notice-

ability order, from most to least noticeable, for each map. The times until the

recitation were recorded for each label. The participants were limited to 30 sec-

onds to recite the label overlays. For any label not seen by participants a value

of 31 seconds was recorded. For each user, the average time until recitation300

was determined for each label color, resulting in 12 measures per participant.

Participants were also asked to report which color overlay on each map was (1)

the most pleasant and (2) the most distinct. Overall averages per label were

also determined.

Thirty participants (15 Female and 15 Male) took part in Experiment Two,305

although 8 of the participants could not see 3 or more of the labels.

3.4. Experiment Three: Nemcsics vs. Itten Harmonies

Experiment Three considered if the Nemcsics Harmonies and Itten har-

monies had differing noticeabilities. In it, the participants viewed other vi-

sualizations involving labels overlaid onto colored maps. Five base maps were310

utilized in the experiment. Two of them are the Crowded Maps A and B. The

other three maps (maps of the world), which are shown in Figures 8-10, displayed

certain features of political subdivisions using color codings. Those three maps

are termed “the non-crowded maps.” Relatively unknown place names were

utilized for the labels we overlaid to minimize possible biases from personal315

knowledge.

14

Figure 8: (Non-Crowded) Map #1 before overlays

Figure 9: (Non-Crowded) Map #2 before overlays

Five of the ten maps used in the experiment utilized label colors forming

harmonious color combinations with the background based on the Nemcsics

rules. The other five maps were identical except for using harmonious combina-

tions based on the Itten rules. Two examples of the visualizations used in this320

experiment are shown in Figures 7 and 11.

The participants were asked to recite the overlaid labels in perceived notice-

ability order. The visualizations were presented in a randomized order to limit

possible biases based on order. For all maps, the elapsed time for reciting each

label was recorded for each participant. These times were taken as the base325

measure for the degree of noticeability. Participants were also asked to report

which color overlay on each map was the most noticeable.

15

Figure 10: (Non-Crowded) Map #3 before overlays

Figure 11: Map #3 (non-crowded) after harmonious overlays

Forty participants (20 Female and 20 Male) took part in Experiment Three.

3.5. Experiment Four: Disharmonious vs. Opponent

Experiment Four considered the noticeability of opponent colors versus dishar-330

monious color overlays. In it, the participants viewed four solid-colored maps

of the U.S. state of Alabama with overlaid labels (i.e., with different colors and

labels from those in prior experiments.) The background colors of these maps

were red, yellow, green, and blue. Examples of two maps before adding any

label overlays are shown in Figure 12. The disharmonious color combinations335

for label overlays were colors separated by 80 degrees or 150 degrees on the

hue circle from the background colors. The opponent color combinations for

16

label overlays were chosen based on chromatic opponency (i.e., red-green and

blue-yellow).

(a) Map1 with red background (b) Map2 with yellow background

Figure 12: The U.S. state (Alabama) map with two different background colors.

Participants viewed a series of map pairs. In each pair, one map used a340

disharmoniously colored label and the other map used either another dishar-

moniously colored label or an opponent color label. For each pair, participants

reported which label was the most noticeable. The total number of participants

choosing each label type as the most noticeable one was then determined. The

opponent colors in these pairwise comparison were chromatically opponent with345

the background color. The disharmoniously colored labels used colors separated

by 80 degrees or 150 degrees on the hue circle from the background color.

Twenty one participants (10 Female and 11 Male) took part in Experiment

Four.

3.6. Experiment Five: Saturation, Lightness, and Disharmonies350

Experiment Five considered some alternative color combinations: high and

low saturated colors, and high and low lightness colors. These were compared to

one another and to disharmonious color combinations. In the experiment, par-

ticipants made pairwise comparisons. The labels were overlaid on eight colored

17

weather maps of the entire United States. These maps were from the National355

Oceanic and Atmospheric Administration’s (NOAA) National Weather Service.

The disharmoniously colored combinations were chosen as in the prior experi-

ments (i.e., at positions separated by 80 and 150 degrees from the background

color), and these colors’ level of saturation and lightness were 42% and 58%,

respectively. The color combinations for both the high and low saturation label360

overlays had a 58% level of lightness. The color combinations for both the high

and low lightness label overlays had a 42% level of saturation. (These saturation

and lightness levels are the colors’ S and L values in the HSL color model.)

In all trials, the same label was displayed at the same location, but displayed

using a color suitable for the trial. Figure 13 shows examples of one map with365

an overlay colored disharmoniously with the background (left) and another map

with an overlay in a low saturation color with respect to the background (right).

In this paper, Figure 13 is shown zoomed-in for presentation purposes.

(a) Overlay with disharmoniouscolor

(b) Overlay with low saturatedcolor

Figure 13: Weather forecast map (zoomed-in) with added label overlay (Perkins) using dishar-mony and low saturated colors

Participants were shown a series of the same map pairs, in each case with one

map using a disharmonious color label and the other map using either a high370

(or low) saturated color or a high (or low) lightness color label. For each pair,

participants reported which label was most noticeable. The total number of

18

participants choosing each label type as the most noticeable one was recorded.

For each user, the percentage of times each color combination type was also

determined.375

Twenty six participants (13 Female and 13 Male) took part in this experi-

ment.

4. Results and Statistical Analysis

In this section, the raw results and statistical evaluation of results for the

five experiments are presented. The analysis involves statistical testing of sig-380

nificance at the 95% confidence level.

4.1. Experiment One Results and Analysis

Table 1 shows the average response times (in seconds) for Experiment One’s

task of finding the 13 labels colored harmoniously (according to the Itten Har-

mony Model) and the 13 labels colored disharmoniously on each of the two385

crowded maps.

Table 1: Average time (sec) to find the label overlays on the two crowded maps, Disharmonyvs. Itten

Color Label #

Scheme #1 #2 #3 #4 #5 #6 #7 #8 #9 #10 #11 #12 #13

Map1 Disharmony 3.1 4.2 3.4 3.8 2.1 2.6 2.1 2.8 2.6 1.4 2.3 1.8 2.6

Harmony 4.4 5.2 4.4 5.0 3.7 2.9 2.8 3.7 4.4 4.1 4.4 3.2 3.3

Map2 Disharmony 1.4 3.0 2.0 2.0 2.3 2.0 2.0 1.7 1.8 2.0 1.4 2.1 1.4

Harmony 2.4 3.9 2.5 3.4 3.0 3.2 3.0 3.0 2.5 2.1 3.1 3.5 2.7

Table 2 includes the overall average response times for each of the color

theories tested. The mean value of the average response times for finding labels

colored harmoniously is higher than the mean value of the average response

times for labels colored disharmoniously. The table also shows the two sample t-390

Test results to determine statistical significance of this difference. The difference

is statistically significant; there is strong evidence that label overlays colored

disharmoniously are more noticeable than labels colored harmoniously (at least

according to Itten’s harmony theory).

19

Table 2: Two sample t-Test for Disharmonious versus Itten-harmonious overlays

Harmonious Disharmonious

Mean 3.44 2.28

Variance 0.22 0.26

Observations 13 13

T-Stat 6.024

t-Critical 1.771 ⇒ SIGNIFICANT

4.2. Experiment Two Results and Analysis395

The second experiment considered the Matsuda i-type harmonies, dishar-

monies, and labels not definitively harmonious or disharmonious (according to

the Matsuda theory). Table 3 shows the results for the 22 participants who

recited all, all but one, or all but two of the labels. Average response times

(in seconds) are shown for finding the labels, broken out by the color’s offset400

(clockwise) on the hue wheel from the dominant color of the background. In this

trial, the labels whose colors were 150 degrees from the background color tended

to be the first one noticed, whereas the labels whose colors formed a Matsuda i-

type harmony with the background (i.e., especially the labels whose colors were

positioned 330◦ clockwise from the background) tended to be noticed later.405

Table 3: Average Time (sec) to find the colored labels

30◦ 60◦ 80◦ 90◦ 120◦ 150◦ 180◦ 210◦ 240◦ 270◦ 300◦ 330◦

Time 13.45 21.64 18.64 22.77 12.36 7.45 10.68 11.23 11.37 11.91 16.86 22.23

To determine the statistical significance of these results, two sample t-Testing

was performed on the average times for the i-type harmonies (30 and 330 de-

grees) versus those for the disharmonies (80, 150 and 210 degrees). (Since

colors at the 150 and 210 degree positions both represent 150 degree separa-

tions, we aggregated them to form composite 150 degree disharmony results.)410

Table 4 includes these averages as well as the result of two sample t-Testing

on them. There was a statistically significant difference between noticeability

of label overlays done using i-type color harmonies and disharmonies; overlays

20

using disharmonious colors are likely inherently more noticeable.

Table 4: The two sample t-Test for i-type harmonies vs. disharmonies for response times

i-Type Harmonies Disharmonies

Mean 17.84 12.44

Variance 23.87 5.62

Observations 22 22

T-Stat 4.665

t-Critical 1.717 ⇒ SIGNIFICANT

We also did a t-Testing of the response times for the i-type hue template415

combinations against the ensemble of the other combinations. Those test results

are shown in Table 5. There was a statistically significant difference in the times

to notice overlays using i-type color harmonies versus non i-type colors; overlays

using i-type harmonies are likely inherently less noticeable.

Table 5: The two sample t-Test for i-type harmonies vs. non i-type colors

i-type Harmonies Non i-type Colors

Mean 17.84 14.53

Variance 23.87 4.93

Observations 22 22

T-Stat 2.896

t-Critical 1.717 ⇒ SIGNIFICANT

Lastly, we were curious if the difference in the two different types of dishar-420

monies was significant, so we performed t-Testing on the average response times

the 80 degree color separations versus the 150 degree separations. (Again, the

150 and 210 degree position results were aggregated.) Table 6 shows these t-

Test results. There is a statistically significant difference in the times to notice

overlays using 150 degree disharmonies versus the 80 degree ones; 150 degree425

disharmonies seem to be the more promising ones.

4.3. Experiment Three Results and Analysis

Table 7 shows the average, minimum, and maximum response times (in

seconds) for Experiment Three’s task of finding the harmoniously colored labels

21

Table 6: The two sample t-Test for 80 degrees vs. 150 separation disharmonies.

150 degrees 80 degrees

Mean 9.34 18.64

Variance 15.83 35.29

Observations 22 22

T-Stat 6.097

t-Critical 1.717 ⇒ SIGNIFICANT

on the 5 maps. The columns labelled AN denote times for task completion for430

Nemcsics harmonies. The columns labelled JI denote times for task completion

for Itten harmonies. Results are broken out by map.

Table 7: Time (sec) to find labels overlays using harmonious color combinations.

Map1 Map2 Map3 Map4 Map5

AN JI AN JI AN JI AN JI AN JI

Mean 3.3 3.9 2.9 2.8 5.8 6.1 6.3 4.4 8.7 8.3

Min 1.8 1.9 1.5 1.8 5.0 4.4 4.3 3.6 6.8 5.5

Max 10.0 7.4 6.1 4.8 6.4 7.1 7.1 5.5 9.7 10.3

Std. Dev. 1.97 1.53 1.17 0.89 0.40 0.65 0.64 0.39 0.69 1.36

Table 8 summarizes the overall minimum, maximum, standard deviation,

and average response times (in seconds) for each harmony theory. The tasks

using the Itten harmonies were completed somewhat faster than the ones using435

the Nemcsics harmonies.

Table 8: The overall time (sec) for finding the overlays using harmonious color combinations.

Color Space Mean Min Max Std. Dev.

AN 5.40 1.54 10.04 0.63

JI 5.11 1.81 10.28 0.48

Our t-Testing of statistical significance of these results are shown in Table

9. The difference in results for Itten versus Nemcsics harmonies was not sta-

tistically significant. Thus, it may be no better to use Nemcsics harmonies for

visualization using map overlays than to use Itten harmonies.440

22

Table 9: The two sample t-Test for Nemcsics vs. Itten harmonies for all five maps.

Nemcsics Itten

Mean 5.40 5.11

Variance 0.57 0.33

Observations 40 40

T-Stat 1.680

t-Critical 1.684 ⇒ NOT SIGNIFICANT

(We also studied if there were any differences in male and female responses

and between those with normal vision and corrected-to-normal vision. In both

cases, no statistically significant differences were observed.)

4.4. Experiment Four Results and Analysis

Table 10 shows counts of participant choices for Experiment Four’s task of445

stating which label of each pair was most noticeable. The columns labelled

“Opp” denote results for chromatic opponent colors. The columns labelled 80

and 150 denote results 80 degree and 150 degree disharmonies, respectively.

Table 10: The count of participants’ responses for label noticability

Pairwise Noticeability Comparisons

Opp 80 Opp 150 150 80

Map1 10 10 10 12 15 8

Map2 11 11 5 18 20 1

Map3 17 4 10 12 20 1

Map4 15 6 16 5 18 3

Table 11 shows the overall averages and two sample t-Testing results for

the pairwise tests of opponent colors versus the 80 degree disharmonies. Here,450

the averages are the average selection count (e.g., 2.52 for opponent means the

average person chose the opponent color label as the most noticeable one for

2.52 of the 4 maps). There is a statistically significant difference between these

color combinations; label overlays using opponent colors are apparently more

noticeable than the 80 degree disharmonies. Thus, opponent colors maybe a455

better choice than 80 degree disharmonies for overlay colors.

23

Table 11: The two sample t-Test for Opponent versus Disharmonious (80 degrees separation)

Opponent 80 degree

Mean 2.52 1.48

Variance 1.46 1.26

Observations 21 21

T-Stat 2.076

t-Critical 1.721 ⇒ SIGNIFICANT

Table 12 shows the overall averages and two sample t-Testing results for the

pairwise tests of 80 versus 150 degree disharmonies. Counts here have a similar

meaning as in the Table 11. There is a statistically significant difference between

label overlays using colors separated by 150 degrees and colors separated by 80460

degrees on the hue circle; just as in Experiment Two, label overlays using 150

degree separations are more noticeable than labels using colors with 80 degree

separations on the hue circle.

Table 12: Two sample t-Test for two Disharmonious (150 degrees versus 80 degrees on thehue circle), average by participant

150 degrees 80 degrees

Mean 3.48 0.62

Variance 0.36 0.45

Observations 21 21

T-Stat 10.954

t-Critical 1.721 ⇒ SIGNIFICANT

We also tested on counts of participant choices for noticeability of labels

colored with 150 degree disharmonies versus opponent colors. There is no sta-465

tistically significant difference between label overlays using colors with 150 de-

gree disharmonies versus opponent colors. Thus, either opponent colors or 150

degree disharmonies may be good choices for overlay colors in visualization.

4.5. Experiment Five Results and Analysis

Table 13 shows the count of participants’ responses for the series of pairwise470

tests in Experiment Five. The columns labelled “Dis” are the results for the 150

24

degree disharmonies. The columns labelled “HS” are the results for the highly

saturated colors. The columns labelled “LS” are the results for the low saturated

colors. The columns labelled “HL” are the results for the high lightness colors.

The columns labelled “LL” are the results for the low lightness colors. It appears475

that label overlays colored disharmoniously are more noticeable than the others.

It also appears that high saturation color overlays are more noticeable than low

saturation, low lightness, and high lightness color overlays. For each user, we

determined the percentage of times each color combination was chosen in each

pairwise testing type and used that in proportion testing.480

Table 13: Count of participants’ responses for label noticeabilities, disharmonious, high andlow saturated, and high and low lightness.

Pairwise Noticeability Comparisons

Dis HS Dis LS Dis HL Dis LL HS LS HS HL HS LL HL LL

Participants 17 10 24 2 25 1 14 12 23 3 25 1 19 7 5 21

The disharmonious versus highly saturated color label test results are shown

in Table 14. Here, since we have only proportion information, z-testing (the Z

Proportions test) was used. Here, on average, users chose the disharmonious

labels 65.3% of the time. For our sample size, this was not statistically signif-

icant; there is not strong evidence that label overlays colored disharmoniously485

are more noticeable than labels with highly saturated colors.

Table 14: Z-Test (z Proportions Test) for Disharmonies vs. Highly Saturated overlays.

Disharmony Highly Saturated

Proportion 0.653 0.346

Observations 26 26

Z-Stat 1.568

Z-Critical 1.960 ⇒ NOT SIGNIFICANT

The disharmonious versus low saturation color label test results are shown

in Table 15. Again, z-testing was used to test significance. The proportion of

participants selecting the disharmonious color (92.3%) is a significant outcome;

there is strong evidence that label overlays colored disharmoniously are more490

25

noticeable than labels with low saturated colors.

Table 15: Z-Test (z Proportions Test) for Disharmonies vs. Low Saturated overlays.

Disharmony Low Saturated

Proportion 0.923 0.077

Observations 26 26

Z-Stat 4.315

Z-Critical 1.960 ⇒ SIGNIFICANT

The disharmonious versus high lightness color label test results are shown

in Table 16. On average, users chose the disharmonious color 96.1% of the

time. The z-Testing indicates this is a significant outcome; label overlays colored

disharmoniously are more noticeable than labels with high lightness colors.495

Table 16: Z-Test (z Proportions Test) for Disharmonies vs. High Lightness overlays.

Disharmonious High Lightness

Proportion 0.961 0.039

Observations 26 26

Z-Stat 4.707

Z-Critical 1.960 ⇒ SIGNIFICANT

The disharmonious versus low lightness color label test results are shown in

Table 17. On average, users chose the disharmonious color 53.8% of the time.

The z-Testing indicates this is not a significant outcome; there is not enough

evidence that label overlays colored disharmoniously are more noticeable than

labels with low lightness colors.500

Table 17: Z-Test (z Proportions Test) for Disharmonies vs. Low Lightness overlays.

Disharmonious Low Lightness

Proportion 0.538 0.462

Observations 26 26

Z-Stat 0.392

Z-Critical 1.960 ⇒ NOT SIGNIFICANT

The high saturated versus low saturated color label test results are shown in

Table 18. On average, users chose the high saturated colors 88.4% of the time.

26

The z-Testing indicates this is a significant outcome; label overlays with high

saturated colored are more noticeable than labels with low saturated colors.

Table 18: Z-Test (z Proportions Test) for High Saturated vs. Low Saturated overlays.

High Saturated Low Saturated

Proportion 0.884 0.115

Observations 26 26

Z-Stat 3.922

Z-Critical 1.960 ⇒ SIGNIFICANT

High saturated colors also were found to have a significant difference notice-505

ability over both lightnesses.

In summary, it appears that disharmonious color combinations are more no-

ticeable than low saturated, high lightness and low lightness color combinations.

High saturated colors are also apparently a better choice than low saturation,

high lightness, and low lightness color combinations, as well.510

5. Discussion

We next report an investigation into the relation between perceptual distance

of colors and noticeability. Perceptual distance was one of the parameters used

by Gramazio et al. [8] to create discriminable and preferable color palette.

Their work used CIEDE2000 color difference to quantify perceptual difference515

in colors [8]. Our investigation here likewise uses the CIEDE2000 measure.

Our investigation considered the perceptual difference between the 80 degree

disharmonies and 150 degree disharmonies. It was aimed at finding an objective

determination of which class of disharmony is most perceptually different and

thus likely most discriminable.520

Table 19 shows the perceptual difference of these two classes of disharmo-

nious colors for 34 disharmonious color pairs (i.e., 17 pairs of 80 degree dishar-

monies plus 17 pairs of 150 degree disharmonies). The average perceptual dif-

ference for the 150 degree disharmony pairs was 36.73. The average perceptual

difference for the 80 degree disharmony pairs was 28.14. The larger perceptual525

27

differences for the 150 degree pairs is the likely reason underlying our observa-

tions of users finding 150 degree disharmonies to be more noticeable than 80

degree ones.

Table 19: Perceptual Difference for the 150 degree vs. 80 degree disharmonies

Perceptual Difference of Disharmonious colors

150◦ 11.07 21.96 33.27 13.95 26.44 6.94 37.11 25.07 23.51 44.97 10.78 61.12 75.77 18.42 95.21 39.16 62.64

80◦ 18.20 35.56 16.63 29.71 34.19 5.78 21.24 20.99 35.15 46.51 20.77 12.62 5.27 73.47 42.80 16.41 43.01

We also considered the perceptual difference between the 17 pairs of 150 de-

gree disharmonies and 17 pairs of colors based on subset of the Itten harmonies530

(used in our Experiments 1, 3, and 4). Table 20 shows these perceptual dif-

ferences. The average perceptual difference of the disharmonious color pairs is

35.73 and the average perceptual difference of the Itten-harmonious color pairs

is 18.13. This perceptual difference deviation is the likely reason underlying our

observations of the superiority of the 150 degree disharmonies over the Itten535

harmonies.

Table 20: Perceptual Difference of Disharmonious (150◦) vs. Harmonious colors.

Perceptual Difference of 17 Disharmonious and Harmonious Colors

150◦ 11.07 21.96 33.27 13.95 26.44 6.94 37.11 25.07 23.51 44.97 10.78 61.12 75.77 18.42 95.21 39.16 62.64

Itten 11.07 18.20 16.63 13.95 6.94 5.78 20.99 23.51 10.78 20.77 5.27 18.42 39.16 1641 21.26 26.18 32.98

6. Conclusion

This paper has considered the noticeability of certain classes of color com-

binations for map-based visualization, with emphasis on the value of dishar-

monious color combinations vis-a-vis other color theories. The results of these540

experiments, based upon the participants’ responses, provide evidence that label

overlays colored disharmoniously are more noticeable than ones colored harmo-

niously. Disharmonious color combinations also appear more noticeable than

low saturated, high lightness, and low lightness color combinations. Opponent

28

colors and possibly highly saturated colors may merit more study. Our ex-545

periments also provide evidence that label overlays using opponent colors are

more noticeable compared to 80 degree disharmonies. More study is needed,

though, to determine the relative benefit of opponent colors versus 150 degree

disharmonies.

We have also considered perceptual distance, which was suggested by [8]550

as one of the parameters useful to create discriminable and preferable color

palettes, to provide another perspective on discriminability. The 150 degree

disharmonies are more perceptually distant than are the other color combina-

tions, which we believe is the likely reason for their higher reported noticeability.

Future studies of the relation of noticeability to color disharmony could be555

valuable. It also may be interesting to consider other classes of harmonies, espe-

cially Matsuda’s two other harmonies, in future work. It may also be interesting

to study if cultural background has any relationship to any color combination’s

utility in information visualization. It may also be interesting to explore if age

or known eye disorders, such as glaucoma, cataracts, etc., affect the relationship560

between perceived readability and color separations.

Acknowledgment

We are very thankful to K. Hayashida and K. Tsuda who translated part of

Matsuda’s book [17] from Japanese. We also appreciate P. O’Donovan and K.

Yatani who answered our questions regarding Matsuda’s book [17].565

The human participants approval was taken from IRB (Institutional Review

Board) Human Subjects Committee.

References

[1] A. Brown and W. Feringa, Colour Basics for GIS Users, Pearson EducationLtd., Harlow, UK, 2002.570

[2] G. M. Buurman, Total Interaction: Theory and Practice of a New Paradigmfor the Design Disciplines, Birkhauser, Basel, 2005.

29

[3] T. M. Cleland, A Practical Description of the Munsell Color System withSuggestion for Its Use, Munsell Color Co., Baltimore, 1937.

[4] D. Cohen-Or, O. Sorkine, R. Gal, T. Leyvand, and Y.-Q. Xu, “Color Har-575

monization,” Proc., SIGGRAPH ’06, Boston, pp. 624-630, 2006.

[5] G. Darkes, M. Spence, Cartography-an Introduction, British CartographySociety, London, 2008.

[6] S. Einakian and T. S. Newman, “Experiments on Effective Color Combi-nation in Map-Based Information Visualization,” Proc., Visualization and580

Data Analysis ’10 (SPIE Vol. 7530), San Jose, pp. 5-12, Jan. 2010.

[7] J. Fonteles, M. Rodrigues, and V. Basso, “Creating and Evaluating a Par-ticle System for Music Visualization,” J. Visual Languages and Computing,Vol. 24, pp. 473-482, 2013.

[8] C. Gramazio, D. Laidlaw, and K. Schloss, “Colorgorical: Creating Discrim-585

inable and Preferable Color Palettes for Information Visualization,” IEEETransactions on Visualization and Computer Graphics, Vol. 23, No. 1, pp.521-530, 2017.

[9] A. Griffin, “Color Theory,” The International Encyclopedia of Geography,John Wiley & Sons, Ltd., Hoboken, New Jersey, pp. 1-14, 2017.590

[10] M. Hascoet,“Visual Color Design,” Proc., 16th Int’l IEEE Conf. on Infor-mation Visualization, Montpellier, pp. 62-67, July 2012.

[11] E. Hering, Outlines of a Theory of the Light Sense, Harvard UniversityPress, Cambridge, MA, 1964.

[12] G. Hu, Z. Pan, M. Zhang, D. Chen, W. Yang, and J. Chen, “An interac-595

tive method for generating harmonious color schemes,” Color Research andApplication, Vol. 39, No 1, pp. 7078, 2014.

[13] L. M. Hurvich and D. Jameson, “An Opponent-Process Theory of ColorVision,” Psychological Review, Vol. 64, No. 6, pp. 384-404, 1957.

[14] J. Itten, The Art of Color, Translation by Ernst van Haagen from Kunst600

der Farbe. Van Nostrand Reinhold, New York, 1961.

[15] R. G. Kuehni and A. Schwarz, Color Ordered: A Survey of Color Systemsfrom Antiquity to the Present, Oxford University Press, New York, 2008.

[16] T.-W. Lee, T. Wachtler, and T. J. Sejnowski, “Color Opponency is anEfficient Representation of Spectral Properties in Natural Scenes,” Vision605

Research, Vol. 42, pp. 2095-2103, Aug. 2002.

[17] Y. Matsuda, Color Design, Asakura Shoten, Japan, 1995.

30

[18] A. Munsell, A Grammar of Color, 1921 ed. reprint with forward by F.Birren, Van Nostrand Reinhold, New York, 1969.

[19] A. Nemcsics, “ColorOid Colour System,” Color Research and Application,610

Vol. 12, pp. 135-146, 1987.

[20] A. Nemcsics, “Experimental Determination of Laws of Color Harmony. Part3: Harmony Content of Different Scales with Similar Hue,” Color Researchand Application, Vol. 34, pp. 33-44, 2009.

[21] A. Nemcsics, Colour Dynamics Environmental Colour Design, Ellis Hor-615

wood, New York, 1993.

[22] L. Neumann, A. Nemcsics, and A. Neumann, “Quantitative Color HarmonyRules based on ColorOid Lightness and Saturation Definition,” Proc., Int’lConf. on Color Harmony, Budapest, pp. 1-6, Apr. 2007.

[23] L. Neumann, A. Nemcsics, and A. Neumann, “Computational Color Har-620

mony based on ColorOid System,” Proc., Computational Aesthetics inGraphics, Visualization and Imaging ’05, Beijing, pp. 231-240, 2005.

[24] Z. O’Connor, “Colour Harmony Revisited,” Color Research and Applica-tion, Vol. 35, Issue 4, pp. 267-237, Aug. 2010.

[25] P. O’Donovan, A. Agarwala, and A. Hertzmann, “Color Compatibility625

From Large Datasets,” Proc. of ACM SIGGRAPH ’11, Vol. 30, no. 4,Article No. 63 (pp.1-12), Aug. 2011.

[26] L.-C. Ou and M. R. Luo, “A Colour Harmony Model for Two-Colour Com-binations,” Color Research and Application, Vol. 31, No. 3, pp. 191-204,2006.630

[27] H. Schifferstein, B. Howell, and S. Pont. “Colored backgrounds affect theattractiveness of fresh produce, but not its perceived color,” Food Qualityand Preference, Vol. 56, pp. 173-180, 2017.

[28] F. Szabo, P. Bodrogi, and J. Schanda, “Comparison of Colour HarmonyModels: Visual Experiment with Reflecting Samples Simulated on a Colour635

CRT Monitor,” Proc., Color in Graphics, Imaging, and Vision (CGIV ’06),Leeds, UK, pp. 392-397, June 2006.

[29] M. Tian, S. Wan, and L. Yue, “A color Saliency Model for Salient ObjectsDetection in Natural Scenes,” Proc. , Int’l Multimedia Modeling Conf. ’10,Chongqing, China, pp. 240-250, Jan. 2010.640

[30] M. Tokumaru, N. Muranaks and S. Imanishi, “Color Design Support Sys-tem Considering Color Harmony,” Proc., IEEE Int’l Conf. on Fuzzy Sys-tems ’02, Vol. 1, Honolulu, pp. 378-383, May 2002.

[31] E. Tufte, Envisioning Information, Graphics Press, Cheshire, CT, 1990.

31

[32] J. Tyner, Principles of Map Design, Guilford Press, New York, 2010.645

[33] L. Wang, J. Giesen, K. T. McDonnell, P. Zolliker, and K. Mueller, “ColorDesign for Illustrative Visualization,” IEEE Transactions on Visualizationand Computer Graphics, Vol. 14, no. 6, pp. 1739-1746, 2008.

[34] L. Wang and K. Mueller, “Harmonic Colormaps for Volume Visualization,”Proc., IEEE/ EG Symposium on Volume and Point-Based Graphics ’08,650

Los Angeles, pp. 33-40, Aug. 2008.

[35] C. Ware, Information Visualization: Perception for Design, 3rd ed., Else-vier Inc., Waltham, MA, 2013.

[36] C. Ziemkiewicz and R. Kosara, “Preconceptions and Individual Differencesin Understanding Visual Metaphors,” Computer Graphics Forum, Vol. 28,655

No. 3, pp. 911-918, June 2009.

[37] Abitom Software, “Color Wheel Expert,” [Online]. Available: http://www.abitom.com/, Accessed 2017.

[38] “Basic Color Schemes- Introduction to Color Theory,” 2000-2012. [Online].Available:http://www.tigercolor.com/color-lab/color-theory/660

color-theory-intro.htm, Accessed 2017.

[39] FlexInform BT., “ColorOid Professional,” [Online]. Available: http://

coloroid.flexinform.com, Accessed 2009.

[40] B. MacEvoy, “Color Theory,” [Online]. Available: http://handprint.

com/HP/WCL/tech13.html#munsell, Accessed 2017.665

[41] “National Weather Service Broadcast,” [Online]. Available: http://www.

nws.noaa.gov/outlook_tab.php, Accessed 2017.

[42] En Tech, “PowerStrip,” [Online]. Available: http://entechtaiwan.com/

util/ps.shtm, Accessed 2017.

32