Web Design

 Lynx Users:Press Return (Enter) to skip the Menu below and jump down to start of page info

Design Theory:
Classic Graphic Design Theory Elements of Design: Value & Color

Site Design

Page Design

MultiMedia

Teacher Resources

Table of Contents

Home Page


Copyright © 1999 by Bonnie Skaalid

Classic Graphic Design Theory
Elements of Design:Value & Color

Value

Color

Properties of Color:

Optical Color Mixing

Color Space

Color Schemes:

Color Discord

Value 

Value refers to the relative lightness or darkness of a certain area. Value can be used for emphasis. Variations in value are used to create a focal point for the design of a picture. A light figure on a dark background will be immediately recognized as the center of attention, similarly for a dark figure on a mostly white background. Gradations of value are also used to create the illusion of depth. Areas of light and dark can give a three-dimensional impression, such as when shading areas of a person's face. 
top

Marguerite Smith drawing-value

Drawing by Marguerite Smith, Saskatoon


Color 

Color occurs when light in different wavelengths strikes our eyes. Objects have no color of their own, only the ability to reflect a certain wavelength of light back to our eyes. As you know, color can vary in differing circumstances. For example, grass can appear gray in the morning or evening or bright green at noon. Colors appear different depending on whether you view them under incandescent, florescent or natural sunlight. Colors also change according to their surroundings. You can see this by looking at the color squares below - the reddish outline box is the same color in all the examples.

pic: color boxes

Properties of Color 

Hue 

Hue refers to the color itself. Each different hue is a different reflected wavelength of light. White light broken in a prism has seven hues: red, orange, yellow, green, blue, indigo and violet. White light occurs when all the wavelengths are reflected back to your eye, and black light occurs when no light is reflected to your eye. This is the physics of light.

pic: Color Wheel

When it comes to using color in art, things get quite messy. Looking at the color wheel above, when using color pigments, the three primary colors used are yellow, blue and red. These three colors are blended together to produce other colors, called secondary colors, such as green, orange and purple. Mix enough colors together, and you get black. Pretty strange, eh?

pic:RGB colors
pic:CYMK
Computer Colors

Computer colors are produced by combining the three colors of red, green and blue together. Believe it or not, you can get yellow by combining these colors (I've never been able to figure out why, but you can!)

Printer Colors

Things get even dicier on computers when you go to print out these colors. Printing uses the CYMK convention which takes cyan (light blue), yellow, magenta (pinky red) and black inks and tries to recreate the color that your computer created with red, green and blue light. 

top

Color Value 

Color value refers to the lightness or darkness of the hue. Adding white to a hue produces a high-value color, often called a tint. Adding black to a hue produces a low-value color, often called a shade. 

Intensity 

Intensity, also called chroma or saturation, refers to the brightness of a color. A color is at full intensity when not mixed with black or white - a pure hue. You can change the intensity of a color, making it duller or more neutral by adding gray to the color. You can also change the intensity of a color by adding its complement (this is the color found directly opposite on the traditional color wheel). When changing colors this way, the color produced is called a tone.

When you mix complementary colors together, you produce a dull tone. However, when you put complementary colors side by side, you increase their intensity. This effect is called simultaneous contrast - each color simultaneously intensifies the visual brightness of the other color. 

Below are some examples of how this works, using a program called Metacreations painter. As you can see, you choose a hue from the outer ring. Inside the triangle, you can vary the saturation of the hue (amount of color), the tint or the shade.

pic:Saturation

pic:tone

Above: choosing a pure color of blue (hue) by moving the cursor all the way to the right.

Above: choosing a less saturated color of blue (tone) by moving the cursor toward the center of the triangle.

pic:tint

pic: shade

Above: adding white (tint) to the color by moving the cursor to the top part of the triangle

Above: adding black (shade) to the color by moving the cursor toward the bottom part of the triangle

top

Optical Color Mixing 

When small dots of color are placed adjacent to each other, your eye will combine the colors into a blended color. This is the principle used when printing color in magazines. Dots of cyan, magenta, yellow and black are distributed in a pattern on the paper, and depending on the quantity of a certain dot, you will see a specific color on the page. Paul Signac used a technique called pointillism that involved creating art using the combination of dots to form images.  View Port St. Tropez.

Color and Space 

Certain colors have an advancing or receding quality, based on how our eye has to adjust to see them. Warm colors such as red, orange or yellow seem to come forward while cool colors such as blue and green seem to recede slightly. In the atmosphere, distant objects appear bluish and the further away an object appears, the less colorful and distinct it becomes. Artists use this to give an illusion of depth, by using more neutral and grayish colors in the background. 

Color Schemes

Monochromatic 

pic:MonochromaticThis color scheme involves the use of only one hue. The hue can vary in value, and black or white may be added to create various shades or tints.


Analogous 

pic:AnalogousThis color scheme involves the use of colors that are located adjacent on the color wheel. The hues may vary in value. The color scheme for this site is analogous, with the colors varying only slightly from each other.


Complementary 

pic:ComplementaryThis color scheme involves the use of colors that are located opposite on the color wheel such as red and green, yellow and purple, or orange and blue. Complementary colors produce a very exciting, dynamic pattern. 


Triadic 

pic:triadicThis color scheme involves the use of colors that are equally spaced on the color wheel. The primary colors of yellow, red and green could be used together in a color scheme to produce a lively result. 

 

 

Check out Color Picker web software. This application will allow you to choose a color and then display its complementary or triadic match. Hint: read the instructions first, then click on the link which says "Open Color Picker 2". Color Picker 2.
top 

Color Discord

pic:discordantWhile monochromatic, analogous, complementary or triadic color schemes are considered to be harmonious, there are some color schemes considered dissonant. Discordant colors are visually disturbing - we say they clash. Colors that are widely separated on the color wheel (but not complementary or triadic) are considered to be discordant. Discordant colors can be eye-catching and are often used for attention-getting devices in advertising.

Some sources for information about color:

The Munsell System of Color Notation
Ian Kelly's Home Page about color
Color Theory Page
top

Elements & Principles of Design: [Line] [Shape] [Texture] [Value & Color] [Space] [Movement] [Balance] [Emphasis] [Unity]

Main Level: [Home Page] [Design Theory][Site Design] [Page Design] [MultiMedia] [Teacher Resources] [Table of Contents]