Recoloring an animation

Use a color palette when the motion is right but the artwork does not match the Webflow site. Recoloring writes one fixed set of colors into a new Workspace file. It is different from switching themes at runtime.

Choose a palette or a theme

Goal	Use
Replace detected colors with one fixed palette	Palette controls
Switch between prepared variants, including light and dark modes	Themes
Edit individual layers, gradients, timing, or structure	Lottie Creator

Open the palette controls

Open an animation from Explore or Workspace.
Play the complete preview to confirm that the motion is suitable.
Select the palette swatch below the preview to expand the color controls.

The selected palette is applied to the preview immediately. Keep the preview background and size consistent while comparing results.

Apply a preset palette

Select a palette under Preset palettes. The app replaces detected editable colors together, so play and scrub through the entire result. A source color can appear in more than one layer or animation state.

Select Reset to restore the original colors before trying another palette.

Create a custom palette

Select New palette under Custom palettes.
Select a color swatch and choose a replacement color.
Add more colors as needed, up to five colors in one palette.
Select the completed palette to apply it to the animation.
Play and scrub through the result on a representative page background.

You can remove individual colors or delete a custom palette that is no longer needed.

Save the recolored source before insertion

When a palette is active, Insert animation changes to Save and insert animation. The app saves the recolored result as a new Workspace file before it can be inserted into Webflow.

Select Save and insert animation.
If prompted, choose the intended Workspace, project, and folder. When the account has one Workspace and one default project, the app saves there directly.
Wait for the saved Workspace file to open.
Confirm that the intended Webflow page element or container is still selected.
Select Insert animation to add the saved result to the page.

Name the saved file so it is distinguishable from the public or team-managed source. The saved recolored file becomes the production source for later updates.

Recolor a multi-animation file

The palette applies to the currently selected child animation. Switching to another child resets the active palette. When you save, the app rebuilds the dotLottie file with that child recolored and keeps the remaining animations in the bundle.

Before insertion, reopen the saved file and confirm the active child animation, its ID, and the complete bundle.

Understand feature changes

Palette replacement and runtime themes are separate preparation paths. Applying a palette returns the theme selection to Default. If a state machine is active, return to regular playback before recoloring. The app deactivates the state-machine preview while it prepares the recolored JSON as regular animation data.

Use a theme instead when the published player must switch variants at runtime. Reopen the saved file and verify any advanced features before insertion. Use Lottie Creator when the source needs both structural editing and advanced dotLottie features.

Limitations

Palette replacement changes detected editable vector colors. It does not recolor embedded raster images.
Some gradients and complex color effects may not map cleanly to a palette.
Reused source colors can change in several layers or states at once.
A fixed recolored source is not a live connection to a Workspace theme.
Use Lottie Creator for layer-specific colors, gradient editing, or structural changes.