A Guide to Color Theory for Motion Design

Motion design isn't just about the way elements move.

Great motion design also uses the right colors. After all, colors affect how viewers will react, where they pay attention to and if they pay attention at all.

So how do you make sure your colors work? Here’s what you need to know about choosing – and applying – the right colors for your motion design projects. Then, we’ll go through how you can use the LottieFiles Color Palette feature to quickly apply awesome color combinations to your animations.

A brief guide to color theory

How do other designers know which colors look good together? Do they rely on some mystical inner intuition? The answer is a bit less exciting. Designers generally refer to color theory, which is a set of principles – guided by art and science – for creating pleasing color combinations.

Frankly, color theory is a huge subject that is deeply connected to color psychology, culture, the relationships between colors and more. Universities offer entire courses dedicated to it. But even if your knowledge of color theory is limited, no worries – you can start applying just the basics to your motion design projects. Here are a few concepts that can help, as well as several tips for mastering colors in animations.

The color wheel

The color wheel is a chart that shows the relationships between colors. It divides the spectrums of color into 12 basic colors, placed next to each other in a rainbow arrangement. These colors are grouped into primary colors, secondary colors and tertiary colors:

• Primary colors – These are colors that form the base of the color wheel (e.g. yellow, red, blue). They can’t be formed by combining other colors.
• Secondary colors – These colors are made by combining primary colors (e.g. green, orange, purple).
• Tertiary colors – These colors are made by combining primary and secondary colors (e.g. yellow-orange, orange-red, red-purple, blue-purple and blue-green).

You can use a color wheel to find color harmonies – that is, combinations of colors that look good together – more on this later.

Hue, value and saturation

Each color has three basic components: hue, value and saturation.

• Hue – Hue refers to the color itself (e.g. ‘green’ or ‘yellow’).
• Value – Value refers to the lightness or darkness of a color.
• Saturation – Saturation refers to the intensity of a color.

The hues, values and saturation of your colors matter as they can change the mood of your motion design, how audiences emotionally react to it and which elements stand out.

Tints, tones and shades

You may also come across the terms tints, tones and shades. These are different types of colors that are made by combining a hue with whites, grays or blacks. Experimenting with tints, tones and shades can help you create more variation when choosing the right colors.

• Tint – A tint is a hue with white added to it (e.g. the color pink is a tint created by adding red and white).
• Tone – A tone is a hue with gray added to it (e.g. the color beige is a tone created by adding yellow and gray).
• Shade – A shade is a hue with black added to it (e.g. the color navy is a shade created by adding blue and black).

Color harmonies

Color harmonies are simply combinations of colors that look good together. Designers use the color wheel to identify these combinations. There are many types of color harmonies, but a few popular ones include:

Monochromatic

A monochromatic color palette is based on only one hue, with variations in palette created by changing the value and saturation of the hue. This is the easiest palette to create – since it’s based on only one hue, it’s hard to accidentally pick out colors that clash with one another.

Analogous

An analogous color palette uses three colors that are next to each other on the color wheel. One color is typically used as the base color, while the other two are used as accents.

Complementary

A complementary color palette uses two colors that are on opposite sides of the color wheel. Since they are opposites, they create high contrast. These colors are typically expanded using variations of value and saturation.

Triadic

A triadic color palette uses three colors that are evenly spaced apart on the color wheel. Like the complementary color palette, this produces colors that have high contrast.

How to choose great color combinations

Okay, so how do you apply your newfound knowledge of color theory into choosing the right colors? Here are a few common ways.

a) Strive for color harmony

If you’re creating a color palette from scratch, it’s useful to look at the color harmonies we went through above. Choose an initial color, then use a color harmony pattern to pick out other colors that make up your palette. You can use online tools, such as Adobe’s Color Wheel, to automatically pick out colors based on a specified color harmony.

b) Use a color palette generator

Color palette generators can help you automatically create pleasing color palettes. Some generators also allow you to browse palettes that other users have created for inspiration. Use these generators to instantly create your palette, or use them as a starting point to generate initial colors, then tweak them until you’re happy.

c) Pick colors from an image

A great way to create a color palette is to get inspired by photography. There are tools that can automatically extract a color palette from an image or photo – including the Color Palette feature on the LottieFiles Mobile App and LottieFiles for Figma plugin. Nature photography can be especially useful for creating great-looking palettes.

5 tips for using colors in motion design

Creating a great color palette is one thing, but actually using it in motion design is a whole different beast. Here are a few tips that can help.

1. Use the 60-30-10 rule for balance

The 60-30-10 rule is an interior design technique, but it also applies to motion design. This rule suggests that you should dedicate 60% of your composition to a primary color, 30% to a secondary color and 10% to an accent color.

For example, check out the animated character above. Here’s a breakdown of the colors used:

• Around 60% is in shades of gray or black
• Around 30% is in shades of light brown
• Around 10% is in shades of pink or red

This rule helps you estimate how much of each color to use, so you avoid visual clutter in your composition. But like all design rules, the 60-30-10 rule isn’t a precise formula that you absolutely have to follow. Use it as a guideline, but don’t feel constrained by it.

2. Use contrast and color discordance to draw attention

What happens when you have many elements in a scene, in similar colors? Well, nothing really stands out, even if they’re animated. That’s why contrasting colors are useful – they can help draw your viewer’s attention to a particular element. For example, in the animation above, the bright green draws your attention immediately to the UFO beam, even though the entire scene is filled with background and foreground elements.

To create contrast, pick out colors that are further apart on the color wheel. To increase contrast, you can also adjust the value and saturation of a color.

Another way to draw attention to an element is to use color discordance. This is when you use a color that clashes with the rest of the color palette. For example, the animation above seems to have an analogous color palette of blue and green – except for the orange house, which stands out against the rest of scene.

3. Use grays and blacks to make animation stand out

On the surface, grays and blacks can seem dull, but using them as background colors or outlines can make your animation stand out. For example, in the animation above, the dark background creates high contrast against the ghost and speech bubble, making them stand out – and almost providing an illusion of depth.  

To learn more, here’s what artists Lana Simanenkova, Jordan Coelho and Sander Van Dijk shared with CopyCat, a motion design YouTube channel, on how to use dark colors in motion design.

4. Use consistent colors

When you’re working with motion design, remember to keep your colors consistent. This means that if you’re displaying an orange cat in a certain frame, and you’re aiming for a semblance of realism, make sure to use the same orange color in subsequent frames. Unless, of course, a narrative event (say, stepping into a puddle of mud) changes the color of the cat.

Keeping consistent colors may sound obvious. But it can get tricky when you’re animating with shadows and highlights, as you may work with many variations of the same hue.

5. Use color psychology to evoke emotions

Color psychology is the study of how colors affect mood, emotions and even behaviors. Using the right colors can be useful to evoke certain emotions – and as a designer, what could be more powerful than being able to affect someone through your artistic creations?  

In color psychology, colors are associated with certain meanings or emotions. Here are some common associations:

• Blue – peace, trust, loyalty, cold
• Red – love, passion, excitement, danger, anger
• Yellow – happiness, hopefulness, energetic
• Orange – excitement, fun, creativity
• Green – harmony, natural, freshness, jealousy
• Purple – spirituality, royalty, ambition, fantasy
• Brown – stable, simple, natural, outdoors
• Black – elegance, formality, mystery, power
  

Not convinced? Take a look at the two animations above. While they’re both exactly the same animations, the one in green looks harmonious, almost peaceful. But the one in purple has an element of fantasy, as if the character is embarking on a mystical journey.

However, there’s a huge caveat with color psychology – namely, that there are too many influences that affect how someone may perceive a color. These influences could include the context the color is used in, your cultural environment, upbringing, personal experiences and even the language you use. For example, the color white is associated with weddings and purity in Western culture. In some Asian cultures, it represents death and funerals.

But this doesn’t mean that color psychology is complete hogwash. There are studies that suggest colors have a real impact on psychological functioning. For example, this study from 2014 suggests that the color red could undermine the intellectual performance of students in China.

Here’s how the LottieFiles’ Color Palette feature can help

Now that you’ve chosen the perfect colors, and learned a bit of how to use them effectively, how do you apply them to motion design elements? Here’s where LottieFiles’ Color Palette comes in. This feature allows you to change the colors of a Lottie animation (a customizable, lightweight animation file format) in an instant. Here’s what you can do with it:

• Apply your own custom colors – Choose from thousands of free animations on LottieFiles, then make it fit your brand or visual aesthetic by applying your own custom colors. Use the tips and concepts above to pick out the right colors for your projects!
• Experiment with curated palettes – Don’t have a color palette, or the time to create one? Use our preset palettes. These curated palettes automatically apply pleasing color combinations, so you can create great-looking animations without knowing about color theory.

Here’s how to start using the Color Palette feature:

• Search for animations on LottieFiles or explore featured animations.
• Click on any animation.
• Scroll to the Color Palette section.

• Choose one of the preset color palettes available, or click Show more to see other palettes.
• Choose any palette to see the animation’s colors change instantly.

• You can also pick out your own custom colors by clicking + New palette.
• Once you’re happy with the colors, click Upload to my Private Animation.

And that’s it! You can check out the animation you’ve customized in your private animation dashboard. Want to customize animation colors on the go, or in your favorite design tool instead? The Color Palette feature is also available in the LottieFiles Mobile App and the LottieFiles for Figma plugin.

Use the right colors (and more) with Lottie animations

In short, knowing the basics of color theory – and how to effectively apply colors – can help elevate merely nice-looking animations to truly amazing motion design.

And when you work with Lottie, it’s really easy to apply your own colors to animations. Use the LottieFiles Color Palette feature to instantly apply these colors, or use it to experiment with new colors based on curated, preset palettes.

But if you need precise control over these colors, check out how to edit the colors of a Lottie animation with the Lottie Editor. The Lottie Editor allows you to change the colors of individual elements. Besides that, you can also use it to customize sizes, speed, frame rates and more.

You can even take it a step further and add interactivity – for example, animating a button in response to a click. With LottieFiles, adding customization and interactivity to your motion design is easy.