Change Lottie animation colors without After Effects. Upload, edit, download – all in your browser.
Drag & drop your file here or click to browse
Only .json files (max. 10MB)
Upload a Lottie JSON file to see the preview
Need to edit Lottie file colors but don't have After Effects? You're in the right place. Our Lottie color editor online free tool lets you change animation colors in seconds – no design software required, no subscriptions, no complicated workflows.
Whether you've downloaded a Lottie animation from LottieFiles, received one from a designer, or exported one from After Effects yourself, you can now customize its colors instantly. Match your brand, create dark mode versions, or just experiment – all without touching the original source files.
Traditionally, modifying colors in a Lottie animation required going back to the original After Effects project. Not everyone has After Effects. Not everyone knows how to use it. And even if you do, it's a time-consuming process for something as simple as swapping a color.
Drag and drop or click to browse. We accept standard .json files up to 10MB.
Our algorithm scans your animation and displays every unique color, including animated keyframe colors.
A color picker appears. Enter a hex code directly or use the visual picker. Changes apply instantly.
Watch your animation play with the new colors. Adjust the background to see how it looks on different surfaces.
One click, and you have a new Lottie JSON file ready to use.
The entire process takes less than a minute. No After Effects installation. No design skills. No account creation.
There are other ways to recolor Lottie online, but here's why thousands of developers and designers choose our tool:
Your Lottie files never leave your computer. All color editing happens locally in your browser using JavaScript. We can't see your files – they're completely private.
Unlike basic tools, we detect colors inside animation keyframes. If a color changes during the animation, we'll find it and let you edit each state individually.
See your changes immediately in the built-in Lottie player. Switch backgrounds between white, gray, dark, and checkerboard to see how your animation looks in different contexts.
Experimented with colors and want to start over? Click "Reset to original colors" to instantly restore everything. No need to re-upload the file.
Our users come from diverse backgrounds, but they share common needs:
Downloaded a beautiful animation but the colors don't match your brand? Recolor it yourself in under a minute.
Your app has a dark theme? Quickly swap light colors for dark ones, or adjust for better contrast.
Testing which color scheme converts better? Create multiple versions without involving designers.
Holiday promotions or event-specific branding? Make temporary color changes yourself.
"Make the blue more purple" – make the change directly instead of going back to After Effects.
Experiment with different color palettes before committing to a final design direction.
Lottie animations store color data in a specific JSON structure. Each shape, fill, and stroke can have a color property (c) with either a static value or animated keyframes.
Parses the entire JSON structure recursively
Identifies all color properties in layers, shapes, and assets
Extracts both static colors and keyframe-animated colors
Groups identical colors so you can change all instances at once
Converts between Lottie's 0-1 RGB format and standard hex codes
Updates the JSON in memory (never uploaded) as you make changes
The result is a clean, properly formatted Lottie JSON that works exactly like the original – just with your new colors.
To get the most out of the Lottie color editor:
Check how your animation looks on both light and dark surfaces. Colors that work on white may have poor contrast on dark backgrounds.
If you see a lightning bolt (⚡) icon, that color is animated. Check both the start and end keyframe colors for a consistent look.
Maintain sufficient contrast between foreground and background elements for accessibility.
After downloading, test your modified Lottie file in your actual application to ensure it looks correct in its final context.
We built this tool with privacy as a core principle. This is especially important for agencies and enterprises working with confidential brand assets or unreleased projects.
No uploads – Your Lottie files are processed entirely in your browser. They never touch our servers.
No tracking – We don't track which files you edit or what colors you choose.
No accounts – No registration means no personal data collection.
Open processing – The JavaScript runs in your browser; you can inspect exactly what happens.
Use our free Lottie Color Editor: upload your Lottie JSON file, click on any color swatch to change it, preview your changes in real-time, and download the modified file. No After Effects or design software needed – everything happens in your browser.
Yes, completely free! Our Lottie color editor has no hidden fees, no premium tiers, and no usage limits. You can edit as many animations as you want without paying anything.
No registration or login is required. Just open the tool and start editing immediately. We don't collect personal information or require email signups.
No, your files never leave your device. Our Lottie color editor runs 100% in your browser using JavaScript. We cannot see, access, or store your files – they remain completely private.
Yes! Unlike basic tools that only handle static colors, our editor detects and modifies colors within animation keyframes. Look for the lightning bolt icon (⚡) next to animated colors.
We support standard Lottie JSON files (.json). If you have a .lottie (dotLottie) file, you'll need to extract the JSON first using a dotLottie converter.
Upload your Lottie file, and our tool will automatically extract all colors used in the animation. Click any color swatch to open a color picker, enter your brand's hex codes, and download the recolored animation. The live preview shows changes instantly.
Yes! Click the "Reset to original colors" button to instantly revert all colors to their original values. You can then start fresh or make different changes.