Color Theory Basics
Understanding color & avoiding some common mistakes
In this lesson, we will be learning some of the most valuable and fundamental qualities of color theory. Since we learn our colors at such an early age, it may seem like a very juvenile topic, but really, there are some very sophisticated rules that we can follow to make a beautiful layout or image.
Breaking Down Color
PBS OffBook: The Effect of Color
PBS OffBook is a collection of amazing videos about modern art and design. One of their particular episodes is on color theory. Let's start off by watching this video just to get a general overview of color. I guarantee this video will not be boring and is actually very cool. Enjoy.
Understanding the mood and meaning of color.
As mentioned in the video, color can cause us to feel different ways. Blue colors can make us feel more calm while red colors can make us feel more alert. Colors can also be associated with different nationalities, for example red white and blue are deeply tied with American culture, whereas red and white can be associated with the Japanese or Swiss flags.
We also use color in our speech to describe the way people are feeling or behaving. For example we say somebody is "green with envy" or you will say "I'm in the red" if you you are feeling angry or "feeling blue".
It's important to understand these associations when creating your own layout. Be mindful of how your colors are going to make the audience feel.
A former student of Ivy Tech, Charlotte Katelyn, wrote this very entertaining article describing the different personalities of colors. These descriptions aren't meant to be factual and absolute, but rather are more generalizations about the types of feelings we associate with colors.
The Anatomy of Color
Color can be broken down in several ways depending on what the format is, however the two most common formats that we experience on a regular basis are RGB and CMYK. RGB stands for red, green, and blue, while CMYK stands for cyan, magenta, yellow, and key (or black). These two systems behave very differently, so it is good to understand their differences.
RGB is an additive system. We can imagine the system is being made up of three different colored light bulbs - red, green, and blue. The system is called "additive" because as the different colored lights add together, they create more light. For example if you have a red light shining on top of a green light their combined colors will be brighter then if they were by themselves. RGB is used in any sort of electronic display, whether this is your monitor, an old television set, an LCD projector, or an LED billboard. This system adds different amounts of red, green, and blue to create the entire visual color spectrum.
Since we are studying web design, we are mainly going to be using RGB. CMYK is used specifically for print contexts.
Vsauce: This is not Yellow
"This is not yellow" is a very interesting look at the very nature of color. This video can get very heavy, but it is presented in a very fun and interesting way. This video talks specifically about how RGB works on computer screens. Enjoy.
(You can stop the video at 2:17, since he stops talking about color there).
CMYK is a subtractive system. This means when there are more colors added to each other they subtract the amount of light that is reflected. For example if you add all of these colors together they will become very dark, where as if you add all of the RGB colors together, they will become very bright. Since the B is already used in RGB, we use K for black in CMYK. Black is needed as a fourth ink color, since cyan and, magenta, and yellow all added together do not create a pure black. The pure black is added to get a richer black. The CMYK system does not have nearly as wide of a range of color as the RGB system does.
You may sometimes hear CMYK referred to as "process color". This name is to differentiate it from another printing technique known as "Pantone". Pantone is a printing technique in which, rather than using cyan, magenta, yellow, and black in combination, the colors will be premixed. As a result, Pantone can create much truer and deeper colors then CMYK or process color.
If you've ever gone to a hardware store to get a gallon of paint for your wall, you will have witnessed a very similar process to Pantone, in which they have a machine add the exact amounts of various colors and mix them all together to get the color you see on the swatch.
RGB vs CMYK
Something very interesting about these two systems is that the colors can be added in order to achieve colors from the others system. This may sound a little confusing, but as you'll notice in the image above, if you add red and green together, you get yellow, which is a part of the CMYK system. Conversely, if you add yellow and cyan together you get green, which is from the RGB system. Pretty cool, right?
The color wheel is where we get most of our color theory from. It starts with the three primary colors in the center triangle, which are red blue and yellow. Those colors are added together to create the secondary colors, which are orange, purple, and green. Those secondary colors are then added together to create the tertiary colors. From these primary, secondary, and tertiary colors, you can have combinations of colors such as complementary, Triad, and monochrome, color combinations.
If this sounds a little bit confusing, I strongly recommend checking out this amazing resource, Adobe Kuler (https://kuler.adobe.com/). You can witness in real time how these different color combinations interact with each other. You can also see examples of great color palettes. This software makes it incredibly easy to have good color usage, even if you don't know very much about color theory.
Hue Saturation & Value
Often times, it can be rather difficult to describe colors. However, most colors can be broken down by their hue, saturation, and value. Each of these words describe the different aspects of a particular color. I recommend getting in the habit of describing color based on it's hue, saturation, and value. I think you will be able to describe it Keller much more accurately this way.
Hue refers to the actual different colors on a rainbow. For example a hue could be red, orange, blue, or green, but the hue does not describe how vibrant or how light and dark that color is. Hue is measured in degrees referring to the 360 degrees in the color wheel. For example, if you start are the top of the color wheel (0°) and cycle your way clockwise, you will naturally progress through the colors on the wheel until you wind back up at 359°, just before you hit 0° again.
Saturation (aka Chroma / Intensity)
Saturation refers to how vibrant or bold color is. For example an old faded photo from the 1950s could be considered low in saturation, whereas the colors of a McDonald's playground or a child's toy could be considered high in saturation. You can maybe think of this as the amount of dye you are saturating a piece of cloth with. The more dye the cloth gets saturated in, the more vibrant it will become. Saturation can also be referred to as "vibrance".
Value (aka Brightness / Lightness)
Value essentially refers to how light or dark something is. Other words you can use are "brightness" or "lightness". The higher the value, the brighter the color.
Avoid these beginner mistakes when using color
Now on to some basic usage of colors. Having taught design for a few years now, I have noticed many reoccurring mistakes that students make with color. I will list some of the biggest offenders in this section. I have used visual aids to help demonstrate why these mistakes create bad imagery.
Limit your color palette
Just like with typography, it is very important to limit what you use in a layout. If you have too many colors in a single layout, you will end up with something that looks very random and disjointed. The fewer colors you have, the more thematic and unified it will look. The image above is an example of having a tasteful, limited color palette.
Vibrating Borders - Oh, my eyes!!!
Do you notice your eyes playing tricks on you when looking at the above graphic? You can create a strange effect in the eyes when you place two complementary colors with the same value right on top of each other. I remember noticing this effect for the first time when I saw some Christmas wrapping paper when I was 6 or so. The green and blue seemed to be vibrating as I moved the package around. This effect is caused because the brain is constantly trying to compensate for the different amount of light and colors that it sees. When you have to very different colors of the same lightness right next to each other, the brain starts trying to compensate for each of those colors, and creates that weird vibrating border.
This is also related to a phenomenon known as the "afterimage effect" which is caused by "retinal fatique". You may have experienced this effect when wearing a pair of red and blue 3d glasses. You may notice after wearing them for a while and taking them off that each of your eyes percive colors differently. This is due to our brains compensating for the colored filters (red or blue) as an attempt to normalize or balance out the color.
So, long story short, if you don't want to cause your viewers to feel nauseated, avoid placing colors right up next to each other of the same lightness but different hue.
I find that many beginners like to place black or very dark text on top of dark backgrounds. Since one of our main goals as designers is to make things as legible as possible, making this mistake can hurt legibility. I recommend only using black or dark text on very light backgrounds. In a similar way, I recommend placing white or very light text on darker backgrounds.
As you can hopefully see here, adding borders around text does not make it clearer, but rather does the opposite. Any time I add an effect to text, my main goal is to separate it from the background, not blend it in. By adding some sort of effect that is an intermediate between the text and it's background, you are making them blend together.
Adding drop shadow too dark text can cause a similarly bad effect. Like I mentioned above, I would only add drop shadow if it would increase the contrast between text and its background. In this case, the drop shadow only blurs the text into the background. You can see this especially clearly on the dark gray background. This may look obvious, but many people make this mistake.
Here is another very similar case. Think of your layout in terms of its value. For example if we were to make this photo black and white, the text would be very difficult, even more difficult than it is now, to read on this background image. If you are placing text on a photo, be sure to place it in an area where it will be highly contrasted, and where it will not have very much detail behind it that would potentially camouflag it.
You can get away with placing white text I'm just about any background image. White seems to standout very much, and you will notice this technique being used very frequently in film and in advertising. Although this technique is not 100% foolproof, white is probably the safest color to use on text when placing it on a photo background.
Have you ever seen one of these colorblind tests? Please use complementary colors of similar values and saturation to determine whether or not someone is colorblind. If you are not colorblind, you should notice a outline of a square in a circle among those dots. It is very important to be considerate of colorblind people when creating your web layouts. Accessibility, as it is called, refers to making your site as easy to use for as big of an audience as possible. Photoshop has a tool that allows you to view your layout as though you were colorblind. If you find that some images or words get lost while in this colorblind mode, you may need to rethink your use of colors.
As you probably noticed from this lesson, color can be quite complicated, much more than the color that we learned at a young age. In fact, some people spend years studying color theory and mastering it. Some people even make six-figure salaries as colorists for film studios, fashion, or interior design. The best way to understand color is simply to practice it and to be aware of some of these basic principles.