Color Theory

What it is

Per Wikipedia, color theory is:

a body of practical guidance to color mixing and the visual effects of a specific color combination. There are also specific definitions (or categories) of colors based on the color wheel: primary color, secondary color, and tertiary color. Although color theory principles first appeared in the writings of Leone Battista Alberti (c.1435) and the notebooks of Leonardo da Vinci (c. 1490), a tradition of "color theory" began int he 18th century, initially with a partisan controversy around Isaac Newton's theory of color (_Opticks_, 1704) and the nature of primary colors. From there it developed as an independent artistic tradition with only superficial reference to colorimetry and vision science.

Terminology

Hue is the term that denotes an object's color. "Red" is a hue. 

Chroma, sometimes referred to as Intensity, refers to the purity of a color. Pure red (#ff0000) has high chroma, but pink has low chroma because it has white mixed into the red. 

Saturation refers to how a hue appears under particular light conditions. Think about the color of a red ballon on a bright sunny day vs how it appears under moonlight. When the light is less saturated (like when it has to bounce off the moon to get to you) the color isn't as vibrant. 

Value refers to how light or dark a color is - not in the "pink is lighter than red" way but in the "orange is a bright color and purple is a dark one" way. 

Tones are created when taking a pure color and adding grey to it. They tend to look dull or soft, sophisticated, vintage, or elegant. 

Shades are created when black is added to a hue. (This is often misdefined as tints or tones.) All true greys are shades of white. 

Tints are created when white is added to a hue. Very light tints are sometimes called pastels. All true grey are tints of black. 

When choosing colors, make sure that you don't choose with similar chroma or saturation. 

The Color Wheel

Most explanations of color theory start at the color wheel, an abstract illustration of the organization of color hues around a circle. The color wheel shows the relationship between [1], secondary, and sometimes tertiary colors. Which colors display as the primary colors depend on whether the color system is using additive (light based - think "computer monitor") or subtractive (surface-based - think "paints or printouts") color. 

Additive color is generally presented as an RGB (Red Green Blue) color set. Subtractive color is most often presented as CMYK (Cyan, Magenta, Yellow, and Black). The two systems are different because mixing light colors results in different colors than mixing paint colors. When all the colors in light are mixed together, the result is white light. (This is why prisms work.) When all the colors in subtractive color sets such as paints are mixed together, the result is black paint. 

Most design (and writing and spreadsheet etc.) software provides some sort of color tool to help users pick specific colors for presentation. 

It is worth noting that if a computer monitor is not calibrate, there is no guarantee that the color it displays matches the color that a calibrated monitor will display. In other words, what looks like a bright yellow on my screen may not show up on yours at all. It is also worth noting that the vast majority of the population does not calibrate their monitors. Should we calibrate ours? It's a hotly-debated topic, but not one that's reached consensus. 

In hex codes, the color wheel is represented by 2 digits each, red, green, and blue. The higher the hex code, the brighter the color from 00 to FF. So #ff0000 is pure red, #00ff00 is pure green, and #0000ff is pure blue. To create the brightest yellow, red and green must be added together, so #ffff00 is the result. #00ffff is the brightest cyan, and #ff00ff is the brightest purple. 

By adding one to each of the left-hand characters of the three pairs, we raise the color's brightness while lowering its saturation. This prevents a shade from wandering too closely to pitch black or super bright. 

Color schemes

A color scheme is the choice of colors used in design for a project. 

Types of color schemes

• Monochromatic - All colors are based off a single hue. Example: everything is a shade of blue. 
• Analogous - All colors are based off of two or three hues that are next to each other on the color wheel. 
• Complementary - All colors are based off of two hues that are opposite each other on the color wheel. Popular examples are purple and yellow, blue and orange, red and green. 
• Split-Complementary - Similar to Complementary, this uses a color and its opposite, and the color next to it and its opposite. 
• Triadic - This scheme uses three color hues that are spaced equally around the color wheel. 
• Tetradic / Double Complementary - This scheme uses four color hues that are spaced equally around the color wheel. 

For great examples of the color schemes mentioned in the previous list, check out Color Theory: Brief Guide for Designers. 

Color Psychology (or: why do we care?)

Colors influence the mood and behavior of the people observing them. Color psychology studies these behavioral changes and influences. Some evidence suggests that different colors indirectly affect the hypothalamus, which in turn affects the pituitary gland and hormone levels. One experiment showed that people in a room colored with red light overestimated time, and in a green or blue room they underestimated time. In another study, workers said that black boxes were heavier than green boxes. Physically, color can affects us as well. Infant jaundice is treated with blue light. Patients suffering from Parkinson's disease tend to worsen in the presence of red, and improve in the presence of green. However, definitive research on the effects of color on the mind and body have not been established. 

Research provided by Colorcom shows it only takes 90 seconds for people to make subconscious judgement about a product and 62%-90% of that judgement is based on its color.

Our opinions and perceptions of colors change as we age, in part because we change both mentally and physically as we grow. Children like the color yellow pretty much, but as they age, they tend to lose their attraction to it. As we age we tend to like hues of shorter wavelength (blue, green, and purple) over the longer wavelength (red, orange, yellow) colors. 

What do people around the world associate with the colours we see everyday? by Matthew Talebi on oneux.co uses a survey of people from Asia, Europe and North America to show color trends as positive, neutral, or negative for a number of emotions. For example, the color orange is most commonly associated with food or gluttony in Asia, and with enjoyment and happiness in North America.

Color in Design: Influence on Users' Actions, Color Theory for Designers, Part 1: The Meaning of Color, and Responding to Color (pdf) all explore the meaning ascribed to specific colors, however they touches on only a few cases. The Psychology of Color outlines how different brands use different colors and the association between the colors and the brand.

It's notable that the meaning behind colors can differ in significant ways from one culture to the next. For example, in the United States, luck is generally associated with green (good luck clovers, money, etc.) but in China, red is the signal of good luck. The value and intensity of a color changes the associations. Context, as always, is key. 

Another example is an Asian-Pacific association between writing a person's name in red and death. Korean superstition holds that writing a person's name in red ink is essentially wishing them death. Wikipedia's article on color in Chinese culture confirms that this same belief holds in China, with the exception of official seals.

Color Associations provides research into color psychology regarding which words (like Trust or Security) are associated with which colors. 

Tips

Read Hex Color - The Code Side of Color for some tips on making underlines on links more readable, better body copy, and warming or cooling body copy. 

A Simple Web developer's Color Guide by Laura Elizabeth provides an easy process for picking a color set for a website. She recommends using Paletton to figure out an accent color to go with a base color, since Paletton is a color scheme tool. She then walks you through choosing other colors to go in the palette you'll use on your site. 

Color Theory for Designers: How to Create Your Own Color Schemes by Cameron Chapman also provides instruction for picking a website color scheme. 

Additional reading

• Color You Responsible - an A List Apart article on button colors
• 5 Techniques for Fine Tuning UX with Color - Web Designer Depot - discusses using colors as a method of identifying hierarchy, and also using a consistent link color as a design pattern
• Color Theory: Brief Guide for Designers by UX Planet - covers the super-basics such as the color wheel, additive and subtractive colors, and various types of color schemes. 
• Color in Design: Influence on Users' Actions by Tubik Studio - the basics of color psychology. 
• Responding to Color (pdf) by the Cooperative Extension Service of the University of Kentucky - reviews the physical and mental impacts of colors on people of various ages. 
• Color Theory for Designers by Cameron Chapman on Smashing Magazine
  • Part 1 - The Meaning of Color  - reviews the basics of color
  • Part 2 - Understanding Concepts and Color - reviews terminology
  • Part 3 - Creating Your Own Color Palettes - explains color palette types
• Elements of Design: Value and Color by Bonnie Skaalid - explains more about the terminology. 
• Why Color Matters by Jill Morton at ColorCom - provides a survey of important research about color gleaned from a number of psychology sources