Design Template by Anonymous

Introduction

What is Color Theory?

Color theory is essentially the study of the rules and guidelines of designing with colors. By fully understanding color theory one can begin to create and use color effectively allowing them to design more useful and effective web sites. Color theory encompasses a number of key properties which need to be understood by designers and will be discussed later on this page. Another important aspect of color theory is the concept of color schemes or groupings of compatible colors which can be used to create effective designs. Color theory also covers the emotional and psychological aspects of colors and how to use these to the benefit of the designer. The human eye can see millions of different colors so there are a lot of ways in which color can be used effectively.

The Color Wheel

The Color Wheel is a common way of organizing colors. It works by arranging the colors in a 360-degree wheel with similar colors closer together and dissimilar colors farther apart.

Primary Colors

The three primary colors are red, blue, and yellow and make up the basis of the color wheel.

Secondary Colors

Secondary colors consist of green, purple, and orange and made from combining two primary colors together. They make up an important part of the color wheel.

Tertiary Colors

Tertiary Colors are made from combining a secondary color and a primary color. Further sub-color combinations and layers can be made by combining the number of various tertiary colors on the color wheel.

Important Color Properties

Hue

Hue refers to the “pure color” or shade of a color. Essentially, hue is the attribute by virtue of a color. Examples of hues are green, orange, red, blue, and pretty much any color one can think of.

Picture of Colors with various hues — Color A has a green hue, color B has an orange hue, and color C has a yellow hue.

Saturation

Saturation refers to the intensity of a color or clarity of a color. It can also be thought of as the level of depth of a color. Colors that are highly saturated appear more vivid whereas colors that are not as saturated appear duller. Example colors could include deep green, bright green, or dull green.

Brightness

Brightness refers to how dark or light a color is. Colors that are not as bright appear darker whereas colors that are brighter appear lighter. Brightness differs from saturation as saturation is more concerned about the vividness or strength of the hue whereas brightness is more concerned with a white to black color scale.

Picture of a brightness gradient. — Brightness is more concerned about the relative lightness and darkness of a color.

Warm and Cool Colors

Warm colors are associated with creating a visual sensation of warmth. Examples of warm colors include reds, oranges, and yellows. Cool colors are associated with creating a visual sensation of coolness. Examples of cool colors include blues, purples, and darker greens. When warm or cool colors are used in combination it is said they comprise to be a warm or cool color scheme. Gray and white are typically very neutral colors and do not have any major impact on warmth or coolness.

Example of a Warm Color Scheme:

Picture of a warm color scheme. — Reds, yellows, and oranges are all colors used in warm color schemes.

Example of a Cool Color Scheme:

Picture of a cool color scheme. — Darker greens, blues, and purples are all colors used in cool color schemes.

Contrast

Contrast is essentially the use of different colors to create differentiation on a web page. Colors that oppose each other in the color wheel have the highest contrast, as they are most different from each other, where colors that are adjacent to each other are not as contrasted.