Chapter 2
Color Use
Color usage and the understanding of how to successfully diversify the palette of a web site (or really any type of design work) is a key component of in our work, whether it’s a web site or a film. Colors are the way we as humans interpret the world we live in. Certain plants and animals are colored in unique ways to help with their daily routine in nature. Whether it’s just blending in (like a polar bear hunting seal in the arctic), to starkly contrasting (like hornet and wasp “jackets”) to the environment as if to say “Don’t mess with me or you’ll be sorry!” The point is that the first thing we notice when we look at something is its color composition and as a result its importance is easily justified.
In this Chapter we will be focusing on how to use your colors in your designs. It is important to pick up on the relationships colors have to one another and the subconscious effects they have on us when we see them. The points in this chapter are sure to help you get the most out of using appropriate and vibrant color schemes in your design work.
History of “Color Theory”
Many people may not be aware, but the theory of color use (Color Theory) is actually a scientifically designed principle that owes its existence to a set of rules or “theories”. The first variation of this was designed by Sir Isaac Newton as the “color wheel.” By splitting white light into its rainbow component with a prism, he documented the resulting colors and then banded them into a wheel formation so that red ran into violet. This observation may now seem primitive (who hasn’t played with a prism?) to us now, but what it did was lay the ground rules for what was to become the standard understanding of color and its role in design.
Insert 5556f0201.tiff
Figure 2.1 – A prism allows us to split white light into the colors of the rainbow.
After a few centuries and some very minor changes to the idea of the color wheel, a Swiss artist named Johannes Itten created his legacy in his book “The Art of Color.” Written while teaching at the famous art school, Bauhaus, in Weimar, Germany, Itten developed what is now known as the definitive “color theory.” His idea was to break the color wheel into mathematical proportions to establish a visual formula, and then to assess the inherent attributes of each color from psychological, philosophical, and physical standpoints. His formula was so well written that it has become absorbed wholly into modern culture and understanding of art. 50 Years later we still use the terms “primary”, “secondary”, and “tertiary” colors as our basis for color use.
Itten’s color theory is based on red, yellow, and blue as the primary colors. With use of just these three pigments (and a lot of patience) anyone can create any color of the millions and millions our eyes can see. The intermediate colors directly in between of each primary color, are named secondary colors, and in between those we have the tertiary colors. When Itten wrote his book and designed his theory in the 1950’s, his main goal was to educate aspiring artists on how to successfully mix their pigments.
Today art is no longer confined to the realms of pigment selection. We now have computer monitors, digital cameras, movie projectors, televisions, and many other devices that use a slightly different version of Itten’s color theory. Instead of using Red, Yellow, and blue (RYB) as the primary colors, many modern light emitting devices use red, green, and blue or (RGB.) RGB is the standard light formula for primary colors when not dealing with physical
Insert 5556f0202.tiff
Figure 2.2 – Above we have the two color wheels, RYB and RGB. Not the different placements of the yellow and green areas.
pigments. In the print industry, it is different again - In CMYK the secondary colors, Cyan, Magenta, and Yellow (now used as a secondary) form the standard colors used throughout this industry. The K stands for Black.. RGB is still the standard in monitors and television technology, although digital signals are now even further extending the quality of the displayed image. Due to the fact that our eyes actually have RGB receptors specifically designed for breaking our vision down into those base colors it makes more sense to learn the color wheel with the primaries as RGB.
The differences of the two color wheels aren’t just in which three colors are the primaries, but also where these colors are on the wheel in relation to each other. In the wheel designed by Itten for mixing, the yellow area is centered on the 120°mark, whereas in the RGB wheel it is at 60°.The most notable difference as a result is the vastly larger coverage that orange gets in the RYB formula as opposed to the larger coverage the green area gets in RGB. This difference isn’t purely cosmetic either. RGB is designed to best utilize the colors as human eyes see them, not as how they are mixed in the painting world.
As a result of the different coverage areas of the two wheels, each wheel demonstrates different color schemes. As laid out by Itten, color schemes are combinations of colors from the wheel selected for their mathematical proportions to one another.
Insert 5556f0203.tiff
Figure 2.3 – The color schemes are represented above using the RGB scheme. From left to right they are Monotone, Complimentary, Triadic, and Tetradic
Complimentary Colors
Complimentary colors are those that are a direct 180 from each other. Complimentary colors are the most recognizable color relationships. It is important to note the differences of complimentary colors between the two color wheels. On the RGB wheel, Green and Magenta are complimentary. On the RYB wheel, Green and Red are complimentary.
Triadic Colors
Triadic colors are colors that are each an even 120 from each other. RGB and RYB are both respective sets of triadic color. This relationship is helpful to know and understand yet it will not usually be used in most designs for commercial use. It is recommended for advanced designers to tackle as it can be tricky to pull off a working design with this scheme.
Tetradic Colors
Tetradic colors are a set of complimentary colors forming a rectangle on the wheel. Blue, Orange, Cyan, and Red are tetradic colors on the RGB wheel. On the RYB wheel its Blue, Orange, Green, and Red. Again this is an advanced color relationship scheme, although easier to use than triadic. The reasoning for this is that it is very similar to complimentary colors, only it uses two colors on each side of the color wheel instead of one. Tetradic colors should be used sparingly to add subtle highlights to your designs. There are various other color schemes but these above are the main schemes involving 2 or more colors.
Monochromatic Colors
A color scheme concocted using only one color and variations of its hue is known as a monochromatic scheme. Most of us as designers are well aware of the benefits and drawbacks to using monochromatic color schemes. We have both ourselves fallen into the lull of visual monotony during a project or two and I am sure you are aware yourself of many examples of meticulously monochromatic web sites in the past few years. We admit that monochrome can look appealing, but it rarely does a solid job in information architecture. Unless a brand or site idea specifically calls for a monochromatic approach as part of the concept, it is generally a bad idea to limit yourself to only one color. On the flip side It is almost always a good idea to have a colorful diversity in your designs. Having only one color tends to set a permanent and irreversible mood to everything in the site. It’s almost as if everybody spoke in the same tone of voice like Raymond’s brother Robert in CBS’s “Everybody Loves Raymond.” I mean honestly, how boring would that get, and how would anyone ever actually emphasize anything. A colorful emphasis on certain areas of a site is very important to it’s usability as a whole. Without different colors breaking up the space, a design can and will lose certain aspects of functionality in respects to the hierarchy of information displayed within.
Why it’s important
As we mentioned before, color is the true language of the world in visual terms. Better use of language, lends belief to an elevated understanding of the idea that is being communicated. In tune with that, a better articulated use of color in a website will enable a more instantaneous grasp of a viewer’s attention. Color choices, as are words in a sentence, are very important because they all carry with them a plethora of meaning. For every color there are physical effects, psychological effects, philosophical effects, and many more arbitrary ones that aren’t very relevant to our topic.
Insert 5556f0204.tiff
Figure 2.4 – Reds and Pinks are traditionally associated with love and passion. The rose is internationally known for the symbolism of love as its primary color is red.
With this reasoning, there is a certain subjective vibe attributed to certain color schemes. In order to get the most out of a design, a color scheme that makes sense with the idea or focus of the project is necessary. Reds and Pinks aren’t used to adorn Valentines Day candies, cards, balloons and advertisements for nothing. There is a well documented association with these two colors and passion and love. Roses are for the most part red and heavily associated with love and relationships. Due to the association of red and these forms of passion, we know that it would generally be a bad idea to create a hi-end flashy website for a banking client in bright reds and pinks. Not only wouldn’t it make sense for a financial institution, but it would hint at plenty of romantic overtones. That’s not exactly the look and feel that is desirable for that particular type of client.
Whenever beginning a new project, our first step is always to develop the color palette that will be used. Its not a solid, irreversible set of colors in most cases and is intended to be highly changed as the project goes on. It is just very helpful to establish a base set of colors that work well together in the outset so that you aren’t stuck with a mish mash of random colors later on. By adding new colors to the custom color palette of flash, they are available at ease for reference as the project transpires. Doing this efficiently can save considerable time down the line in a project when not doing it effectively means having to sample each color in real time from a source that may not even be open within your flash design window. We will touch more on this later in the chapter when we discuss the use of the color mixer and color swatches panels.
Colors and their meanings
As we mentioned before, each color has a well defined range of deep rooted subconscious meanings. These meanings can significantly aid in the design process by using colors with relevance to the idea of your project. Some colors overlap in their meanings and some stand pretty much on their own. Green and Blue for instance are both heavily found throughout nature and are both cool in their appearance. Green is known to represent a sense of harmony and calmness as is blue. They are both associated with a sense of emotional wellbeing.
While green and blue have some traits in common, black is a color (technically a lack of color in light terms) that shares very few traits with any other color. As it is a polar opposite of white, it represents a range of things from evil to mystery. We aren’t suggesting that every site out there with black in it is going to endow you with evil or mysterious feelings. What we are saying is that when the look and feel of evil or mystery is desired in your website, that black will do a much better job than yellow, a color associated strongly with happiness and goodness. Notice how we didn’t say that white couldn’t handle evil or mystery well. Since black and white are two very unique colors, white being the sum of all colored light, and black being the absence of light, they are very universal and dynamic in their uses for design. As with clothing, black and white on average look good with most other colors if used intelligently. It is however, ok to use white in a design after Labor Day.
Below we’ve assembled a list of some of the most prominent colors and their respective meanings. The list of colors we have chosen is what we deem to be the basic 9 colors that best describe the whole of the visual world. It is nearly the same list of colors that was used by Crayola Corp. in 1903 to create their first set of now world famous crayons. Each of the colors is seen pervasively throughout all cultures of the world in all manners of design and advertisement. From the remote regions of the Arctic and the Inuit peoples to the far southern Aboriginal tribes of Australia, these colors are widely used and incorporated into art and designs. The Inuits carved beautiful Totem poles with vivid use of color, while the Aboriginals are known for their bright body paints and cave art. Our point is that these are the most identifiable colors in the world we live in. They are of course, red, orange, yellow, green, blue, violet, brown, black, and white.
Begin focus point
Red – The color of blood and the color of our heart. Red is deeply associated with power, rage, passion, anger, danger, love, hate, and tenacity. It is said to improve human metabolism and raise blood pressure. As red is a very visible and emotionally charged color, it is commonly used throughout the world as a color of warning or danger. Red is also very closely associated with aspects of fire and heat. Fire engines and fire extinguishers are usually red. In represents the lowest visual limit in the human eyes color perceptibility range. Below red the spectrum enters into infrared which the human eye cannot detect unassisted. Red is very well used in a variety of design ideas and subjects. It is especially effective when used to advertise for the food industry as red is known to increase appetite. Other uses for red range from cars and alcohol to sports and games.
Orange – The color of the sunrise and sunset. Orange is a subtle combination of the strength of red and the goodness and joy of yellow. Unlike red, orange can deliver a feeling of fire without the dangerous overtones. It is said to stimulate activity in the brain by increasing its oxygen supply. Like red, orange has many connections to food. It is the color of the autumn harvest season and the crops of agriculture. Aside from food, orange is very well respected by children and therefore is useful in advertising for toys and video games. When used with blue, its RYB and RGB complimentary color, orange is a very bright and attention grabbing color. We both find this scheme to be one of the boldest and most beautiful color combinations in design and it is very evident in many of our projects. Orange and blue both successfully work with clouds and sky and as a result are very effective in painting a dramatic and vividly spectacular scene.
Yellow – The color of the sun and daylight. Yellow is a very happy and joyful color. It is also a very visible and striking color when displayed in combination with a darker contrasting color. Hornets and wasps have a yellow and black coat to warn against predators. Yellow is used with black to indicate warning and danger in signage all throughout the world. Its also no small wonder that taxicabs are traditionally yellow. Yellow is also noted to be disturbing in high doses. Yellow leisure vehicles can be classified as obnoxious by many and the color can really overload the senses in poorly chosen outfits. As it is a very happy color, yellow does well in promoting summer, vacations, leisure activities, and water craft. It is also commonly seen along side various other contrasting colors in products from electric drills to farming equipment, to waterproof digital cameras. Gold is very heavily understood to have a connection with wealth, although in the modern world where gold is no longer as universal, green has somewhat taken over in its association with wealth and finance.
Green – The color of the earth and its vegetation. Green is a very strong color and in more ways than one considered the opposite of red. It evokes strength, harmony, growth, and abundance. As red is for danger, green is often used in safety situations. Traffic lights the world around signify green as the color of the “all clear.” In video games, the life gauge is often colored green when full and red when depleted. Green isn’t all positive however. It is strongly linked with inexperience, cowardice, greed, and jealousy. In the past several hundred years, as world currency markets migrated from gold to paper, green has taken over as the most heavily associated color in finance and money. This is likely due largely to the influence of US currency on the world market after the peak of the industrial age. As green is a very success and safety oriented color, it is very well put to use with pharmaceutical drugs and biology. Children also respond well to green and it is well used along side orange to promote toys and gaming. Green also lends a strong performance to the sporting industry and gambling.