A Color Theory Primer
Color Theory is one of those subjects that takes years to fully understand. Some people have even turned it into a career. Here I will try to cover some of the basics theories of Color Theory and show you some ideas you should think about when developing designs of your own.
Primary Colors
There are only three primary or true colors. Red, yellow, and blue. Mixtures of these three colors can produce almost any other color (excluding specialty colors like metallics, fluorescents, etc.)
Secondary Colors
A simple 50/50 mix of any two of the three primarys will result in what we call the Secondary colors; Orange, Green, and Purple.
Red + Yellow = Orange
Yellow + Blue = Green
Blue + Red = Purple
Tertiary Colors
The third step away we call the Tertiary colors. These are created by a 50%/50% mix of one Primary color and one of that Secondary Colors that resulted from a mix of that Primary Color. Therefore, there are 6 tertiary colors.
Red + Orange = Vermillion
Red + Purple = Maroon
Blue + Purple = Violet
Blue + Green = Aquamarine
Yellow + Green = Chartreuse
Yellow + Orange = Marigold
The names of the tertiary colors are subjective)
Black & White
Contrary to popular belief. Black and White are not colors. White is a tint. Black is a shade. We do not use them to create new colors, only to lighten and darken existing colors.
Color Schemes
While there are an unlimited number of color combinations you can use, there are 6 basic categories of color schemes that most people will agree usually net in a harmonious color system.
Analogous
Analogous color refers to colors that are adjacent on the color wheel that show only a slight variance, like; yellow, chartreuse, and green.
Complementary
A complimentary color system uses the two colors that are directly opposite each other on the color wheel (red & green or blue and orange)
Split Complementary
A split compliment utilizes one color and the analogous colors of it’s compliment. An example of this would be using Red, Aquamarine and Chartreuse.
Monochromatic
A monochromatic color system uses a single hue that varies in value, by adding various amounts of black and white.
Tetradic
A tetradic color scheme is a combination of four colors equally spaced on the color wheel. Starting with any color and moving 90 degrees along the color wheel you will produce 4 colors that are well matched.
Triadic
Tetradic color schemes use three colors equally spaced on the color wheel. The mos common used triadic color system is the primary colors. But by starting with any color on the wheel and moving 120 degrees to select your other two colors, you are guaranteed a well balanced palette.
Psychology of Color
Color means different things to different people, knowing the culture of your audience will can help you establish how the site will be interpreted by your viewer.
In America, blue is for boys and pink is for girls, but in China, blue is for girls, black is for boys. Green makes people think of money, health, and tranquility, and in Japan yellow means cheap. Pretty much universally, orange and red make most people hungry while blue is an appetite suppressant.
An independent study was done asking thousands of people world wide their reactions to color. The majority of the people surveyed had the following reactions to color (remember, these results are majority rules for the world, not for every specific culture):
Yellow: Happy?Red: Sexy, Powerful, Good-tasting
Blue: Dependable, Favorite Color
Purple: Dignity?Green: Good Luck, Nausea
Orange: Least Favorite Color
Brown: Inexpensive
White: Pure, Deity
Black: Mourning, High Quality, Bad Luck
Silver: High Tech
Gold: Expensive
Designing for the color blind
Most people don’t realize this, but 1 in 12 have a color deficiency (8% of males & .5% of women) The most common form of color blindness is red green color blindness, which is the inability to distinguish between them. This is a good reason to avoid putting red type on a green background. Aside from being hard to read, if you do use this combination, it is likely that 1/12 of you audience will only see a solid color field and not see the text at all.
The higher the contrast between the text and the background the easier it will be for your audience to read. To determine if you have enough contrast between text and background, view your layout in grayscale or make a black and white printout.
Websafe Colors
All of the information above regarding color mixing is great for mixing paints, but now that you are on the computer how does it apply? Your monitor displays RGB color. This means that your monitor’s pixels use a combination or Red, Green, and Blue to create the color spectrum visible on the screen.
If you play with your color sliders you will see that 100% Red and 100% Green actually creates Yellow and 100% Red and 100% Blue creates Pink. This seems a bit contrary to what we have previously discussed, right?
In reality, color is visible to us in two ways, as light, and as a pigment (the reflection of light). While the mixing of pigments results in darker colors, mixing light results lighter colors. Stated another way, White light is a combination of all colors, and black is the absence of light.
Every monitor produces colors differently, every computer changes the way the monitor displays it’s color, and every web browser again changes the way color is displayed. Now, with all this variance how do we guarantee that the specific color of, say, vermillion, that i want on my webpage will look the same on every computer, every monitor, and every web browser? The truthful answer is, you can’t. But, the web community has developed a system call WebSafe Colors that breaks down RGB mixes into 216 uniquely identifiable colors. Based on the hexidecimal system, we can use pairs of 0, 3, 6, 9, C, or F for each of the three RGB colors to identify which color we want to use, and rest knowing that the color variance will be so minimal, it should be nearly unrecognizable to the naked human eye. For example, Orange=FF9900 (Red=FF, Green=99, Blue=00), and to simplify things, since websafe colors are all pairs, in CSS to identify the same Orange we could just write F90.
The only real problem I see with this system is that we are knocking a palette of millions of colors down to 216. This is a very limited color palette.
There are some issues to keep in mind wether using websafe color codes or not. While color codes in html and css will net the same result as an index color coded into a gif image, jpg files use rgb and you may get color shifts if you are trying to match up a solid color in a jpg with a solid color in a gif or in html.