This document discusses color theory and color schemes. It begins by explaining how color receptors in the eye perceive different colors and how colors can be mapped to a color wheel. It then defines terms like hue, saturation, brightness, tint, shade, and tone used to describe colors. Finally, it outlines several common color schemes - monochromatic, analogous, complementary, triadic, square-tetradic, accented, warm, and cold - and provides an example of a double-complementary palette used on a website.

1. color
Color theory is the study of how pure colors relate to each other and the
effect of their combinations. We’ll go over some of the most recognized
color relationships, or schemes, along with examples of their use on various
websites today.
Developing a color scheme is often the first step in
deciding which colors will look best together in a design. In each of the
following screenshots, the color palette shows the main colors being used
in the accompanying screenshot, while the pure color hues are marked on
the color wheel to show the relationships between the colors.

2. 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 base
color. 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°.

3. tint, shade and tone
In discussing color, other terms that describe differences in colors include
tint, 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. The
screenshot demonstrates how a color changes based on these properties.
Colors on the Web are understood by the browser as hexadecimal values
and are typically labeled with the pound sign (#). Each red, green and blue
element of a color is converted from a number (0 to 255) to a set of
characters that the computer can understand. At each end of this scale, 0 is
represented in hexadecimal format as “00,” while 255 is represented by “FF.”
The primary colors in their hexadecimal equivalents are #FF0000 (red),

14. Monochromatic:
one hue, varying in saturation and brightness.

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

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

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

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

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

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

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

22. 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.

33. END