Color Theory


| 1-introduction | 2- color wheel | 3-HSV Color Space | 4- monochromatic |
| 5-analogous | 6-triadic | 7-tetradic | 8-quiz | 9-project | 10-lesson resources |
| browser safe colors | complementary color chart | color names | background changer |

| Color Theory Video 1 | Color Theory Video 2 | PBS Offbook Video |

One of the elements of design is color. Color is an added dimension that can evoke moods and make powerful statements when used wisely. With colors you can set a mood, attract attention, or make a statement. You can use color to energize, or to cool down. By selecting the right color scheme, you can create an ambiance of elegance, warmth or tranquility, or you can convey an image of playful youthfulness. Color can be your most powerful design element if you learn to use it effectively. Colors affect us in numerous ways, both mentally and physically. A strong red color has been shown to raise the blood pressure, while a blue color has a calming effect.

Being able to use colors consciously and harmoniously can help you create spectacular results.

Color can be used to:

Deciding a an aestically pleasing color scheme can be challenging. In general, you would choose a monochromatic, triadic, compound, or analogous color scheme for your design elements.

Warm Colors

warmcolors

Warm colors include red, orange, and yellow, and variations of those three colors. These are the colors of fire, of fall leaves, and of sunsets and sunrises, and are generally energizing, passionate, and positive.

Red and yellow are both primary colors, with orange falling in the middle, which means warm colors are all truly warm and aren’t created by combining a warm color with a cool color. Use warm colors in your designs to reflect passion, happiness, enthusiasm, and energy.

Cool Colors

coolcolors

Cool colors include green, blue, and purple, are often more subdued than warm colors. They are the colors of night, of water, of nature, and are usually calming, relaxing, and somewhat reserved.

Blue is the only primary color within the cool spectrum, which means the other colors are created by combining blue with a warm color (yellow for green and red for purple). Greens take on some of the attributes of yellow, and purple takes on some of the attributes of red. Use cool colors in your designs to give a sense of calm or professionalism.

RED (PRIMARY COLOR)

red

Red is a very hot color. It’s associated with fire, violence, and warfare. It’s also associated with love and passion. In history, it’s been associated with both the Devil and Cupid. Red can actually have a physical effect on people, raising blood pressure and respiration rates. It’s been shown to enhance human metabolism, too.

Red can be associated with anger, but is also associated with importance (think of the red carpet at awards shows and celebrity events). Red also indicates danger (the reason stop lights and signs are red, and that most warning labels are red).

Outside the western world, red has different associations. For example, in China, red is the color of prosperity and happiness. It can also be used to attract good luck. In other eastern cultures, red is worn by brides on their wedding days. In South Africa, however, red is the color of mourning. Red is also associated with communism. Red has become the color associated with AIDS awareness in Africa due to the popularity of the [RED] campaign.

In design, red can be a powerful accent color. It can have an overwhelming effect if it’s used too much in designs, especially in its purest form. It’s a great color to use when power or passion want to be portrayed in the design. Red can be very versatile, though, with brighter versions being more energetic and darker shades being more powerful and elegant.


ORANGE (SECONDARY COLOR)

orange

Orange is a very vibrant and energetic color. In its muted forms, it can be associated with the earth and with autumn. Because of its association with the changing seasons, orange can represent change and movement in general.

Because orange is associated with the fruit of the same name, it can be associated with health and vitality. In designs, orange commands attention without being as overpowering as red. It’s often considered more friendly and inviting, and less in-your-face.

YELLOW (PRIMARY COLOR)

yellow

Yellow is often considered the brightest and most energizing of the warm colors. It’s associated with happiness and sunshine. Yellow can also be associated with deceit and cowardice, though (calling someone yellow is calling them a coward).

Yellow is also associated with hope, as can be seen in some countries when yellow ribbons are displayed by families who have loved ones at war. Yellow is also associated with danger, though not as strongly as red.

In some countries, yellow has very different connotations. In Egypt, for example, yellow is for mourning. In Japan, it represents courage, and in India it’s a color for merchants.

In your designs, bright yellow can lend a sense of happiness and cheerfulness. Softer yellows are commonly used as a gender-neutral color for babies (rather than blue or pink) and young children. Light yellows also give a more calm feeling of happiness than bright yellows. Dark yellows and gold-hued yellows can sometimes look antique and be used in designs where a sense of permanence is desired.

GREEN (SECONDARY COLOR)

green

Green is a very down-to-earth color. It can represent new beginnings and growth. It also signifies renewal and abundance. Alternatively, green can also represent envy or jealousy, and a lack of experience.

Green has many of the same calming attributes that blue has, but it also incorporates some of the energy of yellow. In design, green can have a balancing and harmonizing effect, and is very stable. It’s appropriate for designs related to wealth, stability, renewal, and nature. Brighter greens are more energizing and vibrant, while olive greens are more representative of the natural world. Dark greens are the most stable and representative of affluence.

BLUE (PRIMARY COLOR)

blue

Blue is often associated with sadness in the English language. Blue is also used extensively to represent calmness and responsibility. Light blues can be refreshing and friendly. Dark blues are more strong and reliable. Blue is also associated with peace, and has spiritual and religious connotations in many cultures and traditions (for example, the Virgin Mary is generally depicted wearing blue robes).

The meaning of blue is widely affected depending on the exact shade and hue. In design, the exact shade of blue you select will have a huge impact on how your designs are perceived. Light blues are often relaxed and calming. Bright blues can be energizing and refreshing. Dark blues are excellent for corporate sites or designs where strength and reliability are important.

PURPLE (SECONDARY COLOR)

purple

Purple was long associated with royalty. It’s a combination of red and blue, and takes on some attributes of both. It’s associated with creativity and imagination, too.

In Thailand, purple is the color of mourning for widows. Dark purples are traditionally associated with wealth and royalty, while lighter purples (like lavendar) are considered more romantic.

In design, dark purples can give a sense wealth and luxury. Light purples are softer and are associated with spring and romance.

Neutrals

neutralcolors

Neutral colors often serve as the backdrop in design. They’re commonly combined with brighter accent colors. But they can also be used on their own in designs, and can create very sophisticated layouts. The meanings and impressions of neutral colors are much more affected by the colors that surround them than are warm and cool colors.

BLACK

black

Black is the strongest of the neutral colors. On the positive side, it’s commonly associated with power, elegance, and formality. On the negative side, it can be associated with evil, death, and mystery. Black is the traditional color of mourning in many Western countries. It’s also associated with rebellion in some cultures, and is associated with Halloween and the occult.

Black is commonly used in edgier designs, as well as in very elegant designs. It can be either conservative or modern, traditional or unconventional, depending on the colors it’s combined with. In design, black is commonly used for typography and other functional parts, because of it’s neutrality. Black can make it easier to convey a sense of sophistication and mystery in a design.

WHITE

white

White is at the opposite end of the spectrum from black, but like black, it can work well with just about any other color. White is often associated with purity, cleanliness, and virtue. In the West, white is commonly worn by brides on their wedding day. It’s also associated with the health care industry, especially with doctors, nurses and dentists. White is associated with goodness, and angels are often depicted in white.

In design, white is generally considered a neutral backdrop that lets other colors in a design have a larger voice. It can help to convey cleanliness and simplicity, though, and is popular in minimalist designs. White in designs can also portray either winter or summer, depending on the other design motifs and colors that surround it.

GRAY

gray

Gray is a neutral color, generally considered on the cool end of the color spectrum. It can sometimes be considered moody or depressing. Light grays can be used in place of white in some designs, and dark grays can be used in place of black.

Gray is generally conservative and formal, but can also be modern. It is sometimes considered a color of mourning. It’s commonly used in corporate designs, where formality and professionalism are key. It can be a very sophisticated color. Pure grays are shades of black, though other grays may have blue or brown hues mixed in. In design, gray backgrounds are very common, as is gray typography.

BROWN

brown

Brown is associated with the earth, wood, and stone. It’s a completely natural color and a warm neutral. Brown can be associated with dependability and reliability, with steadfastness, and with earthiness. It can also be considered dull.

In design, brown is commonly used as a background color. It’s also seen in wood textures and sometimes in stone textures. It helps bring a feeling of warmth and wholesomeness to designs. It’s sometimes used in its darkest forms as a replacement for black, either in backgrounds or typography.

BEIGE AND TAN

tan

Beige is somewhat unique in the color spectrum, as it can take on cool or warm tones depending on the colors surrounding it. It has the warmth of brown and the coolness of white, and, like brown, is sometimes seen as dull. It’s a conservative color in most instances, and is usually reserved for backgrounds. It can also symbolize piety.

Beige in design is generally used in backgrounds, and is commonly seen in backgrounds with a paper texture. It will take on the characteristics of colors around it, meaning it has little effect in itself on the final impression a design gives when used with other colors.

CREAM AND IVORY

ivory

Ivory and cream are sophisticated colors, with some of the warmth of brown and a lot of the coolness of white. They’re generally quiet, and can often evoke a sense of history. Ivory is a calm color, with some of the pureness associated with white, though it’s a bit warmer.

In design, ivory can lend a sense of elegance and calm to a site. When combined with earthy colors like peach or brown, it can take on an earthy quality. It can also be used to lighten darker colors, without the stark contrast of using white.

In Summary

While the information contained here might seem just a bit overwhelming, color theory is as much about the feeling a particular shade evokes than anything else. But here’s a quick reference guide for the common meanings of the colors discussed above:

 

 

 

 

 


| 1-introduction | 2- color wheel | 3-HSV Color Space | 4- monochromatic |
| 5-analogous | 6-triadic | 7-tetradic | 8-quiz | 9-project | 10-lesson resources |

The Color Wheel

color wheel

Primary Colors

In theory, the Primary Colors are the root of every other hue imaginable. The primary pigments used in the manufacture of paint come from the pure source element of that Hue. There are no other pigments blended in to alter the formula.

Think of the three Primaries as the Parents in the family of colors.In paint pigments, pure Yellow, pure Red, and pure Blue are the only hues that can't be created by mixing any other colors together.

primary colors

Secondary Colors

Secondary colors are orange, green, and violet. Secondary colors are created by mixing 2 of the primary colors red, blue, or yellow in equal amounts. When you combine any two of the Pure Primary Hues, you get three new mixtures called Secondary Colors.

Think of the three Secondaries as the Children in the family of colors.

secondary colors

Tertiary Colors

Tertiary colors are a mix of the 3 primary colors, red, yellow and blue. Many different colors can be made by changing the amount of primary colors used. When you mix a Primary and its nearest Secondary on the Basic Color Wheel you create six new mixtures called Tertiary colors.

Think of the six Tertiary Colors as the Grandchildren in the family of colors, since their genetic makeup combines a Primary and Secondary color.


tertiaty colors

 


| 1-introduction | 2- color wheel | 3-HSV Color Space | 4- monochromatic |
| 5-analogous | 6-triadic | 7-tetradic | 8-quiz | 9-project | 10-lesson resources |

Color Properties and the HSV Color Space

The HSV color space is important to look at because it describes color based on three properties: Hue, Saturation and Value. As you edit these values, the full spectrum of colors can be created.

Hue

Hue is another word for color. Red, blue, and yellow are the primary hues, and when combined in equal amounts they create the secondary hues orange, green and violet. When primary and secondary hues that are adjacent on the color wheel are combined, you get the tertiary hues. These colors are shown in the color wheel diagram.

Hue/color is an element of design with endless variety. Hue/color is a mixture of 3 primary colors, red, yellow and blue. When you mix the primary colors in different amounts, you get a limitless number of colors.

Chroma

Chroma refers to the purity of a color. A hue with high chroma has no black, white or gray in it. Adding white, black or gray reduces its chroma. It’s similar to saturation but not quite the same. Chroma can be thought of as the brightness of a color in comparison to white.

In design, avoid using hues that have a very similar chroma. Opt instead for hues with chromas that are the same or a few steps away from each other.

EXAMPLES

moviestills

 

Saturation

Saturation is the intensity of a color (or hue). When you mix colors or add black to a color, saturation and intensity drops. If you add white, color becomes lighter, but not necessarily more intense. The image below demonstrates this; the first box is fully saturated, the second has black added and the third has white added.

saturation

 

Value

The lightness or darkness of a color is its value. Like saturation, adding black or white to a color affects value. Tints are colors with added white, and shades are colors with added black. The images to the right show tints and shades of the hues of the color wheel.

value

Tints - adding white to a pure hue:

tints

Shades - adding black to a pure hue:

shade

Tones - adding gray to a pure hue:

tones

Color harmonies

Color harmonies serve to describe the relationships certain colors have to one another, and how they can be combined to create a palette of color.

You can explore these different color schemes at http://paletton.com/

Summary

While you don’t necessarily have to remember all of these technical terms, you should be familiar with the actual concepts, especially if you want to master part 3 of this series (in which we create our own color schemes). To that end, here’s a cheat sheet to jog your memory:

 


| 1-introduction | 2- color wheel | 3-HSV Color Space | 4- monochromatic |
| 5-analogous | 6-triadic | 7-tetradic | 8-quiz | 9-project | 10-lesson resources |

Monochromatic color scheme (based on one primary color)

Monochromatic Color Scheme is created by taking any one of the twelve Hues from the Basic Color Wheel and repeating it in various Tints, Shades and Tones.
You would be surprised how many variations, both obvious and subtle, can be achieved from just one color. This monochromatic color scheme approach is actually considered very sophisticated and usually creates a calming effect.

Logo Design Examples

logo1logo2

Website paletton.com

Take a look at how many possibilities that one color can begin to give us as shown below with the color red using the website link http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF

monochromatic

monochromatic color tables

monochromatic example


| 1-introduction | 2- color wheel | 3-HSV Color Space | 4- monochromatic |
| 5-analogous | 6-triadic | 7-tetradic | 8-quiz | 9-project | 10-lesson resources |

Complementary Color Scheme

A complementary relationship is a harmony of two colors on the opposite side of the color wheel. When complementary colors are placed side-by-side they tend to enhance the intensity (chroma) of each other, and when they are blended together they tend to decrease the intensity of each other. The high contrast of complementary colors creates a vibrant look especially when used at full saturation. This color scheme must be managed well so it is not jarring. Complementary color schemes are tricky to use in large doses, but work well when you want something to stand out.

Note: Complementary colors are really bad for text.


complementarycomplementary 2

Logo Examples

logo1logo2logo3

 

Website paletton.com

Take a look at how many possibilities that two colosr can begin to give us as shown below with the color red and green using the website link http://paletton.com/#uid=a002P0kllllaFw0g0qFqFg0w0aF

complementary1

complementary color table

complementary example


| 1-introduction | 2- color wheel | 3-HSV Color Space | 4- monochromatic |
| 5-analogous | 6-triadic | 7-tetradic | 8-quiz | 9-project | 10-lesson resources |

Analogous/ADJACENT COLOR SCHEME

An Analogous color scheme is based on a careful selection of colors in the same area of the color spectrum. Usually the colors are differentiated by their vibrancy, and their contrast when compared to each other.

analogous 1analog 2

An analogous relationship is a harmony of colors whose hues are adjacent to one another on the color wheel. Analogous colors tend to be families of colors such as blues (blue, blue-violet, blue-green) and yellows (yellow, yellow-orange, yellow-green).
Since analogous colors are next to each other on the color wheel they usually match well and create serene and comfortable designs.

Analogous color schemes are often found in nature and are harmonious and pleasing to the eye.Make sure you have enough contrast when choosing an analogous color scheme.Choose one color to dominate, a second to support. The third color is used (along with black, white or gray) as an accent.

Logo Examples

 

logo1 logo2 logo3

Website paletton.com

Take a look at how many possibilities that three adjacent colors can begin to give us as shown below with the color red, purple, and orange using the website link http://paletton.com/#uid=5000u0kllllaFw0g0qFqFg0w0aF

 

adjacent1

adjacent color table

adjacent example


| 1-introduction | 2- color wheel | 3-HSV Color Space | 4- monochromatic |
| 5-analogous | 6-triadic | 7-tetradic | 8-quiz | 9-project | 10-lesson resources |

Triadic Color Scheme (based on 3 colors)

Triadic color scheme is composed of 3 colors on separate ends of the color spectrum. A triadic relationship is a harmony of three colors equidistant from one another on the color wheel. Primary colors and secondary colors are examples of color triads. Triadic colors are evenly spaced around the color wheel.

Triadic color schemes 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.

 

triad 1triad 2

There is a very easy way to create a Triadic color scheme:

  1. Take a color wheel, and choose your base color.
  2. Draw an Equilateral Triangle from this point.
  3. The three points of the triangle will form your tri-color scheme.

By using an Equilateral Triangle, you can ensure the colors have equal vibrancy and compliment each other properly.

Logo Examples

 

logo1 logo2 logo3

Website paletton.com

Take a look at how many possibilities that three triadic colors can begin to give us as shown below with the color red, light blue, and light green using the website link http://paletton.com/#uid=3000u0kllllaFw0g0qFqFg0w0aF

triadic1

tridic color table

triadic example


| 1-introduction | 2- color wheel | 3-HSV Color Space | 4- monochromatic |
| 5-analogous | 6-triadic | 7-tetradic | 8-quiz | 9-project | 10-lesson resources |

tetrad COMPund Color Scheme (Split Complimentary)

The Compound/complementary color scheme is based on providing a range of Complementary Colors: two colors are chosen from opposite ends of the color spectrum. By doing so, the designer is allowed more freedom in their design while also benefiting from the visual appeal of complementary colors.

Logo Examples

 

logo1 logo2 logo3

 

Website paletton.com

Take a look at how many possibilities that four tetradic colors can begin to give us as shown below with the color red, orange, blue, and green using the website link http://paletton.com/#uid=7000u0kllllaFw0g0qFqFg0w0aF

tetrad1

tetrad color table

tetrad example

 


| 1-introduction | 2- color wheel | 3-HSV Color Space | 4- monochromatic |
| 5-analogous | 6-triadic | 7-tetradic | 8-quiz | 9-project | 10-lesson resources |

Color Theory Quiz QUESTIONS

YOu should review all of the material in this lesson for the quiz on color. The questions will be drawn from the review items below:

Color can be used to:

Color Wheel COLORS

COMMON COLOR MEANINGS

Terminology

 


| 1-introduction | 2- color wheel | 3-HSV Color Space | 4- monochromatic |
| 5-analogous | 6-triadic | 7-tetradic | 8-quiz | 9-project | 10-lesson resources |

Color Theory projects

color wheel1

  1. Project 1: Traditional color wheel - create a traditional color wheel that represent the colors in the color wheel above. You have to be creative in your color wheel design. It CANNOT be a pie color wheel like the one above. Check the internet for ideas. Here are some I found that I thought were original:

    cw1 cw2 cw3
    cw4 cw6 cw7
    cw8


  2. Project 1:Non-traditional Color Wheel - create a 3 dimensional color wheel using various miscellaneous items to form a hanging mobile. Materials include: metal hanger, string, and various materials that represent the colors in the color wheel above.

    cw5 cw9 cw10cw10

| 1-introduction | 2- color wheel | 3-HSV Color Space | 4- monochromatic |
| 5-analogous | 6-triadic | 7-tetradic | 8-quiz | 9-project | 10-lesson resources |

Lesson Resources

The following websites were used to help create this lesson.