// Motion & Video
Free Lottie
Color Editor & Trimmer
Open a Lottie animation, change its colors, speed and length, resize it, and download the edited .json or .lottie. Everything happens in your browser.
| Property | Original | Edited |
|---|---|---|
| Frame rate | 30 fps | 30 fps |
| Frames | 60 | 60 |
| Duration | 2.00s | 2.00s |
| Size | 240 × 120 | 240 × 120 |
| Layers | 3 | 3 |
| File size | 2.6 KB | 2.6 KB |
Export
Your files stay on your device. Opening, editing and exporting happen in this browser tab; your animation is never uploaded. Privacy Policy
File
Open: loading-dots.json (2.6 KB)
Colors · 3
- #12B8861 use
- #6D4AFF1 use
- #FF3D001 use
Up to 5 colors, matched by lightness: darkest to darkest.
Timing
Result: 2.00s at 30 fps
Size
The artwork scales with the canvas, so it stays sharp at any size.
// Overview
What is Lottie Recolor and Trim?
Lottie is a JSON format for vector animations exported from After Effects or made in tools like LottieFiles, and played on websites and in apps. This free editor changes what you usually need to change before shipping one: its colors, speed, length and size. It reads and writes both .json and .lottie, with no account, no upload and no watermark.
- Price
- Free
- Signup required
- No
- Opens
- .json (Lottie) and .lottie (dotLottie), up to 50 MB
- Colors it edits
- Fills, strokes, gradients, solids, text and effect colors
- Timing
- Speed 0.25× to 4×, trim by frame
- Exports
- .json (minified or pretty), .lottie, copy to clipboard
- Where it runs
- In your browser; files are not uploaded
- Watermark
- None
// How It Works
Edit a Lottie file in five steps
Every change updates the preview and the file info straight away.
Open a file
Drop a Lottie .json or .lottie file, or start from one of the three samples. The preview starts playing straight away.
Recolor
Every color in the file appears as a swatch with a usage count. Change one, merge near-identical shades, or map the whole file to your palette.
Fix the timing
Speed it up or slow it down, and trim the start and end frame by frame. The info panel shows the new duration.
Resize if needed
Change the width and height; the artwork scales with the canvas so it stays sharp.
Export
Download a minified or pretty .json, a .lottie file, or copy the JSON straight into your code.
// Transparency
What the editor changes, and what it can't
How each edit is written into the file, so you know what to expect in your player.
How colors are found
The editor walks every layer, shape group and precomp in the file and collects fill, stroke, gradient, solid layer, text and effect colors, including each keyframe of an animated color. Alpha is kept when you change a color, and gradient opacity stops are left as they are.
How speed and trim work
Speed scales every time value in the file (keyframes, layer in and out points, time remapping and markers) by the same factor, so the frame rate stays the same and precomps stay in sync. Trimming shifts the main timeline so the kept range starts at frame 0.
How resizing works
The original layers are wrapped in one precomp that's scaled to the new canvas size. Nothing inside is redrawn, so parenting, masks and effects keep working.
What it cannot do
It can't change colors inside embedded images, colors set by expressions, or shapes and paths. The preview doesn't run expressions, so expression-driven motion may look different from your production player. From a .lottie with several animations, only the first one is edited, and themes or state machines aren't carried over.
// Examples
Three common edits
Illustrative: the tool's own sample animations, edited live by the same functions the editor uses.
Match a brand palette
The loading dots mapped onto a three-color brand palette with Replace with a palette, darkest color to darkest swatch.
One-color version for a dark UI
The same loading dots made monochrome in teal with Make monochrome. Each dot keeps its own lightness, so they stay distinct.
Shorter, snappier confirmation
The success check trimmed to its first 40 frames and played at 1.5×, so the whole thing finishes in under a second.
// More Tools
Other tools you may like
UI Design Analyzer
Score your UI across color, spacing, alignment, hierarchy, and typography. Instant feedback.
Brand QR Studio
Generate styled QR codes for URLs, WiFi, UPI, WhatsApp, and more. PNG & SVG export.
Logo Scale Tester
Preview your logo at 10 real-world sizes, from favicon 16px to billboard. No upload needed.
ATS Resume Builder
Build an ATS-friendly resume with a live score. Free PDF & DOCX export. No signup required.
Color Palette Generator
Generate harmonious palettes or extract colors from any image. Export as CSS, Tailwind, or SCSS.
Indian Language Typing Tool
Type phonetically in English and get Hindi, Punjabi, Tamil, Telugu, Bengali and 6 more Indian scripts instantly.
Free Quote Creator Online
Free quote maker online. Make quote images for Instagram with custom fonts and colors. No watermark, no signup.
Font Pairing Preview
Preview 20 handcrafted Google Font pairings on a real website layout. Find your heading + body combo and copy the CSS.
YouTube Keyword Tool
Explore real YouTube autocomplete suggestions from one seed keyword. Filter by short/long-tail and intent, copy as tags or CSV.
Lower Thirds Maker
Design animated name-and-title overlays and export transparent WebM, PNG sequence or PNG for your video editor.
SVG Line Draw Animator
Make a logo, signature or illustration draw itself, then export an animated SVG, HTML and CSS, or React.
Animated Email Banner Maker
Build an animated GIF banner for newsletters with a live file-size meter, first-frame fallback and HTML snippet.
App Store Screenshot Maker
Frame and caption your app screenshots, then export every App Store and Google Play size in one ZIP.
3D Icon Maker
Turn an SVG icon or logo into a 3D icon in clay, glass or metal. Export a transparent PNG or a GLB file.
Marriage Biodata Maker
Make a marriage biodata in English, Hindi or Punjabi with six designs and your photo. Free print-ready PDF, no watermark.
// FAQ
Frequently asked questions
What is a Lottie file?
Lottie is a JSON format for vector animations. Designers export it from After Effects with the Bodymovin plugin or make it in tools like LottieFiles, and developers play it on websites and in iOS and Android apps. Because it's vector data, it stays sharp at any size and is usually much smaller than a video or GIF.
Is the Lottie editor free?
Yes. Opening, editing and exporting are free, with no signup, no daily limit and no watermark. Files can be up to 50 MB each.
What happens to my animation file?
It stays on your device. The file is opened, edited and exported in your browser tab and is never uploaded to our server. If the animation links to images hosted on another website, your browser loads them from there for the preview.
Does it work with dotLottie (.lottie) files?
Yes. It opens .lottie files (both the original and the newer 2.0 layout), inlines any images they contain, and can export your edit as a .lottie or a plain .json. If a .lottie holds several animations, the first one is edited, and dotLottie themes and state machines aren't carried over.
Why didn't some colors change?
Three usual reasons: the color is inside an embedded image (a PNG or JPG in the file), it's set by an After Effects expression that recalculates it at runtime, or it was merged into a different swatch by the Merge similar colors slider. Set the slider to Exact only to see every distinct color.
How does changing the speed work?
The editor scales every time value in the file (keyframes, layer in and out points, time remapping and markers) by the same amount, so the frame rate stays the same and nested precomps stay in sync. 2× plays twice as fast and halves the duration; 0.5× doubles it.
Will the file size change?
Usually only slightly. Colors are rounded to four decimal places, and minified JSON drops all whitespace, which can make it smaller than the original. Pretty print makes it larger but easier to read. Resizing adds one small wrapper precomp. The file info panel shows the size before and after.
Can I use edited animations in commercial projects?
The editor adds no license or watermark of its own, so the rules are those of the animation you open. Files you made yourself are yours to use; for animations from LottieFiles or other libraries, check the creator's license before using an edited version commercially.
// Built by
Nitin MongaDesigner and digital product builder creating web experiences and tools since 2013.
Built so designers and developers can fix a Lottie animation's colors, timing and size before shipping it, without reopening After Effects or paying for an editor.
Local content processing · Version 1.0 · Last updated:
How it works, data handling & limitations
- How it works
- The file is parsed in the browser and every color in its layers, shape groups and precomps is collected by JSON path. Edits are written into a copy: colors keep their alpha, speed scales every time value, trim shifts the main timeline, and resizing wraps the layers in one scaled precomp. The preview uses lottie-web without its expression engine; .lottie files are read and written with JSZip.
- Data & privacy
- Your animation stays in your browser. The tool does not upload it to our server, store it in a database or log downloads. If an animation links to images on another website, your browser loads them from there when previewing. Site analytics, ads and normal page requests still apply.
- How we evaluate/test it
- Color collection and replacement (static, keyframed and gradient), palette mapping, speed, trim, resize and .lottie packing have automated tests on sample files. The three samples were checked in Chrome on desktop; there is no automated test across every Lottie player.
- Limitations
- Colors inside embedded images or set by expressions can't be changed, and shapes and paths can't be edited. The preview doesn't run expressions, so expression-driven motion may differ from your player. Only the first animation in a multi-animation .lottie is edited, and dotLottie themes and state machines aren't kept.
Use the contact form to report a bug, an incorrect result or a privacy concern. Include the tool name and result link when available.
Changelog
- Launched with color swatches (fills, strokes, gradients, solids, text and effect colors), palette mapping, monochrome and invert, speed, trim and resize, plus .json and .lottie import and export.