Lottie Animation JSON cannot find the color

Question

So, I have the following json(it is an animation for Lottie). I am trying to find where the color for the animation itself sits, I cannot find it. Any help would be truly appreciated! To see the animation in the browser click here. The JSON for it is this, I cannot post a prettified JSON because StackOverflow's character limit is 30k:

{"ip":0,"fr":60,"v":"5.1.20","assets":[],"layers":[{"ty":4,"nm":"flip","ip":0,"st":0,"ind":4,"hix":2,"ks":{"o":{"a":1,"k":[{"t":0,"s":[0],"e":[0],"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"t":11,"s":[0],"e":[100],"i":{"x":[0.515],"y":[0.955]},"o":{"x":[0.455],"y":[0.03]}},{"t":12}]},"or":{"a":0,"k":[0,0,0]},"a":{"a":0,"k":[13,13,0]},"p":{"s":true,"x":{"a":1,"k":[{"t":0,"s":[13.000000000000002],"e":[13],"i":{"x":[0.515],"y":[0.955]},"o":{"x":[0.455],"y":[0.03]}},{"t":25}]},"y":{"a":1,"k":[{"t":0,"s":[13],"e":[13],"i":{"x":[0.515],"y":[0.955]},"o":{"x":[0.455],"y":[0.03]}},{"t":25}]}},"rx":{"a":0,"k":0},"ry":{"a":0,"k":0},"rz":{"a":0,"k":0},"s":{"a":0,"k":[100,100]}},"shapes":[{"ty":"gr","nm":"flip shape group","it":[{"ty":"sh","ks":{"a":1,"k":[{"t":0,"s":[{"c":true,"v":[[16.305638023935934,16.791295705480064],[9.69337294159993,10.082096893728064],[0,0],[26,26]],"i":[[0,0],[2.665677558939981,2.6058615175920092],[0,0],[0,0]],"o":[[-2.993586435256004,-3.150346206019975],[0,0],[0,0],[0,0]]}],"e":[{"c":true,"v":[[16.305638023935934,16.791295705480064],[9.69337294159993,10.082096893728064],[0,0],[26,26]],"i":[[0,0],[2.665677558939981,2.6058615175920092],[0,0],[0,0]],"o":[[-2.993586435256004,-3.150346206019975],[0,0],[0,0],[0,0]]}],"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"t":12,"s":[{"c":true,"v":[[16.305638023935934,16.791295705480064],[9.69337294159993,10.082096893728064],[0,0],[26,26]],"i":[[0,0],[2.665677558939981,2.6058615175920092],[0,0],[0,0]],"o":[[-2.993586435256004,-3.150346206019975],[0,0],[0,0],[0,0]]}],"e":[{"c":true,"v":[[7,26],[0,19],[0,0],[26,26]],"i":[[0,0],[0,3.8659999999999997],[0,0],[0,0]],"o":[[-3.86599,0],[0,0],[0,0],[0,0]]}],"i":{"x":[0.22],"y":[1]},"o":{"x":[0.19],"y":[1]}},{"t":25}]}},{"ty":"st","o":{"a":0,"k":0},"w":{"a":0,"k":0},"c":{"a":0,"k":[0,0,0,0]},"lc":3,"lj":1,"ml":1},{"ty":"fl","o":{"a":0,"k":100},"r":1,"c":{"a":0,"k":[0.2235294117647059,0.5137254901960784,0.8627450980392157,1]}},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0}}]}],"op":25},{"ty":4,"nm":"non-flipped","ip":0,"st":0,"ind":2,"hix":1,"ks":{"o":{"a":1,"k":[{"t":0,"s":[100],"e":[100],"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"t":10,"s":[100],"e":[0],"i":{"x":[0.515],"y":[0.955]},"o":{"x":[0.455],"y":[0.03]}},{"t":12}]},"or":{"a":0,"k":[0,0,0]},"a":{"a":0,"k":[13,13,0]},"p":{"s":true,"x":{"a":1,"k":[{"t":0,"s":[13],"e":[13],"i":{"x":[0.515],"y":[0.955]},"o":{"x":[0.455],"y":[0.03]}},{"t":25}]},"y":{"a":1,"k":[{"t":0,"s":[12.999999999999998],"e":[13],"i":{"x":[0.515],"y":[0.955]},"o":{"x":[0.455],"y":[0.03]}},{"t":25}]}},"rx":{"a":0,"k":0},"ry":{"a":0,"k":0},"rz":{"a":0,"k":0},"s":{"a":0,"k":[100,100]}},"shapes":[{"ty":"gr","nm":"non-flipped shape group","it":[{"ty":"sh","ks":{"a":1,"k":[{"t":0,"s":[{"c":true,"v":[[19,0],[26,7],[26,26],[0,0]],"i":[[0,0],[0,-3.86599],[0,0],[0,0]],"o":[[3.8659999999999997,0],[0,0],[0,0],[0,0]]}],"e":[{"c":true,"v":[[9.909566681238312,9.824443462512633],[19.224521749991286,19.02647389376546],[26,26],[0,0]],"i":[[-2.145568112502759,-2.2020304312528305],[-3.287074506362524,-3.2999372823432562],[0,0],[0,0]],"o":[[2.255829134412066,2.3821960695170787],[0,0],[0,0],[0,0]]}],"i":{"x":[0.675],"y":[0.19]},"o":{"x":[0.55],"y":[0.055]}},{"t":12}]}},{"ty":"st","o":{"a":0,"k":0},"w":{"a":0,"k":0},"c":{"a":0,"k":[0,0,0,0]},"lc":3,"lj":1,"ml":1},{"ty":"fl","o":{"a":0,"k":100},"r":1,"c":{"a":0,"k":[0.9058823529411765,0.8901960784313725,0.8745098039215686,1]}},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0}}]}],"op":25},{"ty":4,"nm":"back","ip":0,"st":0,"ind":1,"hix":3,"ks":{"o":{"a":0,"k":100},"or":{"a":0,"k":[0,0,0]},"a":{"a":0,"k":[13,13,0]},"p":{"s":true,"x":{"a":0,"k":13},"y":{"a":0,"k":13}},"rx":{"a":0,"k":0},"ry":{"a":0,"k":0},"rz":{"a":0,"k":0},"s":{"a":0,"k":[100,100,100]}},"shapes":[{"ty":"gr","nm":"back shape group","it":[{"ty":"sh","ks":{"a":0,"k":{"c":true,"v":[[0,26],[26,26],[0,0]],"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]]}}},{"ty":"st","o":{"a":0,"k":0},"w":{"a":0,"k":0},"c":{"a":0,"k":[0,0,0,0]},"lc":3,"lj":1,"ml":1},{"ty":"fl","o":{"a":0,"k":100},"r":1,"c":{"a":0,"k":[0.9058823529411765,0.8901960784313725,0.8745098039215686,1]}},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0}}]}],"op":25}],"op":25,"w":26,"h":26}

Answer 1

You can use lottie-colorify library to get colors or change them from code.

And the colors themselves are kept in an array in obj.c.k in [r, g, b] format, however those are in color/255 format, so you will get each color of array in range of 0-1.

For example [255, 255, 255] is becoming [1, 1, 1] in Lottie JSON.

Answer 2

After @Mikayel Saghyan 's answer, I figured out how to change color. I used this animation and I changed yellow color to red color. Just find your target color's RGB numbers. 255, 203, 33 is the yellow color on my case. Calculate color/255 for example 203/255 is 0.79607843137. Search that number in the file in android studio. You will see where the color is written. After that change the numbers with desired colors division result by 255. 255, 82, 82 is my desired color, and Here's the result:

Answer 3

Mikayel solution works very well.

You can also target the path you want to change like this:

svg {
  path[fill="rgb(0,51,161)"] {
    fill: red;      
  }
}

Answer 4

I bumped into this today as well. I don't know why we need a 24k npm lib like lottie-colorify to solve it (side note: it didn't work for me and it digs a dependency rabbit hole). Just do it this way:

    import { Lottie, unwrapJsonModule } from 'react-lottie-v2';

    // your Lottie JSON object (deserialized and unwrapped) is "animation"    
    const animation = unwrapJsonModule(animationJSON);

    // in case we're dealing with a HEX color as a string like #ffffff
    // we need to transform it into numeric, decimal rgb
    const rgbPrimaryColor = hexToRgb('#ffffff');
    

    // if you've got numeric, decimal rgb values like [255, 255, 255] already, we need to divide by 255 to get a factor value that is Lottie compatible
    const targetColor = {
        r: rgbPrimaryColor.r / 255,
        g: rgbPrimaryColor.g / 255,
        b: rgbPrimaryColor.b / 255,
    }

    if (animation.layers && animation.layers[1]) {
        // ef[0] -> primary color
        // ef[0].ef[0] -> data vector for effective values
        animation.layers[1].ef[0].ef[0].v.k = [targetColor.r, targetColor.g, targetColor.b];

        // ef[1] -> secondary color
        // ef[1].ef[0] -> data vector for effective values
        animation.layers[1].ef[1].ef[0].v.k = [targetColor.r, targetColor.g, targetColor.b];
    }

Now you can use animation as animationData. In React like:

<Lottie
    animationData={animation}
     {...props}
/>

There is more colors defined in layer 2 (index: 1). You can do all kind of changes there. Just log:

console.log(animation.layers[1])

and dig a bit in the data model.

The hexToRgb function at hand:

    export const hexToRgb = (hexColor: string) => {
        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hexColor);
        return result ? {
            r: parseInt(result[1], 16),
            g: parseInt(result[2], 16),
            b: parseInt(result[3], 16)
        } : null;
    }

Answer 5

You can edit a Lottie json file with the help of the Lottie Editor

lottie editor