Color in Context

Video Transcription

Hi everyone. My name is Mario and I'd like to welcome you to today's lesson on color in context. So for today's lesson we're going to analyze a few examples and apply the knowledge and principles and elements that we've learned up until this point. So as always feel free to pause, fast forward, and rewind throughout the lesson and when you're ready to go let's get started.

All right, so let's jump right into our first example here. And this is Water Lilies by Monet, and he did a couple of these. And this is using the subtractive color process that we covered before because it's using pigments which we also learned about and the paint is being mixed to create a variety of colors. But in this particular piece the assortment of colors is generally cool, so cool colors.

And if you recall our color wheel we have the warm side which is the reds, oranges, yellows, and then we 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. And this is quite a lovely painting.

And we also have this painting by Van Gogh. And 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. And 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.

So if we move away from traditional fine art, all the concepts that we've learned also apply to advertising. And you can see that we have ads or posters for movies here that I'm sure we've heard of, King Kong and Avatar. And 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. And 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. But since it's going to end up printed as well for movie posters and it goes back to that subtractive color process. And note again in this poster as well the use of complementary colors, the blue faces against that orange sunset.

Now in a previous lesson we also talked about hexadecimal color which was an additive color system for colors on the web. So we have a website here and if we were to look at the source code for the website we'd find the hex codes that correspond to certain colors on the page. So I'm going to lay these out for you, just a few. And You can see our dark ground is set up by using hex code of 1a1a1a, our light banner up top is using f6f1f1, and the red text that we're using here for links are using the codes cd2f3c. So again, a combination of letters a through F and numbers zero through nine will give us a variety of colors in web pages.

So jumping into photography as well uses the subtractive process when printed out. And surprisingly enough this fooled me, but this is actually a video game. And it's ridiculous how 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. And 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.

And if I take this into Photoshop and tell it to spit out a color chart of the colors used to create this image you'll also notice the use of grayscale here. So all these colors are being used together in different places to make up this image. And you can get a better understanding if I show you a close up portion of the car here. So all those colors are being used to construct all these lovely gradients and smooth transitions in the image here. So pretty awesome stuff.

And finally we have the big G, the Google. And immediately I can spot a few things right off the bat. You know we talked about first off the subtractive color process, our three primaries were blue, red, and yellow if we're talking about pigments in painting and things like that. And we also have our primaries for the additive process which were red, green, and blue, so RGB. And if you use any of the Google services you'll start to notice these colors in their logos like Google Chrome or Google Drive. But it's important that their use be appealing. I mean they're not just using these colors randomly. 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.

And 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 I want you to focus on just the Google services, so just those icons for now, which are these here. And let's pull them out and take a closer look in a different arrangement.

So what do you notice about these icons and in particular the second row? It's looking a lot like a color wheel. And these colors might seem completely random, but colors were chosen for a very good reason. And 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.

And in addition, they also help you identify certain services quickly. So the red orangey icons like the G+ and the Messenger+ let you identify them as Google services. Whereas the green messaging app, which is the only one that's green with a smiley face here, lets you quickly identify that it's your messaging app, which you are going to be using quite often the text family or friends. And 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. And even if we jump into something like Google Maps, color interaction here play a very important role because you have to be able to easily distinguish important roads or highways. And again here's a color scheme that's primarily analogous, so yellow, green, blue, and then of course the neutral colors.

Well everyone that ends our lesson for today. I hope this was an interesting look at colors in context. And there's always so much more I want to share, but I hope you've enjoyed this lesson with me as much as I enjoyed sharing it with you today and I also hope you have a better eye for analyzing color and design.

My name is Mario and I will see you next lesson.