color header

Understanding color

One of the most fundamental things we interact with everyday, either consciously or not, is color.

There have been extensive studies on why it is the way it is, how can they be created, how to use them with other colors in a particular design and even the psychological impact they have over humans.

As a game developer and occasional Photoshop/Illustrator user, color manipulation has been important. The purpose of this post is to give an overall glimpse of the topic and perhaps answer some of the most usual questions that may arise from it.

What is color?

According to Wikipedia, it’s «the visual perceptual property corresponding in humans to the categories called red, blue, yellow, etc.»

It’s a phenomenon associated with the sense of sight, the result of visual organs (e.g. eyes) coming into contact with light.

Although it can be described and defined mathematically, and even chemically, it’s one of those experiences we haven’t found a way to explain yet (just like taste). The famous Mary’s Room experiment deals with this kind of situations.

Spectrum of light

Defined as the distribution of light power versus wavelength, the spectrum of light represents the range of possible frequencies in which light can be divided.

Color is our perception of light travelling at a wavelength at the moment it reaches our eyes; i.e., color isn’t a real thing but rather our brain’s interpretation of it.

The spectrum of light was the part of the discoveries made by Isaac Newton and William Herschel, as mentioned in Hiding in the Light (5th episode of Cosmos: A Space-time Odyssey). And, thanks to Herschel, we now know that there’s both visible and invisible light (infrared, ultraviolet, etc.)


How is it perceived?

Inside the eyes, there are two types of photoreceptor cells that capture light: cones and rods.

Between the two of them, cones are the principal responsible of our color reception abilities. They are divided into three types, depending on the wavelengths they can perceive, which are S-cones (small), M-cones (medium) and L-cones (large).

Cone Absorption Curves
Cone Absorption Curves — © 2009 by Bruce MacEvoy

The number of cones determines the approximate number of colors a living being can see. Citing the color vision article in Wikipedia:

Types of Cones Colors perceived
Monochromacy 1 100
Dichromacy 2 1000
Trichromacy 3 10 million
Tetrachromacy 4 100 million
Pentachromacy 5 10 billion

Not all species are equal, though. Most primate mammals, marsupials and some insects are trichromats. The rest of the mammals are mainly dichromats, while reptiles, amphibians, birds and insects are tetrachromats; also, a tiny percent of humans are born with a 4th type cone, allowing them to see up to 100 million colors. Only the most privileged species are pentachromats.

Rods, on the other hand, are located in the outer edges of the eye; they are used in peripheral vision and work better in dim light (as opposed to cones, which work better of bright light).

Color blindness

The presence of S-, M- and L-cones makes us humans trichromats. However, mutations and accidents could render one blind of certain (if not all) colors.

A significant percentage of the population suffers from a deficiency on how they perceive color, a condition called color blindness.

There are many types of color blindness depending on which colors are affected. The most common examples are:

  • Red-green blindness.
  • Blue-yellow blindness.
  • Total color blindness, achromatopsia. Equivalent to monochromats.

It’s important to take this into account when designing. A bad pick of colors, that may look very similar to a color blind person, could result in accidents and even death.


Color Models

In order to manipulate color, we must first understand the two ways in which it can be done.

Subtractive

subtractive color model works by absorbing some wavelengths and reflecting others.

Our daily lives are based around this model. For example, when we see a rose, light first reaches the rose and all wavelengths except red are absorbed; the remaining light bounces off and reaches our eyes and then we see the rose as red.

It is used when working with inks, paint, pigments and dyes; and mixing all primary colors produces black.

Additive

On the other hand, an additive color model is based around the concept of mixing light sources.

Instead of bouncing first into a surface, light now travels directly from source into our eyes at a specific wavelength.

Its main field of appliance is in screens (CRT, LCD, etc.), which serve as a light source. In this case, mixing all primary colors results in white.


Color Spaces

In order to represent colors unequivocally, several mathematical models have been proposed.

RYB

Of all color spaces that exists, RYB is perhaps the first (and for some, the only) we learn about.

RYB is the acronym for Red-Yellow-Blue, the primary colors, and we learn it early in our lives, at school. It is a subtractive model.

RGB

RGB, which stands for Red-Green-Blue (its primary colors), is one of the two dominant color models in the world. It is an additive model.

RGB color model

Color are represented by a triplet in which each component or channel is assigned to either red, green and blue. Each channel determines the proportion (in percentage) of each base color. When working with computers, channels are assigned 8-bit value: an int between 0 and 255. Some computer architectures, however, may use a 16-bit values.

There’s one catch, however. RGB isn’t perfect as the output depends on the hardware. One color may not look the same in different monitors or even a different OS. Color management is needed to maintain a similar look across different devices.

In order to add transparency, a fourth channel is used; depending on the position of such channel in the representation, the color could be denoted as ARGB or RGBAA standing for alpha, the transparency. This extra information results in a bigger file size (in the new file size, a fourth of the size would be destined to represent the transparency).

While RGB is the most popular notation in the digital world, its representation of color is kind of uncomfortable. Changing from color X to color Y means knowing how to manipulate the red, green and blue channels to achieve the desired result. If the goal is to change things like only the hue or the saturation, things start to get messy. Two (very similar) models have been proposed to address this issue, both of which are just nomenclature alternatives; which means they still are bound to the RGB system.

RGB: HSB/HSV

The first one (and most popular) is known by two different names, although they both represent the same model.

HSV

Instead of mixing color, it defines any color as:

  • A hue: the shade, tone or tint.
  • A saturation: the intensity or colorfulness (the lower, the grayer).
  • A brightness or value: how much light or dark is it (the lower, the darker).

The hue is defined as a degree –between 0° and 360°– while the saturation and brightness are defined as a percentage.

RGB: HSL

Although it shares similarities with HSB, this model differs on the third component: it’s now lightness.

HSL

While brightness defined how much light/dark it is, the lightness represents the degree of separation between completely black and white (the two poles), with the «best» value in the middle (50%).

CMYK

The other side of the coin of popular color spaces is named after the four channels that compose it: cyan, magenta, yellow and black (the key color).

CMYK color model

While RGB is the flagship of the additive model, CMYK is subtractive’s. A specific color isn’t the result of mixing lights, instead it’s the result of mixing pigments or inks that absorb light. This property suits it for non-digital media such as newspapers, magazines, posters and plenty of others.

The mix of all three base colors yield black. However, such black is really a very dark brown; when desiring a true black, the K channel is used instead.

Notice that cyan is the result of mixing green and blue; magenta, red and blue; and yellow, red and green. On the other hand, mixing yellow and cyan yields green; yellow and magenta, red; and magenta plus cyan yields blue.

Pantone Matching System (PMS)

Maintained by Pantone Inc., PMS is a commercial and standardized color reproduction system.

Colors spaces like RGB are not perfect, they vary depending on the hardware that displays them. The ideal behind this system is to standardize and assure that the outcome of a certain mixture of colors results in the exact same color for every manufacturer.

For those who love fancy names for their colors (Aqua Sky, Mimosa, Tangerine Tango and so many others), this is the right place. Each year, a Color of the Year is selected.

Another popular commercial color space is the Natural Color System (NCS).

sRGB

At the beginning of the digital revolution, hardware was pretty much limited. While nowadays TVs, computer screens and mobile screens can display millions of colors, back in the old day that number was very limited. Because it was a small set inside of a big pool of possibilities, standards arose from the need to ensure compatibility.

sRGB is one of the many different color spaces based on RGB and perhaps the most famous. Other alternatives include AdobeRGB and AppleRGB.

For web design, sRGB is definitely the weapon of choice.

Gamuts


Color Theory

It’s the study of color mixing and the result of specific color combinations.

Color Wheel

The best known representation of the color spectrum is the color wheel. The first one was defined by Isaac Newton in 1666.

The hue in HSV and HSL represents an angle inside a continuous color wheel.

The wheel is also divided into two halves that represent warm and cool colors.

Color Harmony

Part of the study of colors is meant to understand how colors can be combined with each other in order to construct something pleasant as a whole.

Several techniques exist to provide a good color matches.

Complementary

Two colors are complementary if they are located at the opposite side of the color wheel. Their combination results in a high-contrast composition.

Complementary Colors

Analogous

This technique consists of picking three colors that are next to each other.

Analogous Colors

Triadic

As the name implies, three colors are selected; this time, however, they must be equidistant from each other.Triad Colors

Split-Complementary

Continuing with color triplets, this method requires selecting a first color and the next two are the adjacent to the opposite of the first one. In other words, it’s like starting with the analogous technique but changing the middle color with its complement.

Split-Complementary Colors

Tetradic (Rectangle) & Square

Two pairs of complementary colors are selected. In the case of Square, all four colors are equidistant.

Tetrad ColorsSquare Colors

Color Context

Most of the times, picking out colors and combining them results in a jarring visual experience. While in theory the techniques mentioned before are useful to pick colors that match together, in the practice it isn’t that simple. It’s imperative to look at the big picture: how they interact together and what impact does it have on the viewer.

Certain combinations of color, while being a perfect match in the theory, can be tricky for our brains and the result would be optical illusions or headaches.

When using color harmony techniques, it’s recommended to choose one of the colors as the principal and any other either as accentuation or as highlight. Although as a group all of them are harmonious, incorrectly determining their roles can lead to catastrophe. One famous example most people have heard of is the tip that dark background with light text should be used instead of light backgrounds with dark texts. This is generally true, at least for myself, especially if the font is very thin.

Contrast is a key element here. The higher the contrast, the more pleasant and discernible will the colors be between them.

Tints, shades & tones

There are three basic operations to change a particular color.

Mixing a color with white results in a lighter version of that color, something called a tint. Mixing it with black produces a dark version, called a shade.

A tone is instead the result of mixing it with grey.


Swatches

Swatches are a set of colors created by people. Usually, they are constructed using the techniques presented before.

There are plenty of available tools online that facilitate the search of swatches. Some of the most famous are Adobe Kuler, Coolors, Design Seeds, Paletton. There’s also a great webpage, called tint ui, with the color codes of different popular platforms like Google’s Material Design, Windows, iOS, etc.

It’s a common recommendation that any design should use approximately 3 colors; one for general use (covering around 60%), another for contrast (30%) and one last for accentuation (10%, just for key items). This is more of a rule of thumb than an actual design law, so more colors could be added if necessary.

Using tints, shades and tones, is also a great method to create wonderful combinations using just a single hue.


Psychology of color

For the vast segment of society, color is an important element in our daily lives.

We (tend to) dress harmoniously or even according to our mood, we judge food by its color and even countries use them for their flags.

Do note that while most of the times such meanings and feelings with color come from nature, the psychology of color can be biased by culture and our own life experiences.

Emotion & Symbolism

Being a very important characteristic in our daily lives, colors have been given meanings and symbols. Phrases and terms like «I’m feeling blue», «he’s seeing red», «black comedy», «white flag» and plenty of others populate our daily language.

Some of the most common associations are:

  • Red: vitality, energy, danger, power and love.
  • Yellow: happiness, warning and cheerfulness.
  • Green: nature, growth, fertility and greed.
  • Blue: stability, tranquility and cleanliness.
  • Purple: nobility, luxury and extravagance.
  • Orange: joy, enthusiasm and creativity.

And, while technically not colors:

  • White: purity and safety.
  • Black: mystery, grief, death.

Breaking Bad is a great example of this. Characters and moods are linked to a specific color, providing a richer storytelling.

Breaking Bad Colors
Breaking Bad characters’ colors throughout the series. Source: Breaking Bad’s Wiki

In conclusion

This is not, by any means, a replacement for academic literature on the topic. There are in fact hundreds of websites with a far better explanation of the concepts mentioned in this article, which instead is intended as a starting point for anyone interested in the topic.

Here’s a list of useful or interesting material used for the construction of this post, may they be useful to anyone in need:

Leave a Reply