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


Start with a blank white canvas
  • 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