Choosing an animation color palette

Color in an art piece or an animation allows the artist to express their emotion, and personal tastes. Because of this, color is one of the most important aspects in the arts, but at the same time can be one of the most difficult things to grasp. This post will cover some tips and tricks on how to make your coloring job look good, so it can be applied to future illustrations and animations.

Simpler = Better

Assuming you are coloring in a digital program, and not restricted to the limitation of material provided by traditional finances, you currently have a lot of options handy on your color picker when it comes to color and hues and whatnot. If just starting out, it is important to remember that the simpler, the better. Do not immediately overwhelm your piece of art/animation with a buttload of different hues unless you absolutely know what you’re doing. This will create a lot of work in keeping track of all the different colors being used and can possibly overwhelm your art with too much going on.

Having too many different colors in a piece can cause them to clash in an unappealing way.
Limit the amount of key hues in your pallet in order to avoid clashing colors more easily.

The color wheel

The color wheel

A simplified color wheel looks like the one above. Here, warm and cool colors are easily distinguished, as well as the primary, secondary, and tertiary colors. Considering color harmony, there are many ways that a color scheme can be organized. The three easiest ways to determine a color scheme are to pick a key color, then to look at colors directly next to it, complementary to it, or triadic to it. These types of harmony are called analogous, direct, and triadic respectively.

Color Harmony Examples

Generally, these color schemes are utilized the most when it comes to art and animation. Some examples can be found in pop culture, logos, and through the works of many artists.

Art by Ryky
Analogous color schemes are chosen by having colors that are picked directly next to each other on the color wheel.

Example art by Ryky

Firefox Logo
Direct, or complementary colors are colors generally on the opposite side of the wheel. It consists of one warm color and one cool color.

Superman
Triadic schemes form a triangle, and contain 3 main hues spaced equally around the wheel.

How to shade using color

This section is dedicated towards how color is used in relation to shading, and not how to actually find a light source, and shade, as a disclaimer. A good example would be this before and after video thumbnail by Saviroosje2, which covers another good tutorial that teaches a more visually appealing digital shading and coloring job.

Thumbnail art from here: youtube.com/watch?v=A8lAxUgDGiA

When shading with color, it is a general good rule of thumb to have the shadows a bit cooler-colored and more saturated, and to have the highlights warmer, and less saturated than your key color. It is a subtle change, but is a great way from keeping your coloring job less monotone.

Additionally, by addressing that shadows needs more saturation, and that highlights need less, you can avoid over/under saturating your key colors, and save the saturation for things that pop out and provide contrast.

Saturation example

Color Context

Another thing to note is the context of colors against other colors. People perceive color differently when it is against a lighter vs darker environment. An example can be found in this popular optical illusion:

Optical Illusion -- Cylinder and Checkerboard

In this image, squares A and B are the same shade of grey. However, square A appears darker than shade B. This is because of the context interpreted around the squares; having the shadow be darker than a certain hue automatically makes it look lighter. Here are more examples of how the color red looks against the context of other colors. Note how vivid the circle looks compared to each of the other background colors. All of the circles have the same hue. You can also experiment in a program with how different colors/shades look against certain hues.

Red against different backgrounds

Colors and Emotion

Inside Out GIF

In color theory, certain colors trigger certain emotions in a viewer. A good guide to reference which emotion each certain colors are associated with are the characters in Pixar’s Inside Out. Generally, warmer colors such as a yellow Joy and a red Anger represent a warmer, or a more passionate emotion. Similarly, colder colors such as a blue Sadness, a purple Fear or a green Disgust represent colder, and less energetic emotions respectively. Below is a more in-depth chart depicting what certain colors symbolize.

Color Symbolism Chart
Source

This use of color is often used in storytelling aspects in a painting or an animation, for example with these contrasting scenes in Up.

Up scene happy
Up scene sad

The first scene shows warmer reds and yellows to indicate a sense of warmth, and happiness, whereas the second scene shows a lot of cooler blues and greens to indicate sadness.

Saturation and Emotion

Saturation also plays a role in addressing the tone of a scene. If you look at the Up scenes in the previous section, the top happy scene contains a lot more saturated, bright colors than the desaturated, darker hues on the bottom scene. Here, I’ve crudely drawn a face against an orange background and only changed the image’s saturation. See if you can identify a the differences in emotion between a more saturated vs a less saturated environment.

Saturation and emotion

When you combine color with saturation and brightness, you can further emphasize what you want your viewer to feel in your works.

Saturation + Color + Brightness and emotipn

A note on Color pickers and Swatches

The color picker -- Flash
Default Color Picker – Adobe Animate CC

This is the color picker, also known as the colour pallete, color sampler, color-o-matic-9000, or Billy. The alternative to the color picker is to use swatches, which consist of colors pre-picked by either you, a download, or the default system in whichever program you are using for your masterpiece. When using the color picker for the first time, it can be tempting to give up and use said swatches instead. If this accurately describes you, and you are using any version of Flash, I beg of you. Please do not use the default swatches. Now, this might be an unpopular opinion, and I apologize if you personally disagree, but the default color swatch in Flash looks to be the equivalent of a unicorn’s barf on LSD.

Default Flash swatches
Default Swatches – Flash

There is a better, more appealing color swatch than the default. A link to the swatch & instructions on how to download can be found HERE. Additionally, the zip file for the swatch shown below can be found HERE. It works with any version of Flash, and is a great improvement to the default swatches.

NTSC Flash Swatches
NTSC Swatches – Flash

If you are not into swatches, you have the ability to pick any RGB color ever with the mighty color picker. Here are a few things to note for a default color picker if starting out, as well as a recap of what’s been said on this post:

  • Try not to have a key color in one of the 4 corners (don’t have too much/too little saturation). Instead, save the vivid hues and the greys for things that need to pop out (extreme highlights/shadows, glowing objects, the subject of a painting, etc…). This would put a key color more in the middle of the square.
  • Limit your hue count and pallet for your work. Too many colors can clash and look unfavorable if you don’t know what you’re doing. If you do want a lot more colors on your pallet, start out with 1-3 key colors, then build up your pallet after roughing out what you want with those colors.
  • Keep color harmony in mind – when in doubt, use direct, analogous, or triadic colors for your pallet.
  • Observe color in the context of other hues
  • Experiment!
  • Share your finished experiments to Anim8 and to Hyun’s Dojo! (if you want)
  • Have fun, take your time, create a lot!

As you develop as an artist, you will find that there is a way of coloring that you like that might be different from this tutorial. This is perfectly fine! Although there are many “do’s” and “don’ts” when it comes to this post, if you have to break the rules to suit a coloring job visually appealing to you and your audience, then that is absolutely acceptable. Art is subjective to suit the appeal of the artist and the viewer, and its colors are no different.

Recent Articles

Sound, Syncing, and Sound Lines [Tutorial]

Learn how to sync like a pro without spending a penny!

Tips for a more Dynamic and Smooth Animation.

Making a dynamic animation is easy if you know the tricks the pros use. Even you can become a great animator.

What Producing An Animation Series Is Like For A College Student

Throughout the course of our lives, the animation industry has drastically changed thanks to those in the industry (especially now due to...

Hyun’s Animation Review: “Red Rain” by 9tailedBrush

Review of 9tailedBrush's "Red Rain" This is a new series of posts I wanted to start by reviewing some...

Related Stories

2 Comments

2
Leave a Reply

avatar
1 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
SoapyBubblesHeartOfTheStorm Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
HeartOfTheStorm
Member

Great article. I like the section on shading with color, and I love the custom color swatches; it’ll make picking a color much faster. I found and used the NTSC one you showed in the pic (the NTSC one’s on Animonger, you linked to a different one which has more subdued colors).