Basics of Web Authoring and Design

Color Theory

Color Theory, at its most basic level, is the interaction of colors in a design through complementation, contrast, and vibrancy.

Complementation

refers to the way we see colors in terms of their relationships with other colors. When using two colors from opposite ends of the color spectrum, people will be lead to consider a design visually appealing by establishing a happy medium the eye can rest in.

Contrast

reduces eyestrain and focuses the user's attention by clearly dividing different elements on a page. The simplest example is the contrast between a background color and text color. General practice is to have a light color as the background and a very dark color for the text. This is one way that color theory is crucial to the usability of your website. Contrast can also draw users' attentions to specific elements of the page. Using a variety of different contrastic colors can focus the user's attention to specific page elements.

Vibrancy

dictates the emotion of your design: brighter colors evoke a more energetic feeling from users (which is particularly useful when you are trying to advertise a product) while darker shades relax the user.

Selecting an Effective Color Scheme

The three commonly accepted structures for an effective color scheme are triadic, compound, and analogous.

Triadic Color Scheme

Composed of three colors on seperate ends of the color spectrum. To create a triadic color scheme: take a color wheel and choose a base color. Then draw an equilateral triange from this point. The three points of the triangle will define what your tri-color scheme is.

Compoind Color Scheme (a.k.a. Split Complimentary)

This color scheme is based on providing a range of complementary colors. Complementary colors are two colors that are chosen from opposite ends of the color spectrum. Complementary colors provide a visual appeal.

Analogous Color Scheme

This color scheme is based upon a careful selection of colors in the same area of the color spectrum. The colors are differentiated by their vibrancy and their contrast when they are compared to each other.

Tools to Help You Choose a Color Scheme

Kuler: A tool developed by Adobe that is aimed at providing an intuitive way of creating a color pallete. The colors can be individually modified, or chosen as the base color, with a few clicks. The site is not extremely easy to use but great for those who are more advanced.

Paletton: This tool is great for beginners. It provides users with a simple and controlled selector and its choice color principles give users a choice of color principles that present a variety of options.

Properties of Color

(CC BY-SA 3.0)

Hue

Hue is one of the main properties of color. According to Dictionary.com , hue is defined as "the property of light by which the color of an object is classified as red, blue, green, or yellow in reference to the spectrum." In other words, hue is synonymous with what we usually call "color names." Different hues have different wavelengths on the color spectrum.

Saturation

Saturation, according to Working With Color, "defines a range from pure color (100%) to gray (0%) at a constant lightness level. A pure color is fully saturated." In simpler terms, it is the color's intensity. It is not about how light or dark a color is, but rather how pure a color is.

Value

According to Art, Design, and Visual Thinking, value "is defined as the relative lightness or darkness of a color." If a color has a high value than it is a bright color and emits more light. If it has a low value, it is a darker color that emits less light. A good trick to see differences in color values is to look at the corresponding greyscale values.

Color Theory

Color Theory, at its most basic level, is the interaction of colors in a design through complementation, contrast, and vibrancy.

Complementation

refers to the way we see colors in terms of their relationships with other colors. When using two colors from opposite ends of the color spectrum, people will be lead to consider a design visually appealing by establishing a happy medium the eye can rest in.

Contrast

reduces eyestrain and focuses the user's attention by clearly dividing different elements on a page. The simplest example is the contrast between a background color and text color. General practice is to have a light color as the background and a very dark color for the text. This is one way that color theory is crucial to the usability of your website. Contrast can also draw users' attentions to specific elements of the page. Using a variety of different contrastic colors can focus the user's attention to specific page elements.

Vibrancy

dictates the emotion of your design: brighter colors evoke a more energetic feeling from users (which is particularly useful when you are trying to advertise a product) while darker shades relax the user.

Selecting an Effective Color Scheme

The three commonly accepted structures for an effective color scheme are triadic, compound, and analogous.

Triadic Color Scheme

Composed of three colors on seperate ends of the color spectrum. To create a triadic color scheme: take a color wheel and choose a base color. Then draw an equilateral triange from this point. The three points of the triangle will define what your tri-color scheme is.

Compound Color Scheme
(a.k.a. Split Complimentary)

This color scheme is based on providing a range of complementary colors. Complementary colors are two colors that are chosen from opposite ends of the color spectrum. Complementary colors provide a visual appeal.

Analogous Color Scheme

(CC 2.5)

This color scheme is based upon a careful selection of colors in the same area of the color spectrum. The colors are differentiated by their vibrancy and their contrast when they are compared to each other.

Tools to Help You Choose a Color Scheme

Kuler: A tool developed by Adobe that is aimed at providing an intuitive way of creating a color pallete. The colors can be individually modified, or chosen as the base color, with a few clicks. The site is not extremely easy to use but great for those who are more advanced.

Paletton: This tool is great for beginners. It provides users with a simple and controlled selector and its choice color principles give users a choice of color principles that present a variety of options.