How do I change the colour of a Lottie animation?

Colour changes are a top Lottie question because teams want one animation in brand colours, dark mode or several states.

Edit the file

In the JSON, a fill colour looks like "c": { "k": [1, 0.29, 0.11, 1] }, which is red, green, blue and alpha from 0 to 1. Find and replace works for simple files. Editors such as LottieFiles Lottie Creator let you pick colours visually, which is safer.

Android

animationView.addValueCallback(
  KeyPath("**"),
  LottieProperty.COLOR_FILTER
) { PorterDuffColorFilter(Color.RED, PorterDuff.Mode.SRC_ATOP) }

Replace "**" with a specific layer path to recolour only part of the animation.

iOS

let provider = ColorValueProvider(UIColor.systemRed.lottieColorValue)
animationView.setValueProvider(provider, keypath: AnimationKeypath(keypath: "**.Color"))

Web

lottie-web does not offer a colour override API. Two options: edit the file, or name layers in After Effects with a leading dot (for example ".accent") so the SVG renderer adds that class, then set fill in CSS. This only works with the SVG renderer.

If you change colours often, for themes or states, consider a format where colours are inputs. dotLottie supports themes, and Rive and ExodeUI let code change values at runtime. We make ExodeUI.