So What Is Color?

Color is the aspect of things that is caused by differing qualities of light being reflected or emitted by them. You need light to see color. When light hits an object, some colors bounce off the object and some are absorbed by the object.

Back in the 1660s, Sir Isaac Newton did more to contribute to science than letting an apple pop him in the head; he also started experimenting with prisms and sunlight, showing that the clear white light that made up everything people could see outside was actually composed of seven visible colors—the scientific establishment of the visible spectrum (Figure 1-2).

Figure 1-2. Isaac Newton experimenting with prisms and sunlight

Newton’s work was the progenitor for a massive number of breakthroughs in chemistry, optics, physics, the study of color in nature, and how perception works. His studies were predated by others going back thousands of years to the time of Aristotle in ancient Greece, who postulated that God sent celestial rays of light from heaven; he believed all colors originated from white and black—the visual representations of lightness and darkness—and that they were directly related to the four earthly elements of fire, earth, air, and water. These beliefs were widely held until Newton’s time.

Newton posed his theories in his work Opticks, which has been slightly modified in spelling over time, but remains a commonly used business phrase into the 21st century. He revolutionized the idea of light being only one color by writing, “[I]f the Sun’s Light consisted of but one sort of Rays, there would be but one Colour in the whole World…”

Newton identified the colors inside the prism that would become the acronym learned the world over by school children as ROY G BIV (red, orange, yellow, green, blue, indigo, and violet) (Figure 1-3).

Figure 1-3. Prism colors—red, orange, yellow, green, blue, indigo, and violet

The visible spectrum is the part of the electromagnetic spectrum that can be seen by the human eye (Figure 1-4). There are seven parts of the electromagnetic spectrum:

Radio waves

The lowest range, used for communications including voice, entertainment media, and data.

Microwaves

The second lowest, used for radar, high-bandwidth communications, and as a heat source in industrial applications and consumer and commercial microwave ovens.

Infrared

The range between microwave and visible light. Humans can feel it as heat if it is intense enough, but cannot see it. Animals such as frogs, snakes, fish, and mosquitos rely on it for their vision.

Visible light

Right in the middle of the electromagnetic spectrum, these are the wavelengths visible to most, but not all human eyes.

Ultraviolet

Falls between visible light and X-rays and is a component of sunlight invisible to the human eye. It has multiple uses in medicine and industry, but also causes skin cancer in large doses.

X-rays

There are actually two types of X-rays, designated as “soft” and “hard,” that have different spots on the spectrum. Soft X-rays are between ultraviolet and gamma rays, while hard X-rays are in the same region as gamma rays.

Gamma rays

Mostly known throughout the world as the stuff that turned Bruce Banner into the Incredible Hulk, it does in fact cause damage to living tissue, but in small doses can be used to kill cancer cells. In large amounts, it is very dangerous, and even fatal to humans.

Figure 1-4. Electromagnetic spectrum from various sources, along with radiation type and approximate scale of wavelength

Newton further shook up previously held beliefs when he revealed that color does not inherently exist in objects, but rather the surface of an object reflects certain colors and absorbs the rest. Only the colors that get reflected are the ones that we see, and thus the ones that define the color of an object. Therefore, a ripe banana sitting on your kitchen counter is not yellow because yellow is part of a banana’s characteristics, but because the surface of its peels reflects the wavelengths that our eyes and brains translate into “yellow” and absorbs the rest. Thus, an all-white object like a sheet of printer paper reflects all visible wavelengths of color and a freshly laid tar designed to fix a pothole appears black because it absorbs all of the wavelengths.

Red, green, and blue (RGB) are known as the additive primary colors in the spectrum. There are many sets of RGB values, each producing part of the visible color spectrum. When these three are combined in balanced amounts, they make pure white. By varying the amount of the three of them, all other colors on the spectrum can be produced.

How Do We See Color?

The process of seeing color starts in the retina, which is physically part of the eye, but considered to be part of the brain (Figure 1-5). It is covered by millions upon millions of light-sensitive cells called rods and cones based on their similarities to those shapes. These cells act as receptors that process the incoming light into nerve impulses and send them via the optic nerve to the cortex inside the brain.

Figure 1-5. Demonstration of how the human brain perceives color

The rods are found in the highest concentration around the edge of the retina, with more than 120 million found in each eye (Figure 1-6). The rods are useful for low-light vision. The cones are responsible for luminance, which is the grayscale part of color.

Figure 1-6. The cellular organization of the retina¹

Cones, meanwhile, are most frequent in the middle of your retinas, and diminish in number toward the periphery. There are about six million cones in each eye transmitting the more intense levels of light, which translate into colors and visual sharpness. The cones come in three different types: long, medium, and short, which are sensitive to long, medium, and short wavelengths of light. When they work in harmony, they supply the brain with ample interpretation to identify colors and interpret them as well, key tasks for data visualization and storytelling (Figure 1-7).

Figure 1-7. Visible light wavelengths impact the eyeball and are interpreted by the brain

The optic nerve connects to the thalamus, sort of a central hub for all kinds of signals coming into our brains from our senses. The thalamus takes these signals and processes them, determining what is necessary and what isn’t. It also combines and repackages what it receives with new information from elsewhere and sends that information to other parts of the brain for further use. In data visualization, color can be used as both signal and noise. We’ll discuss in future sections how to avoid using color as noise and focus on using it as a signal for important insights.

The next stop is the visual cortex, located at the back of the brain (Figure 1-8). There are different types of cells located here that break down the information being sent by the thalamus. Some of the cells identify what shape an object is, while others note what color it is, what texture it appears to be, and whether it is moving or not. All of the signals combine to form the entire image. This construct moves on to the prefrontal cortex, located above the eyes and behind the forehead, where the brain combines and processes multiple types of information from the senses, along with emotions and memories, to produce not only a total picture of the item, but what we know and/or believe about that object from prior experiences and learned knowledge.

Figure 1-8. How the eye works when viewing an object

Let’s take an example that could easily be a case of mistaken identity. You’re walking down the street on a brisk evening jaunt and you pause when you notice something coiled up in a neighbor’s yard a couple of doors down (Figure 1-9). The light is receding as the sun sets and it’s costing you the ability to see much beyond the object’s shape and size. Long and wrapped around itself multiple times, it gives your brain two immediate options—it could be a garden hose that hasn’t been properly put up after being used, or it could be a snake lying in wait for its next dinner to saunter by.

Only when you get closer can you see either the bright green of the hose or the organic textured brown-black of a snake’s skin. The bright green color of the hose triggers information in your brain that designates the hose as harmless and maybe calls up images of plants getting watered or you as a child racing through a sprinkler on a hot summer day. If you see the darker color and slimy look instead, your brain will trigger danger signals and emotions of fear and the need to retreat to safety will emerge.

Figure 1-9. Long green garden hose laying on a lawn that looks like a snake

What Is Color Theory?

Color theory blends the science and art of color and details how we perceive color, and how colors mix, match, and contrast with one another. It also involves how colors influence the messages we communicate to one another. To understand how color theory works, put yourself at your local grocery store in your mind’s eye. When you turn down the aisle for soft drinks, you know you want to buy a case of Coca-Cola Classic (Figure 1-10).

Figure 1-10. Cans of Coca-Cola and other soda bottles on display in a supermarket

Despite the fact that there are hundreds of selections lining the shelves from the floor to several feet above your head, it only takes you a moment or two to identify a case of Coke from all the rest and set it in your basket. Did you look at the label on each and every item to find out where they keep the Coke? Of course not! Instead, you headed straight for the tell-tale red box, the color of which I suspect you can call up in your mind right now, and the white script lettering that goes along with it. This is the power of color theory and why color is so vital to things like product branding.

As mentioned earlier, red, green, and blue combine to form the additive color mixing model. Televisions and movie projectors use these primary colors to create the rest when they broadcast a show or a movie (Figure 1-11).

A second model is the subtractive color mixing model, composed of the colors cyan, magenta, yellow, and black (CMYK). This model is used for colors on physical surfaces like packaging, signage, and paper. Newspapers use them when printing color editions or using color advertising. It’s known as the subtractive model because adding more color subtracts more light from the paper. CMYK is the better model for printing things out.

Figure 1-11. Additive and subtractive color models and when to use each one

Color theory can be represented by the color wheel (Figure 1-12), which breaks colors into three categories:

• Primary colors

• Secondary colors

• Tertiary colors

We have our old friend Isaac Newton to thank for the color wheel. He documented the first one, which is used today by artists and designers the world over in an amazing array of ways. The primary colors on the wheel are red, yellow, and blue. The secondary colors—those created when the primary colors are mixed together—include purple, orange, and green. There are six additional tertiary colors, which are created by mixing primary and secondary colors together to get combinations like red-violet or blue-green.

Figure 1-12. Color wheel that demonstrates the primary, secondary, and tertiary colors

Drawing a line down the center of the color wheels also distinguishes between the warm colors (red, orange, yellow) and the cool colors (blue, green, purple). Warm and cool associate colors with different temperatures, which are essential in creating advertising, branding, and data visualization for different audiences. Warm colors create sensations of action, brightness, and energy.

Remember that case of Cokes you spotted in just a few seconds at the grocery store? In the Western world, red is proven to be a color that promotes excitability and stimulates appetites in most people. When your cones feed that bright Coca-Cola red into your brain, it can trigger thoughts, emotions, and memories of things like hot summer days, a cold glass in your hand, the sound of the “fizz” when you pour a drink over ice, and so on. Cool colors, on the other hand, such as blue, purple, and green, are often identified with feelings of calm, peace, serenity, and trust in the Western world. Next time you’re watching TV, try to count the number of car companies and healthcare companies using blue in their logos; you might need a calculator to add them all up!

When you are looking to make a pair of colors stand out by using them at the same time, you can select a warm color and a cool color together. These pairs are called contrasting colors, or in some disciplines, complementary colors. Two colors that appear on opposite sides of the color wheel are often thought of as clashing with one another, but matching them up often results in very pleasing contrasts.

For instance, red and green are contrasting colors that appear on opposite ends of the color wheel, but few people complain about seeing them together on Christmas wrapping paper (Figure 1-13)! The more transitional colors there are between a pair of colors, the greater the contrast between them.

Figure 1-13. Green- and red-colored Christmas wrapping paper

Other well-used combinations include analogous colors, which sit right next to each other on a color wheel, such as blue and purple, or orange, red, and yellow. In an analogous color scheme, one color will dominate, another will support the first, and the third will provide small accents.

Triadic colors are usually a trio that are evenly spaced around the color wheel to give a lot of contrast. International fast-food chain Burger King is a well-known example of this, mixing its red lettering inside the orange “burger bun” with a blue circle wrapped around both (Figure 1-14).

Figure 1-14. Burger King logo

Hues, Shades, Tints, and Tones

Seeing how there are only 12 colors on the color wheel we just discussed, your childhood self might be wondering how in the world that short supply translates into the set of 64 crayons (Figure 1-15) we all loved as kids (and many of us continue to use as adults).

Figure 1-15. Open box of 64 crayons with a few crayons out of the box

You know what I’m talking about—for every standard blue, red, or yellow, you’ve also got periwinkle, cornflower, sea green, and my personal favorite—neon carrot. The variations come from hues, shades, tints, and tones, four terms that get horribly mixed up and interchanged by people—both amateurs and professionals—who have no idea what any of them actually mean. Let’s break all four of them down so that you never confuse one for another again.

Tones

Tones are the result of adding both black and white to a hue—which is roughly the equivalent of adding gray. The mixture of black and white can send hues in a number of directions; they can be darker or lighter than their original incarnation, less saturated, or more intense. Tones often emulate the colors we see in the natural world better than hues, tints, or shades because they often have complex qualities that are reflective of the way that items in nature are affected by age, light, and weather.

Here is a visual that helps explain the four concepts with the color yellow; observe the differences between the pure hue, tints, shades, and tones (Figure 1-16).

Figure 1-16. Demonstration of the difference between hues, tints, shades, and tones

The Psychology of Color

We’ve danced a few times throughout this chapter on particular emotions and feelings that different colors create. There is a clear connection between our feelings, moods, and behaviors and different colors. Certain colors are even associated with physiological reactions such as eyestrain, higher blood pressure, and faster metabolism. How does color psychology work in general? Some of what people perceive when they see colors is inextricably tied to the culture they hail from. This is a topic we’ll explore further in the book. Here, we can break down the most well-known and well-used colors in the world and see the different emotions they often conjure up and the symbolism that we tend to associate with them at first sight.

Why People Don’t Always See the Same Color

One of the biggest viral phenomena of the last decade occurred in 2015 when a photograph of a dress appeared on social media accompanied by the question of whether the two-tone apparel was black and blue or white and gold (Figure 1-17). It seemed like a bizarre question to just about anyone who looked at the photo, but more bizarre still were the looks on people’s faces when their friends, family members, and coworkers glanced at the photo and saw a garment with completely different colors than they themselves registered. The dress was bought by the mother of a bride-to-be on the small island of Colonsay, Scotland. When she posted it on her Facebook page, a considerable debate ensued among other members of the wedding party, then the whole island, then seemingly the whole world! Within a day, the debate had been written up on Buzzfeed in an article that generated 673,000 views, and a Wired article rang up 32.8 million unique visitors. When popular singer Taylor Swift commented on it, her Tweet was liked 154,000 times and retweeted 111,000 times.

Figure 1-17. A dress that appears to be different colors—white and gold or black and blue

So, which was it? Well, when the wedding occurred, the dress turned out to be blue and black, which baffled some wedding goers and did the same for many across the internet. Bevil Conway, a neuroscientist from Wellesley College who studies vision and color, said the discrepancy came from the visual system trying to discount the chromatic bias. Some people discounted the blue side and saw the dress as white and gold, while others discounted the gold side and saw blue and black.

It happens more often than you think, and some of the problem is with a feature that photo editors and photographers use called white balance in which color casts are removed from an object that is physically white, so it remains white in the picture. White balancing shifts all the colors, not just the white objects. A more biological reason is that people have differences in their color vision that has them seeing different tints, shades, and tones when presented with an object. This leads to confusion where both sides think they are right and are baffled when people claim to see something that completely goes against what their own eyes are telling them.

There are other reasons why people don’t see the same color—this is related to color vision deficiency, or “color blindness,” a topic we will cover in a later chapter.

Summary

This chapter covered some important concepts around how we see color. Next, we’ll discuss how to intentionally use color for data storytelling. We will use what we’ve learned about color theory and color psychology to design effective data visualizations.