COLOR THEORY
+
MEANING

There’s no disputing the power of color. It helps us identify, sort, and process images faster than we even realize. Additionally, it has the ability to make us have certain thoughts and feelings, whether we want to or not.

Learning and understanding color theory helps us to make more sense of things, and, in turn, allows us to use color in our work to elicit certain reactions, thoughts, and feelings from others.

THE ELECTROMAGNETIC SPECTRUM

Let’s start by looking at a little of the science behind color.

As strange as it might seem, visible light - and by extension, all color - is only a relatively small fraction of what is called the Electromagnetic Spectrum. This spectrum of radiation also includes radio waves, microwaves, infrared, gamma rays, and more. If it makes it any easier to understand, you might think of light as just another type of ‘electromagnetic radiation’.

Visible light is spread along the electromagnetic spectrum in the same order that we visualize a rainbow - red, orange, yellow, green, blue, indigo, violet.

Without getting into it too much, basically what differentiates the types of electromagnetic radiation are the frequency and wavelength of the radiation.

The color red has the longest wavelength, the lowest frequency, and the lowest total energy. Violet has the shortest wavelength, the highest frequency, and the highest total energy. Ultraviolet (UV) rays are just outside the visible light spectrum, and are to blame for sunburns.

MEANING THROUGH ASSOCIATION

Much of how we perceive color meaning is through the association of when and where we see those colors used. This ranges from the simple idea of natural associations to more flexible and abstract ideas of cultural and societal associations.

NATURAL ASSOCIATIONS

The idea of natural association is that a color becomes related to how we experience it in nature.

The simplest and most natural associations we can make are relating the color blue to the sky and water, and the color green to plants and vegetation.

LOGICAL ASSOCIATIONS

Logical associations are usually some logical extension of a natural association.

We associate water with the color blue, and by extension we associate the adjective ‘cool’ with the color blue as well. This is a simple association that seemingly all cultures and societies can agree on.

CULTURAL AND SOCIETAL ASSOCIATIONS

Color associations become trickier once you start relating them to the use of color in specific cultures and societies. The associations are still entirely valid, but you have to keep in mind that someone elsewhere in the world might not make these same sorts of associations.

For instance, the color red is a color of luck in many Eastern cultures, such as China, and is prominently displayed at cultural festivals, whereas the color green is usually seen as the luckiest color in Western cultures, such as the UK and USA.

Another example: the saying “to be blue” means sad or depressed in the US, but in Germany it means to be drunk.

SHADES

Any given color might take on different associations when looking at various shades of that color.

For example, light green might make one think of plant life, while certain shades of dark green might elicit more of an association with money.

AMOUNT OF COLOR

When choosing appropriate colors for a design or brand, it’s important not only to decide on the colors and palettes to include, but also how much of that color to use, and where.

Looking at the following example, it seems obvious that varying amounts of color can create very different viewing experiences.

Other major considerations when deciding on the amount of color are the saturation and brightness levels. Bright, saturated colors are highly energetic, and may create an overwhelming viewing experience to the viewer. They might appreciate the design, but their senses will be overwhelmed to the point where they probably won’t be able to look at it for long. This can be problematic if that bright color is splashed all over a web page, for example.

If you know you want to use a lot of color in a design, it’s usually better to go with a color that isn’t too saturated or bright, unless you intentionally want to create that energetic, probably-short-lived experience.

SHAPES

Like most things in life, context matters, too. Colors have many associations in-and-of themselves, but many more associations can be made by combining colors with shapes and other icons.

The same color displayed in different shapes can send different messages. We’ll look at this in more depth in the Shapes lecture.

What does a yellow circle make you think of?

What about a yellow triangle?

PAIRS AND SCHEMES

Certain color combinations have such strong associations that it’s hard to use those color combinations without a viewer immediately associating them with something else.

What do you think of when you see the combination of black and orange?

What about red and green?

Chances are quite good that you almost immediately made the associations with Halloween and Christmas, respectively.

Or, if you’re anything like me, you might more readily think of Freddy Krueger.

THE COLOR CIRCLE, OR color WHEEL

The color circle is of great use to designers, and can be found in pretty much any software that deals in color. We’ve all seen this before, where the hues are arranged in a circle, usually with white at the center.

The first color circle was attributed to Sir Isaac Newton, who in the mid-1600’s was working with light when he discovered its prismatic nature.

He was the one who decided to split the spectrum into 7 groups - red, orange, yellow, green, blue, indigo, violet - because he wanted them to line up with a musical scale going from D to D (otherwise indigo and violet would surely be consolidated into magenta or purple).

Newton designed the color wheel because he thought that all colors were created using combinations of red light, yellow light, and blue light.

We now think that all colors are created from combinations of red, green, and blue light, but the color wheel maintains significant value to designers, due to its spatial nature, which is especially helpful when designing color schemes.

Not all color wheels present color in the same spatial manner, however. Some have red, blue, and yellow forming an equilateral triangle within the wheel, while others that are more ‘accurate’ (but still imperfect) representations of the light spectrum have red, green, and blue forming an equilateral triangle. The difference isn’t huge, however, so it’s nothing to worry about.

THE PRIMARY COLORS

The primary colors are the three that Newton first asserted were the bases of all other colors: red, yellow, and blue.

While these aren’t technically the bases for all other colors, it’s certainly easy to imagine them being the three stable bases from which all other colors are formed through some combination.

THE SECONDARY COLORS

The theoretical blends of the primary colors, the secondary colors are: orange, green, and purple.

Orange is the blend of red and yellow, green is of yellow and blue, and purple of blue and red.

The secondary colors also form an equilateral triangle on the color wheel, but their triangle is offset from the primary color triangle by 60 degrees.

TERTIARY COLORS

Tertiary colors are formed by combining the primary colors with the secondary colors.

There are six tertiary colors: red-orange, orange-yellow, yellow-green, green-blue, blue-purple (indigo), and purple-red (violet).

ADDITIVE COLORS

The primary, secondary, and tertiary colors are all a bit arbitrary, if we’re being honest.

As previously mentioned, the three most important colors are really red, green, and blue. Why are they the most important, you ask?

Because they are the additive colors. Why are they called that?

Red, green, and blue are called the additive colors because we can make any other color in the visible light spectrum by adjusting the levels of these three colors, in light.

Yellow, for instance, is made by having equal-ish levels of red and green light, with relatively little-to-no blue.

Various hues of cyan (teal, aquamarine, etc) are made by combining green and blue light in varying proportions, with little-to-no red light.

Having equal parts of red, green, and blue creates white or gray, depending on how bright the red, green, and blue lights are. The more we have of red, green, and blue, the brighter the gray until we eventually get white.

RGB

When working in software, such as Adobe Photoshop or Illustrator, it’s common to see colors and light represented with red, green, and blue. The balance of red, green, and blue colors is commonly referred to as RGB (short for red, green, blue).

If you open the Color Picker Tool in Photoshop, for instance, you’ll see the selected color represented by a number of measurements; one of which being the RGB balance.

Each color (red, green, and blue) is measured with values that range from 0-255 for a total of 256 values per color channel. Multiply all of these channels together - 256x256x256 - to get the total possible number of values in an (8-bit) RGB color space: 16,777,216 colors!

We’ll go more into bit-depth elsewhere.

HEXADECIMAL CODE

The RGB balance is also represented in Hexadecimal (Hex) Code. This is a 6-character code preceded by a pound sign, or hashtag, as it’s more commonly known these days.

This character assigns two characters each to represent the red, green, and blue values. The first two characters represent the red value, the middle two characters the green value, and the last two the blue value.

Hexadecimal code contains 16 possible characters. The term itself is a bit of a clue to this: hex- is a prefix related to the number 6, and dec- is a prefix related to the number 10. The 16 characters include the numbers 0 through 9, and the letters A through F. From lowest to highest value, the scale goes:

• 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

As mentioned, red, green, and blue are each represented by two characters. These characters act much in the same way as numbers in the decimal system do. We start with 00, and work our way up. The main difference is that the hexadecimal system goes higher than 9, so we go all the way up to F before rolling over to the next place. For example:

• 00, 01, 02, 03, 04, 05, 06, 07, 08, 09, 0A, 0B, 0C, 0D, 0E, 0F, 10, 11… and so on.

And since we have 16 possible characters for each space value, we have 256 total values per color. We can figure this out by multiplying the variables together. 16x16. We do this because there are 16 possible values (second space) per 16 characters (first space).

In short, the hexadecimal code is perfectly set up to represent all of the values in an 8-bit RGB color space.

Keep in mind that the RGB additive colors only work this way when we are discussing the nature of light. When we’re dealing with physical media, like ink and paint, we need to consider the nature of the subtractive colors.

SUBTRACTIVE COLORS

While subtractive colors aren’t as common as a means to describe color, the concept is important enough to mention. Basically, when we’re dealing with physical media such as ink or paint - especially when the starting point is white paper or canvas - the material you add on top of it is more or less filtering out the reflected (radiated) light.

To start, remember that white is created by having equal parts of all colors, so a white piece of paper is radiating visible light in equal measure.

Cyan ink is effectively filtering out (absorbing) the red spectrum from the white coming off of the paper, leaving more green and blue, creating cyan to our eyes.

In fact, the core subtractive colors - cyan, magenta, and yellow - are the exact opposites of the additive colors.

Cyan is the opposite of red. Magenta is the opposite of green. Yellow is the opposite of blue.

Another way in which the subtractive colors are opposites is that, when they are applied in equal measure, they go toward black instead of white. So when you apply ink to ink, or paint to paint, the result is almost always darker (unless you’re applying white paint, or lightener).

COLOR RELATIONSHIPS

When using colors together to create color schemes, there are ways to gauge how well colors work together, aesthetically.

COLOR BALANCE

This is the balance between hues, regarding how frequently and heavily they are used in a design, compared to other colors.

Does a scheme lean toward red or blue, or another color? Even if a scheme features different colors in equal measure, those colors might skew more towards a certain side of the color wheel.

Color balance is the overall average of colors in a scheme, and where that average lies on the color wheel.

COLOR CONTRAST

This is how different the hues used are, and how much visual contrast they have when used in proximity to one another. Colors that are further apart on the color wheel have higher color contrast.

In the above example, note the lack of color contrast between the two greens, compared to the high color contrast between the middle green and the magenta on the right.

COLOR HARMONY

Color harmony is how colors interact and whether they feel pleasant (cohesive) as a scheme.

Color harmony is highly subjective, but certain combinations of hues lend themselves to more harmony than others. A color scheme with harmony will have good visual interest while also feeling like it has order.

If a color scheme has some sort of equilateral geometric representation on a color wheel, it will almost certainly have color harmony.

You might think of color harmony like a song; it shouldn’t have every instrument or note, but only a select few presented in a pleasant order. Furthermore, not everyone is going to like it, but as long as you like it (and/or your client), then it’s a good harmony.

RELATIVE PERCEPTION

Colors can look and feel very different when used in proximity to certain other colors.

The green boxes in the center are the same shade of green, but due to their proximity to other hues of green, look different. The green box on the left appears as though it’s more yellow than the green box on the right, but it’s just your eyes playing a trick on you.

This isn’t something that you need to worry about very often, if ever, but things like this become viral every now and then when people online get in arguments about what color something is. It’s all relative.

TYPES OF COLOR SCHEMES

There are many general types of color schemes that designers use. Here are a few.

MONOCHROMATIC SCHEME

Contrary to popular belief, monochromatic does not mean grayscale.

(Quick aside: Most of the time when people say ‘black and white’, what they really mean is grayscale. That’s all.)

Monochromatic means any palette that only contains various values of a single color. This makes total sense when you break down the word: ‘mono’ meaning one, and ‘chroma’ meaning color.

Monochromatic palettes might utilize different saturation levels or lightness of any given hue.

Any monochromatic palette will inherently feel like it has perfect balance. There is no struggle to determine the primary color of meaning. Monochromatic palettes also technically have color harmony.

That being said, monochromatic designs will have no color contrast.

ANALOGOUS SCHEME

An analogous palette, like a monochromatic palette, has one central hue. The difference is that analogous palettes also incorporate hues that are adjacent to the primary hue on each side.

For instance, a palette of red-orange, orange, and yellow is a orange-centric analogous palette.

The advantage of the analogous palette is that it has more variety, and thus more color contrast, than a monochromatic palette. The disadvantage is that it won’t have quite the balance that a monochromatic palette does. This becomes increasingly true the further away the hues are from the central hue.

In short, the further away the analogous hues are, the more color contrast it will have, but the less balance it will have, and vice versa.

COMPLEMENTARY SCHEME

In a complementary scheme, the two primary hues are opposite each other on the color circle.

The most common examples of this as it relates to the primary colors are red-green, yellow-purple, and blue-orange.

When considering the visible light spectrum, the complementary schemes are red-cyan, green-magenta, and blue-yellow.

Complementary schemes have the most color contrast of any scheme.

For slightly more variety, one can use analogous colors of the complementary side of the color circle. This somewhat reduces color contrast for the sake of having a more diverse palette.

TRIADIC SCHEME

A triadic scheme is one where your palette consists of colors that form a triangle on the color circle. These might be the primary colors, secondary colors, or some set of tertiary colors.

Due to their geometric positioning on the color circle, most triadic schemes feel rather harmonious.

COLOR MEANINGS?

Below we’ll take a look at a few colors, and what these colors are purported to ‘mean’ in Western culture.

The colors we’ll look at are the primary colors, secondary colors, pink (by popular demand), black, white, and grey.

RED

.

.

.

.

.

Fire, blood, and flowers. These are some of the most common natural associations of the color red. It’s from here that many other associations attach themselves.

• Power

• Importance

• Aggression

• Heat

• Spicy

• Wrong

• Deficit

• Danger

• Warning

• Anger

• Violence

• War

• Revolution

• Passion

• Love

• Lust

• Desire

These meanings are reflected in prominent uses of the color red on fire engines and stop signs, as well as the use of the word in terms like ‘red-light district’. (Take your pick on the associations made with the last one.)

In the US, red is the color of the Republican political party, but also the Democratic Socialists of America. Globally, red has historically been a popular color of political revolutions, especially those of the communist and socialist variety. 🌹

Fun fact: Red is the most common color in national flags, beating out all other colors, including white.

ORANGE

.

.

.

.

.

Oranges, pumpkins, and fall foliage are the most prominent natural associations of the color orange.

While not entirely common, orange is an attention grabbing and positive color.

• Healthy

• Energy

• Extraversion

• Amusement

• Warmth

• Tropical

• Joy

• Autumn

• Harvest

• Halloween

Hunting vests and prison uniforms are a bright red-orange, due to the color contrast this has against blue and green, the most common natural colors. Red and orange are also some of the most visible colors to the human eye, trailing only yellow.

Fun fact: The color orange is named after the fruit. Before the color was widely known as ‘orange’, orange objects would either be called saffron (a yellow-orange) or red.

The idea of ‘red hair’ was adopted before orange was a thing, and apparently no one has cared enough to change it.

YELLOW

.

.

.

.

.

Sunflowers, bumblebees, egg yolks, lemons, and urine: These are the most natural associations of the color yellow, so it’s no wonder this is such a confusing color when it comes to meaning.

Many consider blue to be the most self-conflicted color, but I personally find the meanings associated with yellow to be some of the most dissonant.

• Sunshine

• Light

• Energy

• Electricity

• Freshness

• Warmth

• Joy

• Happiness

• Caution

• Illness

• Fear

• Cowardice

• Madness

Yellow is an extremely reflective color, and is supposedly the most visible. This is why it’s commonly used for road signs, warning signs, school buses, and taxi cabs.

There are also interesting myths about yellow, such as:

• Babies supposedly cry more in yellow rooms.

• Yellow kitchens lead to more domestic disputes.

I think these myths might be based more around the bright and stimulating nature of yellow rather than the hue itself.

GREEN

.

.

.

.

.

Green is the color of life: grass, leaves, and vegetables. Through this, many positive associations are made with the color green:

• Growth

• Earthy

• Ecological (Eco-Friendly)

• New

• Inexperienced

• Youth

• Fertility

• Healing

• Luck

• Good

• Peace

• Positivity

• Progress

• Go

• Nausea

• Envy

• Greed

The term ‘green with envy’ is thought to be a very old saying, but the association of greed with the color green is almost always accompanied by visuals of American money, so the saying probably isn’t really that old.

Fun fact: Although the history is unclear, one of the Celtic fertility gods was covered in green leaves, and is known today as The Green Man. Because of this, Celtic brides would commonly wear green wedding dresses.

The Christian Church later banned the color green due to this association, while simultaneously appropriating the iconography of The Green Man in many churches across Europe, destroying most of the documented history of the pagan god, and leaving us with little more than ancient cave paintings, carvings, and the myths passed down verbally through the generations.

BLUE

.

.

.

.

.

Blue is the color of the sky and large bodies of water. These natural associations make sense of many of the ‘meanings’ behind the color blue.

• Clear

• Cool

• Clean

• Wet

• Deep

• Stability

• Reliability

• Consciousness

• Wisdom

• Truth

• Trustworthiness

• Honesty

• Peace

• Serenity

• Faith

• Heaven

• Strong

• Confident

• Slow

• Calm

• Depression

• Sadness

While many consider the associations of the color blue to be disjointed, I think there’s a logical path from calm to depressed. After all, depressants are drugs that slow you down, and depressed people aren’t usually brimming with energy.

Most of the associations of the color blue are positive, however, which is probably why blue is the most common ‘favorite color’ in the world. And that fact is probably why blue is also the most common color in corporate marketing.

In the US, blue is the color of the Democratic political party.

PURPLE

.

.

.

.

.

Purple is exceedingly rare in nature, which is probably why it has such lofty associations.

• Royalty

• Nobility

• Luxury

• Wealth

• Power

• Intelligence

• Wisdom

• Creativity

• Mystery

• Spirituality

• Supernatural

• Magic

Purple’s scarcity in nature carries through to culture and society, with purple not having any day-to-day associations to speak of, other than Barney and Tinky Winky, of course.

Fun fact: Only two nations have purple on their flag: Dominica and Nicaragua.

pink

.

.

.

.

.

Pink is the color of love, or so they say. Like many other colors, pink’s associations make for interesting juxtapositions.

On one hand, it’s the stereotypical color-of-choice for girls, and by extension can have a somewhat innocent or immature association.

On the other hand, it can also represent sexual energy and passion, associations which are certainly less innocent and more mature in nature.

• Femininity

• Child-Like

• Sweetness

• Gentle-natured

• Love

• Romance

• Sexual Passion

Pastel pinks are usually simple blends of red and white. Deeper, more saturated pinks (like the one used above) are actually shades of magenta, meaning they’re made by blending red and blue.

Fun fact: Baker-Miller Pink, also known as Drunk-Tank Pink (#FF91AF), is a shade of pink that has been used extensively in jails, hospitals, and correctional facilities due to its ability to substantially reduce aggressive behavior… for a time.

Unfortunately, the effect only lasts for 15-30 minutes, on average, when first exposed to the colorful environment. Afterwards, there’s a chance that the same color can actually cause more aggressive behavior as a subconscious negative association to the color.

BLACK

.

.

.

.

.

Black is the color of night, or the absence of light. This simple association carries a lot with it.

• Space

• Depth

• Void

• Mystery

• Unknown

• Fear

• Negativity

• Death

• Grief

• Evil

• Power

• Authority

• Formality

• Elegance

• Materialism

• Wealth

• Profit

Most of black’s associations are related to the mysterious, unknown nature of what lies in the dark. Depending on the individual and context, this can be scary or adventurous and motivating.

WHITE

.

.

.

.

.

The color of snow and milk, white is a color that hinges on the idea of being pure.

• Light

• Heaven

• Faith

• Spirituality

• Perfection

• Purity

• Innocence

• Good

• Positivity

• Safety

• Healthy

• Fresh

• Cool

• New

• Clean

• Simplicity

• Luxury

White is the easiest color to taint or get dirty, so it’s the perfect color for shirts, shoes, or even pants, if you’re hoping to project the image that you’re too good to touch things or do work.

GREY

.

.

.

.

.

Grey is the color of the middle man. It has no inherent association of color, yet it resides between the extremes of black and white.

• Detached

• Indecisiveness

• Compromise

• Neutral

• Stability

• Composure

• Unemotional

• Stoic

• Drab

• Formal

• Dignified

• Maturity

• Old Age

Grey, and by extension silver, are colors that can take on many different feelings, depending on their lightness and tint. Light greys are dynamic and enlightening. Dark greys are mysterious and captivating.

True greys won’t have any saturation, and thus no tint, but if one is to be flexible in the idea of what they consider grey, then greys with a slight tint of color can take on many combined attributes of the colors involved.

Color: Subjective or scientific?

There are still a lot of intangible, subjective aspects to how we experience color, and perhaps there always will be.

Food for thought: Is all color ‘meaning’ through association, or is it possible that there are subconscious, perhaps even unconscious factors at play, too?

The simple fact that we see different colors confirms the idea that our eyes and brain can differentiate between photons of various frequencies and wavelengths.

Isn’t it possible then that those different energies literally affect us in different ways, physically, mentally, and perhaps even spiritually?