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.

(http://cios233.community.uaf.edu/files/2011/10/04-02_colorwheel.jpg)

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.

(http://cios233.community.uaf.edu/files/2011/10/3partwheel.gif)

red, yellow,

blue

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

(http://cios233.community.uaf.edu/files/2011/10/6partwheel.gif)

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.

(http://cios233.community.uaf.edu/files/2011/10/12part.gif)

yellow-orange,

red-orange,

red-purple,

blue-purple,

blue-green and

yellow-green

(http://cios233.community.uaf.edu/files/2011/10/color_wheel.gif)

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.

(http://cios233.community.uaf.edu/files/2011/10/warm-cool.gif)

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).

(http://cios233.community.uaf.edu/files/2011/10/warm.jpg)

warm color scheme

(http://cios233.community.uaf.edu/files/2011/10/cool1.jpg)

cool color scheme

(http://cios233.community.uaf.edu/files/2011/10/cool_warm_contrast.jpg)

cool with warm contrast color

scheme (the yellow text seem to be

much closer to the viewer in

comparison to blue text)

(http://cios233.community.uaf.edu/files/2011/10/wRM_COOL_contrast.jpg)

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.

(http://cios233.community.uaf.edu/files/2011/10/cool_warm_contrast1.jpg)

cool against warm neutral color

cheme contrast

Tints, Shades and Tones

Tint – adding white to pure color

(http://cios233.community.uaf.edu/files/2011/10/Tints.gif)

Shade – adding black to pure color

(http://cios233.community.uaf.edu/files/2011/10/Shades.gif)

Tone – adding gray to pure color

(http://cios233.community.uaf.edu/files/2011/10/Tones.gif)

Color Schemes/Harmonies

Complementary

(http://cios233.community.uaf.edu/files/2011/10/Complementary.gif)

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.

(http://cios233.community.uaf.edu/files/2011/10/complementary.jpg)

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.

(http://cios233.community.uaf.edu/files/2011/10/complementary3.png)

complementary color scheme; because of high

contrast is often used to suggest action and

energy

(http://cios233.community.uaf.edu/files/2011/10/complementary.jpeg)

blue-orange complementary color

scheme

Analogous

(http://cios233.community.uaf.edu/files/2011/10/Analogous.gif)

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.

(http://cios233.community.uaf.edu/files/2011/10/analogous.jpg)

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

s imultaneous contrast - where appearance of the

same color is affected by the appearance of

other colors surrounding it).

(http://cios233.community.uaf.edu/files/2011/10/analogous2.jpg)

analogous color scheme is a much

calmer experience

(http://cios233.community.uaf.edu/files/2011/10/analogous3.jpg)

warm analogous color scheme

Explore more color combinations HERE (http://www.worqx.com/color/combinations.htm) and HERE

(http://www.worqx.com/color/studies.htm).

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.

(http://cios233.community.uaf.edu/files/2011/10/Triad.gif)

(http://cios233.community.uaf.edu/files/2011/10/Swatch_triad.gif)

(http://cios233.community.uaf.edu/files/2011/10/triad.jpg)

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.

(http://cios233.community.uaf.edu/files/2011/10/SplitComplementary.gif)

(http://cios233.community.uaf.edu/files/2011/10/Swatch_splitC.gif)

(http://cios233.community.uaf.edu/files/2011/10/complementary4.jpg)

split complementary theme here is us ing

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.

(http://cios233.community.uaf.edu/files/2011/10/Tetrad.gif)

(http://cios233.community.uaf.edu/files/2011/10/Swatch_rect.gif)

(http://cios233.community.uaf.edu/files/2011/10/complementary2.jpg)

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 (http://www.colormatters.com/color-symbolism).

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

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:

Color Picker (http://www.worqx.com/color/palette.htm)

ColorLovers (http://www.colourlovers.com/)

More tools for creating/choosing color schemes (http://spyrestudios.com/color-combination-tools/)