Skip to content
Utiloom
Image Tools

Lottie Color Editor

Detect reusable solid colors in a Lottie file, swap them visually, and download an edited JSON instantly.

LocalNo retention
Guide, examples, and validation Show

About this tool

Replace brand colors in Lottie animations without editing raw keyframes by hand. Review the original and edited previews side by side before downloading.

Lottie Color Editor is useful when a motion file needs brand color updates without editing raw keyframes manually. It helps teams find reusable colors, swap them visually, and export a revised JSON that can go straight into implementation or review.

  • Extracts reusable solid color tokens from a Lottie JSON file and groups them by frequency.
  • Lets you replace colors visually and preview the edited animation next to the original.
  • Downloads the edited JSON directly in the browser for designer and developer handoff.

How to use Lottie Colors

Load the Lottie JSON, inspect the detected color tokens, and preview each replacement before downloading the edited file. If the animation uses gradients, images, or uncommon color patterns, check the preview carefully so you know which colors were actually changed.

When this tool is useful

  • Extracts reusable solid color tokens from a Lottie JSON file and groups them by frequency.
  • Lets you replace colors visually and preview the edited animation next to the original.
  • Downloads the edited JSON directly in the browser for designer and developer handoff.

Examples you can test

Load an example, compare the result with the expected output, then replace it with your own input.

Recolor a simple icon animation

Example input

Original color: #2563eb, new color: #0f766e

Expected output

Lottie JSON with updated fill or stroke colors

Useful for adapting a reusable animation to a new brand color.

Create a dark-mode variant

Example input

Light gray strokes changed to brighter neutral colors

Expected output

Adjusted animation colors for dark UI backgrounds

Preview the result because small strokes can disappear against dark surfaces.

Validation checklist

  • Preview the edited animation before using it in the product.
  • Check contrast against the actual UI background.
  • Keep the original Lottie file so color changes can be reversed.

Frequently asked questions

Does this edit every kind of Lottie color automatically?

It focuses on reusable solid color values commonly used in fills and strokes. Complex gradient or expression-driven colors may need manual editing.

Can I compare the original and edited animation together?

Yes. The tool shows side-by-side previews so you can verify the replacement before downloading the edited JSON.

Will editing colors break gradient fills or animated color keyframes?

The editor targets solid (flat) colors only. Gradients and keyframed color transitions are left untouched to avoid corrupting complex animations.

Can I swap one color across every layer at once?

Yes. When you change a detected color, every occurrence of that exact color value throughout the file is updated simultaneously.

Does the edited file keep the original animation timing and structure?

Yes. Only the color values in the JSON are modified. Frame rate, keyframes, layer order, and all other properties remain identical to the original.

Related tools

Keep the workflow moving

Continue with tools that handle a related input, output, or validation step.

Image

Lottie Inspector

Audit Lottie JSON structure, assets, and delivery risks.

Local
Image

SVG to PNG Converter

Validate SVG artwork and export exact-size PNG files.

Local
Image

Batch Image Optimizer

Resize, convert, and verify multiple images at once.

Local
Image

Image Watermark Tool

Preview, apply, and verify batch watermarks.

Local