Design 101: The Power of Color Theory

Welcome back to Design 101. This week is all about color theory! And if you were crazy impressed with what your mind does in regards to the design elements and principles last week, color is going to blow your mind. What we know about how our brain interprets color is amazing. Just like with the gestalt theory, color is all about visual perception. Understanding how your brain sees and interprets colors allows you maximize the effect of your color choices. Visual perception is actually one of the two most basic tools you work with as a designer. The other tool is light. Light is the key to us seeing colors the way we do. But light is a tricky thing. Light is invisible. You can’t see light until it interacts with an object and, even then, all you are seeing is the effect of the light on the object, not the light itself. Based on the effects, or reflection of the light, your visual system and brain are able to deduct the color of the object and the color of the light. All objects reflect light so the information your visual system uses is the length of the light waves and the amount of light reflected.

Just like light is tricky thing, color is also a little mind-bending. Color is all a perception created by your eyes and brain working together. The light wavelengths, as well as the objects, don’t actually possess any color. *brain explodes* So as you look around at the colorful notebook on your desk or flowers outside, the colors you see are all a result of your amazing brain and nothing else.

Since your brain may be all over the place from that mind-blowing fact, we will start with some more basic aspects of color and come back to more about your amazing brain a little later. Let’s start with the color wheel!

 

Welcome back to Design 101. This week is all about color theory! And if you were crazy impressed with what your mind does in regards to the design elements and principles last week, color is going to blow your mind. What we know about how our brain interprets color is amazing. Just like with the gestalt theory, color is all about visual perception. Understanding how your brain sees and interprets colors allows you maximize the effect of your color choices.

 

Color Wheel

Color Dimensions

All color is made up of three dimensions: hue, value, and chroma. All three dimensions contribute to the overall psychological associations we make with the color. Changing one dimension of the color can drastically change the association a viewer will make with that color. Understanding how the dimensions effect a color can be a challenging aspect of color but a very powerful tool for designers. Color choice can have a huge affect on the message of the design.

 

Hue is what differentiates the different colors from one another. It causes us to see a difference between red vs green vs purple. Hue is also thought of to be the emotional content of color. It is the part of color that we use to make meaning associations.

 

Value is the relative lightness or darkness of the color. Darker colors are considered low value while lighter colors are high value. If you want to get scientific, the value of a color is determined by the percentage of light that gets reflected back to your eye. Value is also most important to how we understand what we see.

 

Chroma (also known as intensity or saturation) is the color’s purity. It is the attracting quality of color. Neutral, dull, or grayish colors are low chroma whereas vivid colors are high chroma. Black, white, and gray are achromatic because they have no hue or chroma, only value.

 

Adding achromatic colors to different hues create tints, shades, and tones of the hues. When you add white to a hue, that creates a tint of the original hue. Adding black creates a shade of the original hue and adding grey creates a tone.

 

Traditional Color Wheel

When you think of primary colors, most people say red, yellow, blue. And those are the fundamental hues when it comes to mixing paint. The red/yellow/blue color model creates the basic color wheel that we all know. The secondary colors come from mixing different combinations of those primaries and they are orange, green, and purple. The tertiary colors are the colors between the primary and secondary colors and are red-orange, yellow-orange, yellow-green, blue-green, blue-violet, red-violet. But red, yellow, and blue are no longer the only important primary colors. The primary colors change depending on the medium you are mixing together.

 

RGB color model

If you are mixing colors of light, then the primary colors are red/green/blue or RGB. The RGB model is what your computer and TV use for screen colors and can also be used for literal lights like for stage productions. RGB is an additive color model meaning that when the colors are placed on top of each other the color wavelengths are added together in your eye . Additive mixtures create brighter colors than the parent hues and when all three RGB primaries are mixed together it produces white light.

 

CMYK color model

The secondary colors of the RGB model make up the next color model CMY or cyan, magenta, yellow. The CMY color model is used in printing and painting. In printing, black is also added to the acronym as K. CMY is a subtractive color model meaning that when inks or paints are mixed the mediums are absorbing the light wavelengths so the color seen is the wavelength none of the colors absorb. This results in a darker color. When all three of the CMY primaries are mixed it results in black. To make it even more complicated, there are two types of CMY subtractive mixtures: simple and complex. Simple subtractive mixtures result from mixing transparent inks and paints likes ones that are used in printers, watercolors, and color film photography. Complex subtractive mixtures are the result of opaque paints being mixed together. Since more light is being absorbed by opaque paints it makes the mixing process to achieve neutral colors much more complicated. For the purposes of graphic design, we will stick to talking about the simple subtractive mixtures.

 

NOTE: The RGB color gamut, or range of colors that can be achieved, is larger than that of the CMYK color gamut so not all the colors that you can see on your computer screen can be reproduced by your printer. If you have your document set to CMYK, the Photoshop color picker will alert you when you choose a color outside of the CMYK gamut.

 

HSB, HSV, Lab color models

Some other color models to be aware of are HSB (hue, saturation, brightness) and HSV (hue, saturation, value) which are used by computers (Photoshop uses HSB in the color picker). The Lab color that you see in the Photoshop color picker is a color model that was created to standardize color measurement and is considered to be a device-independent color model because it is based on the human perception of color and describes all the colors that a person with normal vision sees based on how they look. The L is the lightness component and ranges from 0-100 (black - white). The a component is represents the green-red axis and the b component is the blue-yellow axis and they both range from +127 to -128 (blue and green being positive values and red and yellow being negative values). This space is mostly used by color management systems to transform colors from RGB to CMYK.

 

Pantone Colors

The last acronym I want to talk about is important, but also an unfortunate acronym, and that is the Pantone Matching System. Instead of using the acronym, I will just refer to the colors as Pantone colors. The Pantone system is used to match materials with corresponding RGB and CMYK colors. Pantone created this color system to help standardize the color printing system. By using Pantone colors, different manufacturers in different locations can reproduce the same colors without direct contact. This system is used by graphic designers to insure color matching when a design is professionally printed. Very handy!

 

Hex color codes

If you work much in web design or development, you will use hexadecimal color codes. These are 6-digit codes made up of numbers and letters that correspond to specific colors. They are mostly used in HTML & CSS to represent a color for an element on the website. Each 2-digit pair represent one of the three RGB colors.

 

Color Schemes & Sequences

Now that we know the basic colors we can now group the colors together into different color schemes and sequences. There are 2 types of color schemes: those based on the similarity of hues and those based on contrast of hues. Hello again, gestalt! The color schemes based on the similarity of hues are monochromatic and analogous and the color schemes based on the contrast of hues are complementary, near complementary, split complementary, triadic,  and tetradic. All the schemes have base hues but can also include tints, shades, and tones of those hues.

 

Similar Hues

Monochromatic

A monochromatic color scheme is made up of a base hue that is extended using tints, shades, and tones of the hue.

 

Analogous

An analogous color scheme is made up of hues that are adjacent to each other on the color wheel: blue, blue-violet, and violet.

 

Contrasting Hues

Complementary

Complementary color schemes are made up of colors that are opposite each other on the color wheel: red-green, yellow-purple, blue-orange, etc.

 

Near Complementary

Near complementary color schemes are made up of two hues like the complementary scheme, but the second hue is immediately adjacent to the true complement: red and blue-green or yellow-green, yellow and red-violet or blue-violet, blue and red-orange or yellow-orange.

 

Split Complementary (Compound)

Split complementary color schemes are made up of three hues, basically all three hues in the near complementary examples. The second and third hues are the two analogous hues on either side of the first hue’s complement.

 

Triadic

Triadic color schemes are made up of three hues that are equally spaced around the color wheel: red-yellow-blue, orange-green-violet, etc.

 

Tetradic

Tetradic color schemes are made up of four hues equally spaced around the color wheel. This scheme is also known as double complementary or two complementary color pairs.

 

Adobe has a great site that can help you visualize and create color schemes so check out color.adobe.com to start making your own.

 

Color Control

As a designer, there may be times where you don’t have as much or any control over the colors in a design. In those times, knowing the methods of color control helps distribute the colors in a way that is unifying but keeps the visual interest no matter what hues are used. There are three methods to controlling color in a composition:

  • Establish hue, value, or chroma dominance
  • Add/Reduce contrast
  • Repeat similar colors

 

Color Dominance

Using one of the three color dimensions, establish what color will dominate in area over the composition. You can use hue and have the composition consist of mostly blues. If you want to base it on value or chroma, choose to use only colors light in value or vivid in chroma. Establishing dominance lays a great foundation for the rest of the design since any other colors added will be accents and used to draw attention to certain elements.

 

Add/Reduce Contrast

Contrast in color, like contrast in shape and size as mentioned in Part 1, creates variety as well as help balance a composition. A large contrast in hue, value, or chroma between the colors can be overwhelming to a design while not enough contrast isn’t interesting. So depending on the situation, you may have to adjust the hue, value, or chroma of the colors to balance the variety with the unity.

 

Repeat Similar Colors

Once you have the dominant color and have balance in contrast, repeating similar colors across the whole design is the cherry on top. It emphasizes the unity you need for a design yet still creates variety. In general, you only need 2 or 3 colors plus neutrals for your composition. Within those color options you have a myriad of possibilities you can use without losing control over the colors.

 

Bonus Tip...Use Color Sequences

A color sequence can help harmonize two strongly contrasting colors or two colors that seem incompatible. Create a gradation from one color to the other color, though you don’t have to include every color. This gradation gives you your color palette to use and then you can apply the methods listed above. Need an example of a color sequence? Check out the next sunrise and sunset. Color gradation in the wild!

When it comes to using color in designs, the most common problem is having too many contrasting hues, values, and chromas in a design causing it to lack unity. Using the color control methods can help create unity even when it seems hopeless.

 

Color Relationships

Due to conditioning and association, everyone has some sort of psychological response to different colors. These responses differ from culture to culture. And though the meanings of a color may change even within the same culture, the way our brain sees color is all about stabilizing this crazy world we live in. Before we get too far into the mysterious ways our brain interprets color, we will start with some general meanings we associate with different colors. As you read, think of objects that are that color and see if the meanings you associate with the object lines up.

 

Color Meanings

Red: Action, passion, and danger (total coincidence, but as I write this, I am listening to Taylor Swift’s song, Red)

Yellow:  happiness, joy, cowardice

Green: growth, life, environmentalism

Blue: thought, purity, tranquility

Purple: inclusiveness, diversity, transition

Black: mystery, sadness, eroticism

White: purity, innocence, peace

Gray: reliability, intelligence, restraint

 

Cool & Warm Colors

Colors are also split into two temperature categories: cool colors and warm colors. The cool colors contain blue hues and they are violet, blue-violet, blue, blue-green, and green. These colors have shorter light wavelengths so they seem calmer. We also associate blue with water. The warm colors are red, red-orange, orange, yellow-orange, yellow. These colors have longer light wavelengths so they are perceived to be more stimulating. Red is also associated with fire. If you were checking these color groups out on a color wheel, you will have noticed that red-violet and yellow-green weren’t mentioned in either group. That is because they are temperature neutral. They have the characteristics of both warm and cool colors with neither being a dominant characteristic. These colors will appear to be more “cool” or “warm” depending on the colors that surround it in a composition. (See simultaneous contrast below)

The terms cool and warm can also be used to describe each hue within these categories. For example, a cool blue would tend toward the blue-green side of blue, while a warm blue would tend toward the blue-violet side of blue. You can also have a warm yellow tending toward yellow-orange or a cool yellow tending toward yellow-green.

The roles of warm and cool colors in a design goes even farther than just meaning. Warm colors in a design appear to be closer to you, or advancing, and cool colors appear to be farther away, or recede. The idea of advancing and receding colors can help you make an element stand out to a viewer strictly because it is a warm color. Keep in mind, the best results when using advancing and receding colors come from good color control.

 

Color, Light, & Your Brain

As was mentioned in the intro, the relationship between color and light and how our visual system works with it blows my mind. Every time I read about these next few color theory phenomenons that occur between your eyes and your brain, I am more and more amazed at the power of the pink squishy thing in our skull.

 

Color Constancy

If you watch closely through the day, the color of things actually changes quite radically since the amount of illumination has so much control over how we see color. (Remember, what we see is based on reflected light wavelengths back into our eye, so less light means less reflection.) One thing your visual system is good at though is trying to stabilize the world you see so it uses a method we call color constancy to adjust to the changes in illumination through the day. Your brain shifts the reference point your eyes use so that the colors stay relatively stable. But even with your brain stabilizing the color, the shift is still visible if you pay attention. So have a window open while you work one day and take note of the shift in color and what happens to the colors as the light changes. And now, not only are the colors created by your brain, but they are also adjusted by your brain without you realizing it sometimes!!

 

Successive Color (Afterimage)

The phenomenon of successive color occurs when you shift your eyes from staring at a brightly colored shape to a blank neutral space. When you shift your eyes, for a few seconds you will see the same shape that you were staring at, but the color of the shape will be the complement of the original color. This is a side effect of your brain trying to find color constancy and stabilize the colors again.

 

Simultaneous Contrast

Simultaneous contrast occurs when a color is touching or surrounded by another color. Your brain will adjust the colors to make them easier to differentiate from each other. Your brain adjusts the hue, value, and chroma of the surrounded color to create more contrast. One of these adjustments is adding the complement of the surrounding color to the surrounded color to make it warmer or cooler comparatively. In the examples below, the two surrounded squares are the same color even if you don't perceive them to be the same. 

 

 

Vibrating Boundaries

When you have two vivid colors touching, the edge between them will start to vibrate. This is caused by your brain attempting to focus on both colors because neither of them stand out as more dominant.

 

Separated Colors

When colors are not touching, you still need to be able to group similarly colored objects together. Like when you walk into a furniture store and look around, you can pick out all the blue chairs even if they end up not even being close to the same blue color. Your visual system puts them in a gestalt by emphasizing the similarities between the colors. Once the objects are closer together, the brain shifts to simultaneous contrast to figure out if the colors actually match or not.

 

Color Assimilation/Spreading Effect/Von Bezold Effect

In contrast to the simultaneous contrast effect, if the areas of color touching are small dots or thin stripes, the colors start to appear more alike or assimilated. This phenomenon has yet to be completely scientifically explained so we know it happens but are not completely sure why. To combat this effect in a design, just add a black, white, or gray outline to the touching shapes to isolate the colors from each other.  

Pay attention as you design to the effects of these color theory phenomenon. You can use the phenomenons to not only create cool illusions but more importantly to avoid mistakes and problems with your color choice.

 

What have we learned?

There is a lot that goes into color theory. Red, yellow, and blue are not the only set of primary colors. RGB and CMYK are also important for designers to know. Having the ability to control the color usage in a design can unify it no matter what colors are being used. Also our brain does some pretty crazy things to aid in our ability to see and distinguish colors. Ultimately though, we have learned that design is all about that visual perception. And understanding it is the key to creating designs that spread a message effectively. Though for now, deep visual perception discussions have (mostly) ended as we move on to talking about typography next week. Stay tuned!