Color Theory

The Color Wheel

A color circle, based on red, yellow and blue, is traditional in the field of art. Sir Isaac Newton developed the first circular diagram of colors in 1666. Since then scientists and artists have studied and designed numerous variations of this concept.

Primary colors – are the 3 pigment colors that can not be mixed or formed by any combination of other colors. All other colors are derived from these 3 hues.


red, yellow, blue

Secondary Colors – These are the colors formed by mixing the primary colors.

green, orange and purple

Tertiary Colors – These are the colors formed by mixing a primary and a secondary color. That’s why the hue is a two word name, such as blue-green, red-violet, and yellow-orange.

yellow-orange, red-orange, red-purple, blue-purple, blue-green and yellow-green
color wheel labeled with types of colors in their proper locations

Warm & Cool Colors

  • Warm colors — such as red, yellow, and orange; evoke warmth because they remind us of things like the sun or fire.
  • Cool colors — such as blue, green, and purple (violet); evoke a cool feeling because they remind us of things like water or grass.

Warm colors advance and cool colors recede, affecting the perception of depth. This theory is based upon that fact that the eye adjusts when focusing on colors of different wavelengths. Red light waves have a longer wavelength than blue ones. An image containing both cool and warm colors would demonstrate contrast of temperature or warm/cool contrast creating more complex relationships between the color (warm colors can read cooler against a higher intensity warm colors and cool colors sometimes can advance against predominately warm palette).

warm color scheme
cool color scheme
cool with warm contrast color scheme (the yellow text seem to be much closer to the viewer in comparison to blue text)
warm with cool contrast color scheme (notice how yellow reads much cooler against hot pink)

Neutral Colors – Gray, Brown. These aren’t on most color wheels, but they’re considered neutral because they don’t contrast with much of anything. They’re dull and uneventful. However, drop a little color in a headline and it will sing.

cool against warm neutral color cheme contrast

Tints, Shades and Tones

Tint – adding white to pure color

Shade – adding black to pure color

Tone – adding gray to pure color

Color Schemes/Harmonies

Complementary

Red and Green, Blue and Orange, Purple and Yellow — located directly across from each other on the color wheel. Complementary colors hey rarely look good when used together because, when used together, they become extremely vibrant and have heavy contrast, especially if they are of the same value. Complementary colors are useful when you want to make something stand out. However, complementary colors are really bad for text.

green and red are complementary colors of same value. used together not only do they create contrast, but also vibrating boundaries – when color vibration occurs along the boundary separating contrasting hues of equal value.
complementary color scheme; because of high contrast is often used to suggest action and energy
blue-orange complementary color scheme

 Analogous

Red and Orange, Blue and Green, etc. – located right next to each other on the color wheel. They usually match extremely well, but they also create almost no contrast. They’re good for very serene, peaceful designs and artwork where you want viewers to feel comfortable.

blue and green are analogous colors. when used together they produce much more calming effect than complementary colors. (also, notice how the green in this example reads much lighter than green in previous example due to simultaneous contrast - where appearance of the same color is affected by the appearance of other colors surrounding it).
analogous color scheme is a much calmer experience
warm analogous color scheme

Explore more color combinations HERE and HERE.

Triad – uses colors that are evenly spaced around the color wheel. Triadic color harmonies tend to be quite vibrant, even if you use pale or unsaturated versions of your hues. To use a triadic harmony successfully, the colors should be carefully balanced – let one color dominate and use the two others for accent.

this triad color scheme is comprised of primary colors

Split-Complementary – is a variation of the complementary color scheme. In addition to the base color, it uses the two colors adjacent to its complement. This color scheme has the same strong visual contrast as the complementary color scheme, but has less tension. The split-complimentary color scheme is often a good choice for beginners, because it is difficult to mess up.

split complementary theme here is using orange and blue and green as it's split-opposite

Rectangle (tetradic) – uses four colors arranged into two complementary pairs. This color scheme is very rich and offers a lot of possibilities. However, it works best if there is one dominant color.

tetradic color scheme using blue, green opposite of yellow-green and orange with blue being a dominant color

 Color meanings

Color is a part of our visual field.  Color can be used as a tool to organize space.  We assign color codes to file folders, traffic signs, and holidays.  Consider the power of color symbolism.  In different contexts and different cultures a specific hue may carry a different meaning.

Color is closely associated with mood.   Reflect on the connections between a particular hue and its respective value and saturation and the viewer’s interpretation of its symbolic role in the image.  Colors can have positive or negative attributes.

Warm colors:   fire, sunlight, blood, greater luminosity

Cool colors:    ice, cold, darkness

RED: excitement, emotion, ardent love, valor, passion, fever, cruelty, wrath, sin,  (scarlet letter, red heart)

YELLOW: light, gold, church, sickness, treason, cowardliness, (however,  in China yellow is an imperial color)

GREEN: organic matter, fruitfulness, growth, contentment, tranquility, hope, sadness, decay, youth, springtime, jealousy, spirituality (blue-green)

ORANGE:  radiance, festivities, warmth, intimacy, caution

VIOLET: mystery, oppression, menace, terror, seduction, darkness, pietry, supersition, death, royalty

BLUE:  truth, divinity, eternity, loyalty, constancy, calm, shyness, death, coldness

WHITE:  light, triumph, innocence, purity, joy, divine power, regeneration, ghost, spirit, sickness, pallor, (symbol of death in some cultures like Japan)

BLACK: quiet, rest, strength, weight, richness, seclusion, absence of light, powers of darkness, mourning, death,  loss of innocence

Learn more about color symbolism HERE.

Types of Color in Web and Print Design

In Web and Print Design there are different types of color from what is on your regular color wheel.

RGB Color: This is color based upon light. Your computer monitor and television use RGB. The name “RGB” stands for Red, Green, Blue, which are the 3 primaries (with green replacing yellow). By combining these 3 colors, any other color can be produced. Remember, this color method is only used with light sources; it does not apply to printing.

CMYK Color: This is the color method based upon pigments. “CMYK” stands for Cyan, Magenta, Yellow, and Black (its what the K stands for). Using these 4 colors, most other colors can be achieved. Unfortunately, CMYK cannot reproduce the same amount of colors as RGB can, which is why yellow-greens sometimes look a bit muddy when printed. This is the method used by printers.

(InDesign note: It’s important to know that documents prepared for color separation (for printing on an offset press) cannot use an RGB color space. These files must use CMYK. But every image acquired from a digital camera or scanner and many images acquired from clip art sources come as RGB. These RGB graphics can be placed in InDesign documents, but before they can be output for separation, they must be converted to CMYK (preferably with an application like Adobe Photoshop). )

Pantone (PMS) Spot Color: This is yet another printing color method. PMS stands for “Pantone Matching System,” and is a large list of specially mixed colors made by the Pantone Corporation. Instead of using CMYK to create colors, the pigments are created individually for purity. For example,  PMS 233M is a specific blue-violet color. If chosen for a project, the color would be made exclusively for  that project and would always print exactly the same. Spot colors are expensive and useful when your design has minimum of color (one or two-color jobs).

(InDesign note: Pantone has a number of color libraries which get updated yearly and include process colors as well. They are included in InDesign color swatches menu.)


Additional  Resources: