The fundamentals of understanding color theory

Color theory is both the science and art of color. It explains how humans perceive color; how colors mix, match or clash; the subliminal (and often cultural) messages colors communicate; and the methods used to replicate color.

Via unsplash

So why should you care about color theory as an entrepreneur? Why can’t you just slap some red on your packaging and be done with it? It worked for Coke, right?

Color theory will help you build your brand. And that will help you get more sales. Let’s see how it all works.

Understanding color
–

Color is perception. Our eyes see something (the sky, for example), and data sent from our eyes to our brains tells us it’s a certain color (blue). Objects reflect light in different combinations of wavelengths. Our brains pick up on those wavelength combinations and translate them into the phenomenon we call color.

When you’re strolling down the soft drink aisle scanning the shelves filled with 82 million cans and bottles and trying to find your six-pack of Coke, what do you look for? The scripted logo or that familiar red can?

People decide whether or not they like a product in 90 seconds or less. 90% of that decision is based solely on color. So, a very important part of your branding must focus on color.

RGB: the additive color mixing model

Additive color mixing. If you (like me) have a hard time wrapping your head around how red and green mix together to make yellow, watch this YouTube video.

Humans see colors in light waves. Mixing light—or the additive color mixing model—allows you to create colors by mixing red, green and blue light sources of various intensities. The more light you add, the brighter the color mix becomes. If you mix all three colors of light, you get pure, white light.

TVs, screens and projectors use red, green and blue (RGB) as their primary colors, and then mix them together to create other colors.

Why should you care?

Let’s say you have a very distinct brand with a bright yellow logo. If you post the logo on Facebook, Twitter or your website and don’t use the correct color process, your logo will appear muddy instead of that bright yellow. That’s why, when working with files for any screen, use RGB, not CMYK.

CMYK: the subtractive color mixing model

Any color you see on a physical surface (paper, signage, packaging, etc.) uses the subtractive color mixing model. Most people are more familiar with this color model because it’s what we learned in kindergarten when mixing finger paints. In this case, “subtractive” simply refers to the fact that you subtract the light from the paper by adding more color.

Subtractive color mixing is pretty close to the paint mixing we did in grade school. This video does a great job visualizing the “subtractive” part of it.

Traditionally, the primary colors used in subtractive process were red, yellow and blue, as these were the colors painters mixed to get all other hues. As color printing emerged, they were subsequently replaced with cyan, magenta, yellow and key/black (CMYK), as this color combo enables printers to produce a wider variety of colors on paper.

Why should you care?

You’ve decided to print a full-color brochure. If you’re investing all that money into your marketing (printing ain’t cheap!), you expect your printer is going to get the colors right.

Since printing uses the subtractive color mixing method, getting accurate color reproduction can only be achieved by using CMYK. Using RGB will not only result in inaccurate color, but a big bill from your printer when you’re forced to ask them to reprint your entire run.

The color wheel
–

I don’t know about you, but when I was a kid, the best part about going back to school in the fall was getting that new, pristine 64-count box of Crayola crayons. The possibilities seemed endless. Until I’d inevitably lose the black crayon.

Understanding the color wheel and color harmonies (what works, what doesn’t and how color communicates) is just as exciting as that new box of crayons. No really.

Being able to understand the terms and processes that go along with color will help you knowledgeably communicate your vision with your designer, printer, or even (maybe) an Apple Store Genius.

Color wheel basics

The first color wheel was designed by Sir Isaac Newton in 1666 so it absolutely predates your introduction to it in kindergarten. Artists and designers still use it to develop color harmonies, mixing and palettes.

The color wheel consists of three primary colors (red, yellow, blue), three secondary colors (colors created when primary colors are mixed: green, orange, purple) and six tertiary colors (colors made from primary and secondary colors, such as blue-green or red-violet).

Draw a line through the center of the wheel, and you’ll separate the warm colors (reds, oranges, yellows) from cool colors (blues, greens, purples).

Warm colors are generally associated with energy, brightness, and action, whereas cool colors are often identified with calm, peace, and serenity.

When you recognize that color has a temperature, you can understand how choosing all warm or all cool colors in a logo or on your website can impact your message.

Hue, shade, tint and tone

Let’s go back to that 64-pack of crayons from our first day of school. (Remember “raw umber”? What is an umber anyway, and is it actually better raw than cooked?) Anyway, you might be wondering, how we got from the twelve colors on our original color wheel to all those crayons? That’s where tints, shades, and tones come in.

Simply put, tints, tones and shades are variations of hues, or colors, on the color wheel. A tint is a hue to which white has been added. For example, red + white = pink. A shade is a hue to which black has been added. For example, red + black = burgundy. Finally, a tone is a color to which black and white (or grey) have been added. This darkens the original hue while making the color appear more subtle and less intense.

Complementary colors

Because there’s a sharp contrast between the two colors, they can really make imagery pop, but overusing them can get tiresome. Think any shopping mall in December. That being said, using a complementary color scheme in your business marketing offers sharp contrast and clear differentiation between images.

Analogous colors

Analogous colors sit next to one another on the color wheel—red, orange and yellow, for example. When creating an analogous color scheme, one color will dominate, one will support and another will accent. In business, analogous color schemes are not only pleasing to the eye, but can effectively instruct the consumer where and how to take action.

The Tostitos website uses an analogous color scheme. Notice the bright orange navigation bar draws the eye to explore the site, and accent-colored links at the bottom direct hungry consumers with the munchies to “Buy Online.”

Triadic colors

Triadic colors are evenly spaced around the color wheel and tend to be very bright and dynamic.

Using a triadic color scheme in your marketing creates visual contrast and harmony simultaneously, making each item stand out while making the overall image pop.

Burger King uses this color scheme quite successfully. Hey, is it lunchtime yet?

Not only can knowledge of color theory guide you in your own marketing, it can also help you better understand what your competition is doing.

Page de site web page réalisée par mute_work pour Mahony’s Lawyers

Page de site web réalisée par Mila Jones Cann

Page de site web réalisée par MercClass pour Glapion Law Firm

In a side-by-side comparison of three law firm web pages, you’ll notice a variety of analogous color schemes. Blue is generally associated with dependability, brown with masculinity, and yellow with competence and happiness. All of these are positive associations in a field that stereotypically has negative connotations, such as dishonesty or aggression.

Making your brand stand out and appeal to your target, plus understanding that poor colors can mean poor sales—that’s why you should care about color theory.

Need help understanding color theory or have questions? Let us know in the comments below!

—

This article was originally written by Peter Vukovic and published in 2012. The current version has been updated with new information and examples.

The author

At age 7, after penning her critically acclaimed autobiography, Kris discovered the satisfaction derived from crafting well-written prose. A career emerged. When she isn’t running 5Ks or imagining (aka, deluding herself) that George Clooney is secretly in love with her, she’s exploring new ways to make a kajillion dollars as a freelance writer. Apparently, posting to Facebook every day, all day long is not as lucrative as one might think.

This was a decent essay on color, but a little light (pun not intended) on the physics. The term “wavelength” is dangling – wavelength of what?

I will give a good introduction:

Like the fundmental force of gravity, there is also the fundamental force of electromgnetism, which folks of the modern age take advantage of with anything that gets powered from an electrical outlet. An aspect of this electromagnetic force is it can travel a a wave though space, in a similar way that a water wave travels in a body of water – called, appropriately, an eletromagnetic wave.

An electromagentic wave travels at the speed of light and has a certain wavelength and a corresponding frequency, ehich are inversely related. If the wavelength is high enough – which is the same as saying the frequency is low enough – then this wave can be use to carry radio signal (e.g., between 88-108 MHz, FM radio), but it the wavelength is a lot smaller, a little under a millionth of a meter, then the electromagnetic wave is something that can be picked up the cells in the retina the human eye, and hence is called visible light. (NOTE: any mention of “human” could be made to a lot of other animals.)

The human eye is not limited to detecting a single wavelength of visible light, but rather a range of wavelengths. The relative intensity of the various wavelengths within this visible range (mathematically, there would be an infinite number of wavelengths, just as there are infinite number of real numbers between the whole numbers 0 & 1) as picked up by the eye is called the visible spctrum, and it can be depicted as a smooth graph across the wavelengths. To make sense of the variability of any particular spectrum, the human eye & brain map out any given spectrum into a 3-dimensional space, and such that these 3 independent dimensions correspond to certain wavelengths within visible light, and the wavelengths that are pure within this mapping correspond to what we call the red. green & blue (RGB) colors, which are called the primary colors. (The reason that they correspond to these colors is that the light detectors, called rods, in the retina have maximum excitation for these wavelengths, and less excitation for other wavelengths.) So in essence, what “color” is is simply a concept that is based on the variability of the wavelength of visible light.

But the wavelengths for red, green & blue are only 3 distinct values. There are many other (again, an infinite number) wavelengths that exist, and indeed, this is what is seen in nature’s wonderful gift on a sunny yet rainy late afternoon (or early morning) day – the rainbow. These other colors are also processed by retina & brain, but are assigned a non-pure mapping, so that there is more than just one of the components of RGB in the color mapping. Light that is of a single wavelength is called a spectral color, and all visible light is made up of some combination of all these spectral colors at some relative intensity. The key point about human perception of color is that as far as the brain is concerned, the net color is some point in 3-D (i.e., 3 dimensions, just like physical space) space of RGB. (Actually, the brain can use almost any combination of any 3 wavelengths as the mapping reference, but since the retina is tuned into RGB, it is best to just use that mapping.)

So when humans wanted to generate artificial color (i.e., as opposed to what nature shows), they figured out that the way to do this was to look for pigments in the general colors of red, blue & yellow and then appropriately mix them up to get a full range of color, as this allowed for the best range. Further improvements led to the optimal set of 3 colors, which we know a magenta, cyan & yellow (MCY) (with magenta & cyan being considered as a form of red & blue, respectively). However, this was the color generation using pigments; an inverse way of color generation involved using translucent sheets in front of white light, with the best set of 3 colors being the RGB that just happening to match the primary colors that the retina & brain conceive of as being pure in the 3-D mapping! And as it turns out, the MCY colors correspond to the 3 combinations of the 3 primary RGB colors taken 2 at a time, which makes sense as pigments involve attenuating colors – the magneta, yellow & cyan pigments attenuate green, blue & red light, repectively.

So finally, the technology of color television (and by extension, the color computer screen) is the reproduction of light meant to stinulate the retina for the brain to conceive of a certain net spectrum of wavelengths. And since the retina is tuned to the RGB color set, it is no wonder that color generation technology simply reproduces the wavelengths of only these colors; this was wonderfully seen in the early Sony Trinitron color TV, where someone could get close to the screen and see all the little RGB rectangles that when viewed form afar looked like a natural scene. Of course, that technology was analog, and in today’s digital realm, the RGB intensities are realized as a set of 3 natural numbers, with each number being a byte value (i.e., from 0 to 255), and the net color thus a 3-byte number that is a 6-digit hexadecimal number that every digital graphical designer knows about.

Paul Klee’s Theory of Art is a great read ! The artist experimented with colors a lot in his work and his writing is insightful.
Even if reading isn’t your cup of tea, take a look at his paintings, you’ll sure find inspiration !