Flash Lesson 03 – Color Theory

Posted by Mark 2000 | Lessons | Tuesday · 1 May · 2007 20:46 | 38,027 views

ColorwheelAs seen in Lesson 01 we’ve drawn something. In Quick Tutorial 01 we saw the mechanical process by which we color in the something. In this lesson, which could be the most complex, philosophical, and important in the series (and only three lessons in!) we’ll see how to determine what colors you’ll use to fill in your drawings. This ain’t paint by numbers, kids. This is art. This lesson will save you $2000 in credits at a university and $30,000 at a technical art school (at which they probably don’t even have a true color theory course, so fuck ‘em). With this big a topic I’m sure I’m going to miss something important so please feel free to add to the comments.

Plumb Is the New Eggplant

Before we talk about color we need to know how to talk about color so you can understand what I’m saying in future sections. Orwell said that by limiting vocabulary you are limiting freedom. In color theory the opposite holds true. In order to understand a color you need to deconstruct it to its roots, and that means not just eliminating descriptive terms like burnt sienna and evergreen but also cyan and even brown. Yes, brown is not a color.

So then what is brown exactly if it’s not brown? Typically brown is a shade or tint of red, orange, or yellow – meaning if you add black to red, orange, or yellow you get one of various colors we call brown. Notice I used the word shade earlier along with two primary colors and one secondary color – also known as hues. That’s because you can describe any color in terms of a modified primary or secondary color. A shade of a hue is that hue made darker (adding black) . A tint of a hue is that hue made lighter (adding white). These two terms describe luminosity.

Saturation describes the purity of a color in relation to the amount of black and white added to it. When changing saturation you are adding both black AND white to a color to move it closer to gray. The closer to gray a color is the less saturated it is. The luminosity of the color does not necessarily change if equal amounts of black and white are added. An unsaturated color is dull. A saturated color is bright. Don’t confuse bright (saturation) with light (luminosity).

So lets dissect a very specific type of light brown: Beige. Beige is in actuality an unsaturated tint of orange. Don’t believe me? We’ll let science settle this. This page’s main color would be considered beige. Let’s ask Photoshop’s color picker to settle this for us.

Sightcolor

The hue is orange. Closer to the top means lighter, and closer to the left means duller. As you can see Photoshop supports my definition of beige like Scully supports Mulder. Photoshop and I are purely professional. We may dry hump on occasion, but its all in the line of duty.

But you can go even further! Some color theorists might say to you that secondary colors aren’t colors either, so screw you orange, green, and purple! That leaves you with just yellow, red, and blue to describe your colors. Orange is actually a redish yellow or a yellowish red depending on how much closer to red or yellow you are on the spectrum. So just as bad is actually ungood, beige is actually an unsaturated tint of redish yellow. Suck on that.

Choose a Color Scheme

Before you sit down to color your work, and perhaps before you even start drawing, you need to determine a color scheme. A color scheme is limited palette of colors you will use in your scene. Limited being the most important word in the previous sentence. A Kindergarten student is impressed with the number of colors at her disposal. She wants to make sure she uses all of them. After all, if she doesn’t use every single crayon in one sitting the unused ones will feel left out. The serious artist type knows what Uncle Ben always said as if he was primping young Peter Parker for dictator of a small Pacific island: With great power comes great responsibility. Yes, you have 64 million colors, but you have to have the wisdom not to use them all at once.

One of Anime’s worst sins is its color schemes – or lack there of. Look at the sample below. Holy crap on a cracker! There’s blue, green, yellow, red, purple, pink, orange. It’s like a goddamn tie dye shirt and it hurts my eyes so bad! So BAD! I think I can taste blood in my mouth when I look at it too long!

Inuyasha-Bike-Wallpaper

Having a limited palette allows you to give you’re work a specific mood beyond that of a grade school finger painting session, whether it be gloomy, romantic, or apocalyptic. All you need as an example is this site. Its pretty much red, white, and black. If there were more colors it wouldn’t look like a notebook, it would look like shit. For a more detailed example take a look at the still below from one of my early cartoons: Veal Fughedaboutit!.

Vealstill01

This is the establishing shot so you can see all the characters at once as well as the entire room the movie is set in. You’ll find all I used are various shades of orange and dull blues. This creates the warm feeling of a candle lit room at night. The colors make you feel warm. You can almost smell the wood burning oven. If I hadn’t made orange my primary force that feeling would be lost. I used blue because it’s the direct opposite of orange on the color wheel and therefore its contrasting color – or compliment.

Complimentary Colors Pop

If I put a white object against a black background, the white object will really pop – that is to say, it will stand out and attract the viewer’s attention. That’s because white is the opposite of black in every way. You can create that same sensation of contrast with color as well. Orange and red are not opposites. You need red to make orange. If I put a light orange object on a red background it will stand out, but not too much. It’ll be subtle, and subtle is ok. However, if I put the same light orange on top of a dark blue background…

Squares01

Shabazz! Its practically the same effect as putting black on white. Thats because on the color wheel orange is the exact opposite of blue. Now the color wheel is not just some arbitrary clustering of color. No, no! It’s science, baby.

If you want to know the exact opposite of a color stare at it unblinking for a minute. Now close your eyes and open them quickly while looking at a blank, white surface. The after image you see is a direct negative of what you just looked away from. If you stare at orange, the after image your brain will make is blue. The reason for this is because when you’re eye takes in a color that is too intense – often a flash of bright light, but also a non-luminous object that’s been focused on for too long – your brain reacts by trying to tone it down with the exact opposite color. It’s a protective mechanism. Try it on pot, it’ll blow your mind!

To get a sense of this in action and in a less blunt way take a look at the scene below.

Floodstill01

This is a still from an upcoming movie called The Flood. It doesn’t really occur to you at first that I have a color scheme, but upon careful examination, with the exception of the purple microphone, there’s nothing but various oranges and blues. Everything, from the skin tones, to the building, to the clothes, to the sky, is either some kind of orange or blue. George’s head stands out against the frame of the sky and his shirt. The gun barrel (which is light blue, not grey) stands out against the fame of GW’s hand, the gun handle, and the building. Even the bullet’s on George’s belt (the same light blue) pop like pearls on the brown pants. So if you have a subject that you really want to stand out, use the opposite color of the one that dominates your scene and the audience will be take immediate notice.

The Saturation Slider is Your Friend

SatsliderPlasma TV and inkjet printer sales people want you to believe the world is vibrant and full of life. Every color is bright and screaming for attention. It’s a great way to get you out of the showroom with a fancy new product, but if you had to look at those rainbowy sample images and their ilk forever you’d have a stroke from the sheer amount of visual stimulation. The world is not that vivid and no one should want it to be. That’s why the saturation slider is your friend. This is another mistake in the above Inuyasha example. The colors are way to bright. And not some of them. All of them. They’re ALL bright.

It’s a look that American comic artists started copying in the 90’s. Superman’s blue tights became REALLY BLUE! Gen13’s uniforms were every color on the wheel with zero restraint (which breaks the term uniform into little bitty pieces).

Superman01

This is because in the early 90’s comic pages stopped being made of dull newsprint and suddenly changed to clean white glossy. For the first time printed colors could be accurately represented on a page. It was like moving from black and white to color TV. This combined with new techniques in computer colorization to give artists total control over their images. Too much control. They didn’t know how to handle unlimited bright color so they abused it, just like the kindergartner. Another reason for the explosion in bright colors in comics is that the one with the eye-catchingest cover is likely the one you’re going to buy, just like the plasma TV. See how everything connects?

So, understand that bright color will grab attention, but it can’t hold it forever. It’s tiring to look at and its not accurate. It can’t create a mood the way the subtleties of a combination of bright and dull colors can. The best example I can provide is the Sistine Chapel Ceiling by Michelangelo. It was restored in the 90’s to its original form, removing dirt and damage in the process. Many critics hated it, not because the cleanup was wrong or damaged the original painting, but because Michelangelo used terrible, bright, garish colors that were hard to look at (to his defense he was a sculptor who hated painting). The dirt and grime of 500 years subdued those colors and surprisingly gave the frescos a depth and texture they originally didn’t have. It also gave them a feeling of ancientness that a 5000 year old fairy tail deserves.

Zechariah-Before Zechariah-After

There Are No Pure Colors

Good art is all about observation. You must cleanse yourself of your preconceived notions of what stuff in the natural world looks like. It’s called seeing with your eyes instead of with your mind. An apple is not a heart shaped thing with a leaf sticking out the top. A heart isn’t even a heart shaped thing. When you look at these objects you find they are very different looking that what our collective unconscious tells us. The same is true with color. You may label an object red but is it? It could very well be red, but light and shadow affect color in such a way that your eye is picking up so many more subtleties. I think the best example I can show you is the sidewalk outside my apartment. It’s concrete. You’d probably say it was gray without a second though. Let’s take a look at it with the help of our friend, Photoshop’s color picker.

Sidewalk

As you can see our gray sidewalk is actually *gasp* blue and orange. Orange because our warm yellow sun is hitting it, and blue because shadows are cool, mainly because they are in direct contrast with something warm. So what am I getting at? Well, for one, never use colors like white or gray in pure form in your work. They don’t exist in real life. The only time I ever use pure white is if the camera is looking at a light source that’s so bright actual film would be over-exposed.

But my major point is that lighting has an effect on the color of an object and you will never ever see it’s true, pure color. If an object is in the sun it’ll take on a warmth where it’s hit by light rays. Objects in shadow will always have a cool cast to them. If an object is hit by a green light it will at most look green no matter what the color, and at least take on a green cast that will mix with the object’s actual color.

What I want you to do with this information is to stay away from primary colors because you never see them in real life. Second I want your shadows and highlights to be not just different in shade, but also in color. When you’re making a shaded area of an object don’t just use the same color you used for it’s lit parts but darker. Try to move that color more towards the cool end of the spectrum at least a little. You’ll find you have a much better looking image in the end.

Skeletorcolor

Above we have our favorite homosexual villain, Skeletor. In the left picture he’s colored the way you’d expect from a typical kids animation studio. It catches the eye immediately, but only because it’s gawdy. There’s no thought about environment or mood. The highlights and shadows are just different shades of the same hue. Even though there is light and shadow the image still seems flat. And worst of all, well, he’s freaking purple. No one is afraid of purple. The Skeletor on the right is actually scary. He’s got a color scheme made up, once again, of complimentary colors: purple and green. The purple has been toned down so that it’s more poisonous than fabulous. Since the blueish green in the shadows of the face is the close compliment of the red in the eyes. It really makes it pop even though its subtle. In the left Skeletor the same colored red eyes are hardly noticeable. Right Skeletor is a Skeletor to be reckoned with. If he looked like this in any of the He Man incarnations he’d be nailing the Sorcerous in Castle Grey Skull right now.

Use Gradients Sparingly

gradwizGradients are a major peeve of mine because to me they signify laziness. Nothing says amateur louder and longer than a gradient on almost every object in a picture. To me a gradient is a special effect, and you don’t make a whole movie of special effects. Then they aren’t special anymore. There are a few instances where smooth transition from one color to another is nice, like in a sky or waterscape – places where atmospheric haze comes into effect. But on average a drawing benefits from special attention payed to how light and shadow play on a form beyond radial or linear. I used to love gradients in middle school because (you’re about to learn my age) I’d just gotten a VGA card and nothing in the world was cooler than having smooth color spread like butter across your screen.

The picture of the wizard is from a popular Flash tutorial site called Cartoon Smart where you pay for each lesson. The wizard is part of the lesson “learn to draw better”. Insert ironic joke here. When you use a gradient on every section of your work your drawing looks faceted, not unlike a stained glass window. A stained glass window is flat. You don’t want your drawings to look flat.

Test Time

Ok students, there’s a lot of stuff wrong with the following image beyond the fact that Superman’s wang is encased in a mechanical restraint.

Superman02

From a purely coloristic stand point, based on what you’ve learned today, what’s the problem? The most glaring is that there are nothing but fully saturated primary and secondary colors. There’s no color scheme at all. The picture has red, yellow, orange, green, blue, purple, aqua, and even a few colors not visible to the human eye. I think the use of ultraviolet is extremely tacky. In all cases, except for the yellow and orange spots, the highlights and shadows are gradients from one color to a darker version of the same color. And finally, the most annoying error, the red lighting thats shining all over the walls has zero effect on the characters or even the floor. WTF? They look as they would under bright, white light. This thing looks like a neon Las Vegas sign. The colorist took the ink and penciler’s hard work and decided to just click the gradient paint bucket in every empty spot. There’s no atmosphere and no sense of mood befitting an underground laboratory. If you’re struggling with color print this picture up. It’s the ultimate example of what not to do. Worse than Inuyasha, even.

5 Comments »

  1. Comment by luis — Tuesday, 1 May, 2007 @ 22:37
  2. pooor superman…. anyway awesome tutorial as usual.. i only wish you had shared it before i went to college im still stuck paying off college loans :(

  3. Comment by A-Wahl — Wednesday, 2 May, 2007 @ 16:25
  4. Boy, I didn’t realize any of that. I have never felt all that satisfied with my coloring. That was really helpful. Make more! Thanks….

  5. Comment by Andy — Thursday, 24 May, 2007 @ 6:13
  6. WOW… you’re awesome. This is my first time to your site and I love it. This post is great. Color is my biggest issue. You explained the theory of color very well. I learned and laughed all at the same time.

    THANKS!
    Andy

    P.S. I found this site through your latest post at Newgrounds… The Flood

  7. Comment by Rammer — Saturday, 11 August, 2007 @ 19:52
  8. the internet needs more groovy blogs like yours. i never really considered darkening the hue of a color for shading to be a travesty, i will try to pay more attention to my colors from now on.

  9. Comment by fluffy — Wednesday, 28 October, 2009 @ 23:48
  10. The reason that outdoor lighting has cold shadows and warm highlights isn’t just because of contrast (which would only affect the perception of colors, not the actual metering), but because the blue part of sunlight gets scattered (which is also why the sky is blue). As a result, your direct light is slightly yellow, while your indirect light is blue – the shadows are still being lit by the sky. The end result, warm yellow highlights and cool blue shadows.

    Since indoor lighting doesn’t get scattered in this way, the color temperature of both highlights and shadows will be the same. And of course, depending on the room there will be different amounts of backscatter that fill in the shadows.

RSS feed for comments on this post.

Leave a comment