# How do I change the colour of a Lottie animation?

> You can change Lottie colours in three ways: edit the colours in the file (in an editor such as LottieFiles Lottie Creator, or in the JSON), override them at runtime with the native APIs on Android and iOS, or use dotLottie themes. On the web, lottie-web has no colour API, so either edit the file or style named SVG layers with CSS.

Updated November 2026. Source: https://www.exodeui.com/questions/how-to-change-lottie-animation-color/

## Key takeaways

- Lottie stores colours as RGBA values from 0 to 1 in the JSON
- Android: addValueCallback with LottieProperty.COLOR_FILTER
- iOS: setValueProvider with ColorValueProvider and a keypath
- Web: edit the file, or name layers in After Effects and target them with CSS
- For dark mode or brand themes, consider dotLottie themes

## Frequently asked questions

### Can I change Lottie colours in React?

lottie-react uses lottie-web, so the web options apply: edit the animation data before passing it in, or style named SVG layers with CSS.

### How do I make a Lottie work in dark mode?

Export two versions, recolour at runtime on native platforms, or use dotLottie themes if your player supports them.

### Why does my colour change not apply?

Check the keypath. Colours can live in fills, strokes or gradients, and each needs the right property.

### Can I change gradient colours?

Yes, but gradients are stored differently from solid fills. Use an editor or the gradient property on native platforms.

## Related

- [Dark mode theme transitions](https://www.exodeui.com/learn/dark-mode-theme-transitions)
- [How to remove Lottie padding](https://www.exodeui.com/questions/how-to-remove-lottie-padding)
- [Best Lottie editors](https://www.exodeui.com/best-lottie-editors)
- [What are motion tokens?](https://www.exodeui.com/questions/what-are-motion-tokens)