Whether you like a lot (or a little) color in your life, its impact as a communication tool is far-reaching. With that in mind, here are a (brief!) background on color theory and some resources to help you use color more effectively.

Color Wheel Review

• Primary color: A color that cannot be created by mixing two or more other colors.
  • Red
  • Yellow
  • Blue

• Secondary color: A color that results from combining two primary colors.
  • Green (blue + yellow)
  • Orange (red + yellow)
  • Purple (red + blue)
• Tertiary color: A color that results from combining a primary color with secondary color. Examples include:
  • Teal (green + blue)
  • Violet (blue + purple)
  • Magenta (red + purple)
  • Amber (yellow + orange)

Color Terms

• Hue: A specific color, i.e., red or cocoa brown
• Shade: Hue plus a percentage of black
• Tone: Hue plus percentage of gray
• Tint: Hue plus a percentage of white
• Saturation: The intensity or purity of a hue (color)
• Value: The lightness or darkness of a hue

Color Models

• RGB: A system of representing the colors that are displayed on computer or television screens. Each parameter (red, green, and blue) defines the intensity of the color as an integer between 0 and 255. (Source: w3schools.com) RGB values are shown as a series of three numbers. Examples:
  • Red: 255, 0, 0 (red=255, green=0, blue=0)
  • Green: 0, 255, 0
  • Blue: 0, 0, 255
  • Black: 0, 0, 0
  • White: 255, 255, 255
• CMYK: A color model using cyan, magenta, yellow, and black that is primarily used in printing. (Ink is usually applied in the order of the acronym letters.) Colors are created using a percentage of each color and are shown as a series of four values. CMYK colors are generally not supported in website coding languages and must be converted to RGB or HEX values (see next item). Examples:
  • Cyan: 100, 0, 0, 0
  • Magenta: 0, 100, 0, 0
  • Yellow: 0, 0, 100, 0
  • Black: 100, 100, 100, 100
  • White: 0, 0, 0, 0
• HEX (hexadecimal colors): A system of inputting colors using a six-digit alphanumeric code and hashtag. HEX values are commonly used to add colors to website text, backgrounds, and elements. Examples:
  • Red: #FF0000
  • Green: #008000
  • Blue: #0000FF
  • Cyan: #00FFFF
  • Magenta: #FF00FF
  • Yellow: #FFFF00
  • Black:  #000000 (all zeros)
  • White:  #FFFFFF
• HSV/HSB:  A model that represents colors based on their hue, saturation, and value (or brightness). The HSV color wheel is depicted as a cone or cylinder.
  • Hue: A number from 0 to 360 degrees representing hues of red, yellow, green, cyan, blue, and magenta.
  • Saturation: Percentage of gray in the color.
  • Value (or brightness): Percentage of the color’s brightness or intensity. Source: ThoughtCo.com website.
  • Examples:
    • Red: 0 [degrees], 100%, 100%
    • Green: 120, 100%, 50%
    • Blue: 240, 100%, 100%
    • Cyan: 180, 100%, 100%
    • Magenta: 300, 100%, 100%
    • Yellow: 60, 100%, 100%

Interactive Color Wheels and Pickers

• The w3schools.com website is a “bible” for website developers that offers a wealth of color information, interactive pickers, converters, and code.
• Color Names Supported by All Browsers: This portion of the w3schools.com site shows the 140 colors that are supported by all browsers. Click a color name or its HEX value to see the background/text color combinations. Click “Shade” to see the background/text color combinations of a single shade.  Click “Mix” to combine two colors.
• Adobe Color CC: Interactive color wheel that shows RGB and HEX colors. An Adobe Creative Cloud subscription is not required for access but one is needed to save themes.
• Some paint manufacturers also include RGB and HEX values in their swatch descriptions. Check out the color family section of the Sherwin-Williams site.
• Popular graphics and imaging software allow users to enter color information as RGB, CMYK, HEX, or HSL/HSB values.

Additional articles on color theory:

• “Color Theory 101: How to Choose the Right Colors for Your Designs” by Bethany Cartwright
• “Color Theory for Designers, Part 1: The Meaning of Color” by Cameron Chapman

Color