Lottie colour editor
See every colour a Lottie uses and change each one everywhere at once, then save the same kind of file with nothing else in it changed. Free, with no account or uploads.
Every colour the file uses is listed, with how often. Change one and every use of it changes; it saves as the same kind of file it came as.
Drop a Lottie to change its colours
It plays as it is, drawn by ThorVG on your device.
- JSON
- LOTTIE
- TGS
Stays on your device. Nothing is uploaded.
A little help along the way
Follow these steps. Every option is explained underneath. Everything happens in your browser; nothing you draw or bring in is sent anywhere.
- Say what you want to makeChoose a moving logo or icon, a loading animation or an animated icon to open a small animation that already moves, ready to change. Open a file takes an SVG, a picture or a project you saved before; you can also drop an SVG on the page.
- DrawDraw rectangles, ellipses, polygons, stars and triangles, paths with the pen, and strokes with the pencil and brush. Fill closed areas with the bucket, join or cut shapes with the Shape Builder, and write words in the site's fonts.
- Animate with keysA key says what a part is like at one moment: its position, turn, size, opacity or colours. Set a key at one time and another later, and every frame between them is worked out for you.
- Choose the easingEach key says how the movement goes on to the next: Steady, Jump, Smooth, Speed up, Slow down, Speed up, slow down, Overshoot or Spring, or a curve of your own in the graph editor.
- Play itPlay the timeline to watch it. It can loop, play once or play there and back, and a work area plays only the part you are working on.
- Export itSay where it will go: social media or a video makes an MP4, a chat or an email a GIF, a website or an app an animated WebP with a clear background, and a still picture a PNG or SVG of one frame. Each file is checked before it is offered.
Questions people ask
- Which colours does it find?
- Every colour the file uses: fills, strokes, gradient stops and solid layers, inside precompositions too, whether still or animated, each listed with how often it is used.
- Does changing a colour change anything else?
- No. Each use of that colour changes at once, and nothing else in the file does. The file is played back by ThorVG before you download it.
- What kind of file do I get back?
- The same kind you dropped: a Lottie JSON stays JSON, a .lottie stays a .lottie and a .tgs stays a .tgs.
This page is the Animation maker, opened for this one job; every other tool it has is one press away. Each of its settings is explained on the Animation maker's own page.
Read the step-by-step guideKeep going
Guides
- How to change the colours of a Lottie animation
- How to make a 2D animation online for free
- How to animate a logo for free, without a watermark
- How to make a loading animation: spinner, dots or GIF
- How to make an animated icon for free
- What is easing in animation? Ease in and out, explained
- How to open a Lottie file and play it online
- What is a JSON animation file, and how do I open it?