Color Theory

What is so important about Color?

Color is perhaps the most important tool the digital artist or designer has at his or her fingertips. Color has been proven to elicit emotional responses from viewers, so much so that the colors used in different rooms and situations is given much thought. Studies have shown that colors like red can excite us, and colors like blue can calm us. Color is equally important to the commercial designer, the game artist, the fine artist, the web designer, the interface designer, and the list goes on. If it involves a graphic expression of some kind, color is key.

While there are many great resources on Color Theory, here I only wish to cover some of the basics, and offer you some games that may help you to sharpen your knowledge of color theory. Through engaging the mind in thought about color in practical and focused ways, we can improve our understand and ability to use it well. One of the ways to engage color in a practicale way is through the color wheel.

What is the Color Wheel, and what are the Color Triads?

The Color Wheel is an attempt to logically order the main colors of the spectrum so that their relationships with each other are more easily understood. The traditional 12-color color wheel consists of a primary traid, a secondary triad, and tertiary colors. The color wheel below is similar to many, the only difference in this case being that the primary triads and secondary triads of color are larger than the tertiary colors to underscore the difference between the triads.

The primary triad consists of Red, Blue, and Yellow. In the image below, the primary colors are all connected by an equalateral triangle of black lines, demonstrating that they are equally space from each other on the color wheel. The secondary triad are colors are Orange (Red mixed with Yellow), Green (Blue mixed with Yellow), and Purple (Blue mixed with Red). These colors are connected with dashed black lines. The tertiary colors are those colors that can be formed by mixing the colors on either side of them. To see the names of all the colors, including the tertiary colors, roll your mouse over the figure below.

What are complementary and analogous colors?

Complementary colors are colors that are oppositely positioned on the color wheel. Complementary colors generate the highest possible contrast, but can in many cases still be used in the same piece of work. Green and Red are complementary colors. There can even be a visual side-effect of working with complementary colors, where the high contrast can make the art work seem to pulsate or vibrate. This was used to great effect by artists such as Van Gogh.

Analogous colors are colors that sit next to each other on the color wheel. Analogous colors do not have very high contrast and ther is a more calm effect generated by using them. In the color wheel above, Green and Green-Blue are next to each other and could thus be considered analogous colors. In fact, we could include Green, Green-Blue, and Blue and still have a group that is considered analogous.

Hue, Saturation, and Value

Hue, Saturation and Value work together to define every nuance of a color.

Hue is what we normally think of as color – but there is more that influences how a color will look than just the hue. As can be seen in the model of HSV below, hue refers to the different colors we might see on a color wheel, and all of the millions of subtle variations between them. Saturation is the richness or dominance of the hue in any particular color. If you desaturate a photo in Photoshop, you remove all of the color from it, turning it into shades of gray. In the figure below, saturation is highest at the outer edges of the color wheel, and desaturation begins to affect the colors as we move towards the center of the wheel. Value is how dark or light the color is. In the figure below, the value is high at the top, and the values drop off at the bottom of the figure. If we were to keep going, each of the colors would become black. By considering and working with Hue, Saturation, and Value, we can greatly influence how a piece of art or design looks.

Color Schemes

Color schemes are different ways of ordering color based on the positional relationships different colors have on a color wheel. We can use the color wheel to help us see different possible schemes of color for potential use on digital art or designs, landscapes, interiors, characters, whatever we are working on.

Monochromatic Color Scheme

The simplest color scheme is called a Monochromatic color scheme. Such a scheme uses various values (shades) of a single color. It is hard to make a mistake with such a simple color scheme, but these schemes lack the diversity of hues of the other color schemes, and certainly lack in vibrancy.

Analogous Color Scheme

The analogous color scheme uses hamonious colors that are adjacent to one another on the color wheel. The color wheel we use has 12 colors, so we could say that green, green-blue, and blue are analogous colors. However, some color wheels have much more definition, with 24 or more colors represented on the wheel, and so the analogous colors drawn from those color wheels will of course be more analogous. So analogous is a relative term. Analogous color schemes tend to be calming, with low-contrast.

Complementary Color Scheme

A complementary color scheme is high contrast, pitting complementary colors such as red and green against each other to achieve a vibrant effect. Blue and orange, purple and yellow, and other complementary colors achieve an almost vibrating look, which can be intensified or minimized by controlling the amount of saturation in the colors used.

Split-Complimentary Color Scheme

A color scheme that uses a main color as well as two colors on either side of the main color’s complement is considered a split- complementary color scheme. These schemes achieve nearly the same vibrancy of a complementary color scheme with more variety.

Triadic Color Scheme

Any scheme that uses colors in a equalaterial triangle position from one another is a triadic color scheme.

Quadradic Color Scheme

Using colors from the color wheel whose position forms a square or rectangle describes a quadratic or tetradic color scheme. Selecting double complements of Red + Green and Yellow + Purple, for example, qualifies as a quadratic color scheme.