Colors

Hue, Saturation, and Brightness (HSB)

Definition

• Hue: A pure color, with no black or white in it
• Saturation (intensity): How much of the hue is present
• Brightness (value, luminosity, lightness): How bright the hue appears

Visualizing it

• Hue: What color is painted on it?
• Saturation: How thickly was the paint applied?
• Brightness: How much light is illuminating the painting?

Color types

Color Type  Saturation  Brightness
----------  ----------  ----------
Black          Any          0%
White           0%        100%
Gray            0%       1-99%

Vibrant       100%        100%
Soft           50%     75-100%
Subdued    75-100%      30-40%

Pastel      10-25%        100%
Cream          25%      1-100%

Hue           100%         50%   Pure color
Shade         100%       1-49%   Dark hue
Tint          100%     51-100%   Bright hue
Tone        1-100%      1-100%   Washed-out hue

• Lower saturation softens the color
• Higher saturation makes the color deeper

• Lower brightness subdues the color
• Higher brightness makes the color more vibrant
  

Additional terms

• Neutral colors: Black, white, and gray
• Chromatic hues: All colors other than black, white, and gray

• Advancing colors
• Receding colors
  

Color themes

• Monochromatic: Varying the saturation and brightness of a single hue.

• Analogous: Adjacent hues on a 12-color wheel (i.e. primary, secondary, and tertiary colors) (30 degrees apart).
  
• Complementary: Hues on opposite sides of a color wheel (180 degrees apart).
• Split complementary: Replacing one of the opposite hues with the two hues that are adjacent to it (30 degrees in each direction).
• Triadic: Selecting three hues on a color wheel using an equilateral triangle (120 degrees apart).
• Tetradic (double complementary): Two pairs of complementary colors (difficult to harmonize).

Meaning of colors

• The psychological meaning of different colors varies from culture to culture.
  

Color wheels

Visual color wheel

• RGB (red green blue)
• Additive color

• Used for televisions, computer monitors, cameras, scanners, ...
  
• The human eye contains RGB receptors (cones)

• Primary colors: red, green, blue
• Secondary colors: cyan (green + blue), magenta (red + blue), yellow (red + green)

• Complementary colors: red & cyan, green & magenta, blue & yellow
  

Mixing color wheel

• CMY (cyan magenta yellow) (modelled after red-yellow-blue)
• Subtractive color

• Used for mixing pigments
• Magenta is a reddish purple/violet
  

• Cyan pigments absorb Red light
• Magenta pigments absorb Green light
• Yellow pigments absorb Blue light

• Primary colors: cyan, magenta, yellow
  
• Secondary colors: red (magenta + yellow), green (cyan + yellow), blue (cyan + magenta)

• Complementary colors: cyan & red, magenta & green, yellow & blue

• Historically, red, yellow, and blue were considered the primary colors.
• It's more accurate to view cyan, magenta, and yellow as the primary colors.
• Mixing red, yellow, and blue provides only a limited set of colors.

Guidelines

• Use three or four distinct hues, coupled with neutral colors (shades of gray).

• Vary the saturation to create colors that blend together smoothly
• Vary the brightness to create colors that offer contrast

• Monochromatic color schemes put the focus on the content, are minimally distracting, and set a safe, conservative tone.
• Analogous color schemes provide a balanced, soothing tone.
• Complementary color schemes set a dynamic, lively tone; or a subdued tone if the hues are de-saturated.
• Triadic color schemes set a tone that's both lively and harmonious; if the hues are de-saturated, the tone is more subdued.

• Where possible, use web-safe colors for backgrounds of pages and tables (the 216 web-safe colors, or the 22 really-safe colors).

RGB

00 00 00: black
ff ff ff: white

ff 00 00: red
00 ff 00: green
00 00 ff: blue

ff ff 00: yellow
00 ff ff: cyan
ff 00 ff: purple

ff 7f 00: orange