+
Color in Context

Color in Context

Rating:
Rating
(0)
Description:

In this lesson you will learn to analyze color design examples and apply knowledge of principles and elements that you have learned in this unit.

(more)
See More
Try a College Course Free

Sophia’s self-paced online courses are a great way to save time and money as you earn credits eligible for transfer to over 2,000 colleges and universities.*

Begin Free Trial
No credit card required

25 Sophia partners guarantee credit transfer.

221 Institutions have accepted or given pre-approval for credit transfer.

* The American Council on Education's College Credit Recommendation Service (ACE Credit®) has evaluated and recommended college credit for 20 of Sophia’s online courses. More than 2,000 colleges and universities consider ACE CREDIT recommendations in determining the applicability to their course and degree programs.

Tutorial

What's Covered

This tutorial analyzes a few examples and apply the knowledge and principles and elements that you've learned up until this point. Specifically, this lesson will cover:

  1. Monet
  2. Van Gogh
  3. Advertising
  4. Website Design
  5. Photography
  6. Logos

1. Monet

Below is Water Lilies by Monet, and he did a couple of these.


This is using the subtractive color process because it's using pigments which and the paint is being mixed to create a variety of colors.

Term to Know

    • Subtractive Color Process
    • The mixing of color with pigment; subtractive color is seen when light is absorbed or reflected by pigment.

But in this particular piece the assortment of colors is generally cool. If you recall our color wheel you have the warm side which is the reds, oranges, yellows, and then you have the cool side which are the green, blues, and violets. So this painting is analogous in that sense because it's using colors that sit next to each other on the color wheel.

Term to Know

    • Analogous Colors
    • Hues which sit next to each other on the color wheel; analogous colors on one side of the color wheel are considered warm and on the other, cool.

2. Van Gogh

In the image by Van Gogh above, you can see it's a bit more striking. It has that heavy use of complementary colors which are the colors that sit opposite from each other on the color wheel, in this case they are the red and green.

Term to Know

    • Complementary Colors
    • Two hues which sit directly opposite each other on the color wheel.

He's using it here on the wall and the ceiling and it gets repeated again on the pool table and the base, so kind of mirrored elements there.


3. Advertising


Above you can see that you have ads or posters for movies King Kong and Avatar. In the King Kong poster you'll notice again the use of complimentary colors, that purple violet tower against yellow skies. And it doesn't seem like a big deal, but you know anyone else could have painted that tower gray or maybe just a dark black to make it more like a real building or a shadow that's being cast, but the colors really wouldn't have harmonized as well as they do now. Because this is also illustrated and printed this also uses the subtractive color process.

The Avatar poster on the other hand is probably a combination of both. The movie characters and worlds are designed using computers and 3D software which both use the additive color process, it's using light to combine to make up different colors.

Term to Know

    • Additive Color Process
    • The mixing of color with light; additive color is seen when light is projected.

Since it's going to end up printed as well for movie posters and it goes back to that subtractive color process. Note again in this poster as well the use of complementary colors, the blue faces against that orange sunset.


4. Website Design

In a previous lesson you learned about hexadecimal color which was an additive color system for colors on the web.

Term to Know

    • Hexadecimal Color
    • The color system used to describe web pages, defined by the base 16 notational system; Combinations of the numerals from 0 through 9 and letters from A though F are assigned to each color in this system.

So below you have a website here and if you were to look at the source code for the website you'd find the hex codes that correspond to certain colors on the page.


5. Photography & Video Games

Photography as well uses the subtractive process when printed out. The image below is actually a video game; some of these games today are so realistic.

This is from a game called Gran Turismo 5 and this is achromatic because there is no discernible hue. Again it's using the additive process now since we know it's a video game because it's developed using computers and it's probably typically played on television or monitor. If you take this image into Photoshop and tell it to spit out a color chart of the colors used to create this image you'd also notice the use of grayscale here.  If the colors were intense and pure, that would be considered saturation.  

Terms to Know

    • Saturation
    • Another term for the intensity of a color, usually refers to the vividness or purity of a color.
    • Achromatic
    • Having no discernible hue.
    • Grayscale
    • A multi-step arrangement of swatches of achromatic grays; Each step in a gray scale represents an even progression in value, from white to black.
    • Value
    • Another term for lightness or darkness.

6. Logos

Finally you have the big G, the Google.


Immediately you can spot a few things. In the subtractive color process, the three primaries are blue, red, and yellow if you're talking about pigments in painting and things like that. You also have the primaries for the additive process which were red, green, and blue, so RGB.

Term to Know

    • Primary Colors
    • The triad of red, blue and yellow on the subtractive color wheel or red, green and blue (RGB) on the additive color wheel.

If you use any of the Google services you'll start to notice these colors in their logos like Google Chrome or Google Drive. It's important that their use be appealing. So for these logos, although each color is clearly different, they are analogous and in particular the Google Drive logo, the yellow, green and blue, all these colors that sit next to each other in the color wheel.

If you take a look at your smartphone, be it a iPhone or Android device in this case, you might see something like this when you open up your applications drawer.


And it's very colorful, but focus on just the Google services, so just those icons for now, which are these here. These colors might seem completely random, but colors were chosen for a very good reason. First of all they all work really well together, they harmonize together and even spread out around in the app drawer it's still part of this bigger analogous theme. Each one of these sits next to each other in the color wheel. In addition, they also help you identify certain services quickly.The shape of the "g" is identified with google.  Whereas the green messaging app with the smiley face lets you quickly identify it since you will likely use it to text family or friends. 

Likewise we have the phone, Google Voice, and contacts icons which are these three first blue ones which are colored similarly because they are related services or related areas of interest. So color and color schemes play a very important role as you can see.

Even if you jump into something like Google Maps, color interaction play a very important role because you have to be able to easily distinguish important roads or highways.


Again here's a color scheme that's primarily analogous, so yellow, green, blue, and then of course the neutral colors.

Summary

Well that ends the lesson today on color in context. In this lesson, you got to identify principles of color in the classic works of Monet & Van Gogh. You also go see the application of these color principles in advertising, website design, photography, and the creation of logos.

Keep up the learning and have a great day!

Source: SOURCE: THIS WORK IS ADAPTED FROM SOPHIA AUTHOR MARIO E. HERNANDEZ

TERMS TO KNOW
  • Additive Color Process

    The mixing of color with light; additive color is seen when light is projected.

  • Subtractive Color Process

    The mixing of color with pigment; subtractive color is seen when light is absorbed or reflected by pigment.

  • Primary Colors

    The triad of red, blue and yellow on the subtractive color wheel or red, green and blue (RGB) on the additive color wheel.

  • Value

    Another term for lightness or darkness.

  • Hexadecimal Color

    The color system used to describe web pages, defined by the base 16 notational system; Combinations of the numerals from 0 through 9 and letters from A though F are assigned to each color in this system.

  • Analogous Colors

    Hues which sit next to each other on the color wheel; analogous colors on one side of the color wheel are considered warm and on the other, cool.

  • Complementary Colors

    Two hues which sit directly opposite each other on the color wheel.

  • Saturation

    Another term for the intensity of a color, usually refers to the vividness or purity of a color.

  • Achromatic

    having no discernable hue.

  • Grayscale

    a multi-step arrangement of swatches of achromatic grays; Each step in a gray scale represents an even progression in value, from white to black.