How to Change Colors in a Lottie Animation Online

Most Lottie recoloring jobs are not motion-design jobs. You already like the timing, easing, and composition. The issue is that the animation was exported in another brand palette, designed for light mode, or downloaded from a marketplace with generic colors. Opening After Effects for that kind of edit is slow and often impossible if you do not have the source file.

A browser-based Lottie color editor solves the practical version of the problem. It scans the JSON for editable fill, stroke, and gradient values, lets you map old colors to new ones, and shows the result immediately in a live preview.

Start by uploading the Lottie JSON or ZIP. The editor detects color values and groups them into a palette. Review the detected colors before changing anything; repeated values are often intentional tokens used across multiple layers.

Pick the color you want to replace and choose the new value with a picker or hex input. Good workflow is to replace the largest brand colors first, then adjust supporting neutrals, warning colors, highlights, and shadows. Preview each change instead of replacing everything at once.

When the animation looks right on both light and dark backgrounds, export the edited JSON or ZIP. The export preserves the animation structure, so developers can use the edited file in the same Lottie runtime they already planned to use.

Do not blindly replace every similar blue, red, or gray. Designers often use nearby color values to create depth, antialiasing, or subtle shadows. Replacing all of them with one flat value can make the animation look cheaper.

Test contrast after recoloring. A success checkmark that looks good on white may disappear on a tinted card. A dark-mode variant may need brighter strokes, not just inverted colors. Use preview backgrounds as part of the edit, not as an afterthought.

Remember that raster images are different from vector shapes. A color editor can change Lottie JSON color values, but it will not recolor embedded PNG screenshots or logos. For those, use an image replacement tool.

Color editing is perfect for brand matching, dark-mode variants, seasonal campaigns, client customization, product UI states, and small design-system changes. It is less suitable for rewriting the structure of an animation or changing a vector illustration into a different object.

If you need deeper motion changes such as keyframes, paths, masks, or easing curves, go back to the source file in After Effects. For palette work, the browser workflow is usually faster and safer.