Color Theory for the Web
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 color 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 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 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.
Understanding hexadecimal colors
Since the Web is based on code, we need a way to code out specific colors in our program. We do that using the hexadecimal counting system."Hexadecimal" may sound like a very intimidating word, but it simply refers to a counting system with 16 digits rather than 10. It is also the numbering system that is used when associating a specific code with a specific color. I will do my best to explain.
"Hex" is the Latin root for 6, and "dec" is the Latin root for 10. We normally count using a decimal system. This means we loop every 10 numbers. For example, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 is how we count in our common decimal system. However, in a hexadecimal counting system, after we get to 9, we have six more letters that we count - A, B, C, D, E, F. So if you combine these, you would count like this: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F (16 digits).
When coding out a color using this system, we can have three different numbers, referring to red, green, and blue. The first number is the brightness of the red value, the second number is the brightness of green, and the third number is the brightness of blue. As you know in the RGB system, we can add these three colors together in different amounts to achieve almost any color within the visual spectrum. 0 is completely pitch black, and as the numbers get higher towards F, that color gets brighter and brighter. I have listed some examples in the image above, but I will break some of them down for you here.
FFF is the code for white, because all three colors are as bright as they can possibly be. In an additive system when all three colors are completely bright and shining on top of each other, they combined to make white.
000 is the code for black, because all three colors are completely turned off and dark.
F00 is the code for red, because the first digit, which is used for red, is F, which means that that color is as bright as it can be where is the other two colors are as dark as they can be since they are both 0.
0F0 is the code for green, because the second digit, which is used for green, is F, which means it is completely bright, while the other two colors are completely dark since they are 0.
Not to make things too confusing, but you can use the same system with 6 digits instead of just 3. Really, all this means is that our 3 numbers for R G and B now have two digits assigned to each of them. So, instead of the first one digit being red, we now assign the first two digits to red. Instead of the second digit being assigned to green, we now assign two digits to it as well. The same goes for the third digit. This allows for a much wider range of color possibilities. I will give a example.
FF 00 00 is the code for red. I have added spaces between the three sets of numbers so that you can see that they work the same way as with the three digit system.
There's an App for that: Hexslider
To help visualize how all these colors and numbers are adding together to create the final result, visit http://prescottfoland.co/hexshifter/. You will see six columns of color - the first two for red, the second two for green, and the final two for blue. You will notice that the first column for each color has a much more dramatic shift on the color. That is because it is in the second decimal place. It would be like changing from 10 to 20 instead of 1 to 2. The second column for each color has a more precise effect as it is the first decimal place. This would be like changing from 1 to 2.
The bottom section of the page shows the final resulting color and the hex code associated with that color. Please note that if you are trying to click the DOWN arrow while a value is 0, there will be no change, since you cannot go lower than 0 or pure black.
Hopefully this number system will become more clear as we start using color in our projects. Don't worry if this doesn't make complete sense. I simply want you to be aware that this is the system that is used for identifying colors. I will not quiz you over any colors that I have not described in this lesson.
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.
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 camouflage it.
You can get away with placing white text on 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.
This would be a case where adding a Drop Shadow would help the text, since the shadow would create MORE contrast between the white text and its background. Be subtle though. Another beginner mistake is to make the shadows really intense, which comes across as very amateur.
Have you ever seen one of these colorblind tests? These 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.