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
