Ready, set, color!

Ferris wheel during a sunny day
Image: Robert Hainer/Adobe Stock

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: 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: 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 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 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:

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s