How to Change Colors in a Lottie Animation

You found the perfect Lottie animation, but the colors don’t match your brand.

Maybe it’s blue and your website uses purple. Do you need to recreate the entire animation?

Usually, no.

Depending on how the animation was created and how you’re using it, you may be able to change its colors without rebuilding the animation from scratch.

In this guide, we’ll look at three ways to change Lottie animation colors and when to use each method.

Can You Change the Color of a Lottie Animation?

Yes, but the method depends on the animation.

The most common options are:

1. Edit the original source file
2. Modify supported Lottie JSON properties
3. Use runtime theming

The easiest method depends on whether you have access to the original animation file.

1. Change Lottie Colors in the Source File

If you have the original After Effects project, this is usually the best and safest option.

Open the animation and change the relevant:

• Fill colors
• Stroke colors
• Shape colors
• Gradient colors

Then export the animation as Lottie again.

This gives you the most control and is ideal when you need a specific brand color.

For example:

Original: Blue
#3B82F6

Brand version: Purple
#7C3AED

The animation’s motion and timing can remain unchanged while the visual style is updated.

Best for: Designers who have access to the original source file.

2. Change Colors in a Lottie JSON File

If you only have the exported .json file, you may still be able to change certain colors directly.

Lottie JSON contains information about shapes, layers, and their properties. Color values can be stored within these properties.

For example, a color may be represented using normalized RGB values rather than a hexadecimal value:

#FF0000

can be represented approximately as:

[1, 0, 0, 1]

However, not every Lottie animation is easy to recolor.

Simple shape fills may be straightforward, while animations containing gradients, masks, effects, or complex compositions can require additional work.

So avoid blindly replacing every color value in the JSON.

Best for: Simple animations where you understand the Lottie structure.

3. Use Runtime Theming

Runtime theming is useful when an animation needs to change colors dynamically while your website or app is running.

For example, a SaaS application might use:

Light Mode → Dark text / purple animation

Dark Mode → Light text / adjusted animation

This approach can also be useful for:

• Dark mode
• Light mode
• Multiple brands
• White-label products
• User-selected themes

Some modern .lottie workflows support runtime theming, depending on the player and implementation.

The important thing is that both the animation and the player need to support the theming features you’re trying to use.

Best for: Apps and products that need dynamic or multiple color themes.

Which Method Should You Use?

If you have the original After Effects file, edit the source and export again.

Or you only have JSON, inspect the animation before changing its properties.

And if your product needs dynamic colors or dark mode, consider a theming-capable Lottie workflow.

Why Can’t Every Lottie Color Be Changed Easily?

A Lottie animation may contain more than simple color fills.

It can include:

• Gradients
• Transparency
• Masks
• Blending
• Effects
• Multiple shape layers
• Embedded images

Changing one fill color won’t necessarily change every visual element.

For example, changing a shape’s fill won’t change an image embedded inside the animation.

That’s why it’s important to understand how the animation was created before attempting to recolor it.

Preview Your Lottie After Changing Colors

Always test the animation after making color changes.

Check for:

• Incorrect colors
• Broken gradients
• Transparency issues
• Unexpected visual changes
• Colors that change during playback

You can preview your animation using the Lottie Wizard Viewer before adding it to your website or app.

Lottie Wizard Viewer

A simple workflow is:

Edit → Export → Preview → Test → Implement

Frequently Asked Questions

– Can I change a Lottie animation color?

Yes. You can change colors through the original source file, supported JSON properties, or runtime theming, depending on the animation.

– Can I change Lottie colors without After Effects?

Sometimes. Simple animations may allow supported color properties to be modified directly, but complex animations may require the original source file.

– Can I change colors in Lottie JSON?

Yes, if the relevant color is stored as an editable property. The exact structure depends on how the animation was created.

– Can Lottie support dark mode?

Yes. Depending on the player and implementation, supported Lottie or .lottie workflows can be adapted for light and dark themes.

Conclusion :

You usually don’t need to recreate a Lottie animation just because its colors don’t match your brand.

Use the source file for the most control, JSON editing for simple changes, and runtime theming for dynamic applications.

Always preview the final animation before publishing it.

If you’re looking for ready-to-use animations for websites, apps, SaaS products, and other projects, explore the free and premium lottie animation

• Free Lottie Animation Collection
• Finance Payment Lottie Animations
• Halloween Lottie Animation Collection
• Best Loaders Lottie Animation Collection