colorColor theory is the study of how pure colors relate to each other and theeffect of their combinations. We’ll go over some of the most recognizedcolor relationships, or schemes, along with examples of their use on variouswebsites today.

Developing a color scheme is often the first step indeciding which colors will look best together in a design. In each of thefollowing screenshots, the color palette shows the main colors being usedin the accompanying screenshot, while the pure color hues are marked onthe color wheel to show the relationships between the colors.

Color Primer

Our eyes have three different types of color receptors, which each respond to the red, green and blue colors of light differently. For instance, the color blue stimulates one receptor more than the others and as a result transmits different information to the brain. The way in which different combinations of color affect these different receptors results in the millions of different kinds of color, called hues. These hues can be mapped to a circle (often called a color wheel) in degrees (°), with each 60° marking a different basecolor. Three of these base colors are called primary (red, green, blue), three are called secondary (yellow, cyan, magenta) and the six in between them are called tertiary.

A popular color model in computing is called HSB. It uses hue and two related terms, saturation and brightness, to define and describe colors.

Saturation (0 to 100%) refers to how vibrant a color is compared to its maximum potential. Brightness refers to a color’s lightness (0 to 100%).Pure colors have high brightness and saturation values, making them more vivid. Dark colors have low brightness values, making them blacker. The less saturated a color, the more colorless it appears, until it has no color. As you can see from the screenshot, many colors can be made just from mixing one hue degree with various shades of white, black and gray. Another screenshot demonstrates this for red at 360°.

tint, shade and tone

In discussing color, other terms that describe differences in colors includetint, shade and tone. Tint is the amount of white that a pure color has.Shade is the amount of black it has. Tone is the amount of gray it has. Thescreenshot demonstrates how a color changes based on these properties.

Colors on the Web are understood by the browser as hexadecimal valuesand are typically labeled with the pound sign (#). Each red, green and blueelement of a color is converted from a number (0 to 255) to a set ofcharacters that the computer can understand. At each end of this scale, 0 isrepresented in hexadecimal format as “00,” while 255 is represented by “FF.”The primary colors in their hexadecimal equivalents are #FF0000 (red),

Monochromatic: one hue, varying in saturation and brightness.

Analogous or Blend:hues adjacent to each other on the color wheel.

Complementary: two hues directly opposite each other on the color wheel.

Triadic: three hues equidistant from each other on the color wheel.

Square-Tetradic: four hues equidistant from each other on the color wheel.

Accented: muted colors, with one color high in saturation.

Warm: colors from the top of the color wheel, with hues ranging from 271° to 90°.

Cold:colors from the bottom of the color wheel, with hues ranging from 91° to 270°.

Double-complementary palette:Mint.com uses a double-complementary color scheme to illustrate the effectiveness of its software. The bright-orange button pops out from the screen and attracts the user’s eye.

END