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}

Fulvia

It's the SVG that has been assigned those colours, they are not in that JSON. If you're after that blue, its in the path fill of the 3rd g in the main g!... (rgb(57,131,220)) – Conation

@Conation sorry, I didn't quite get that, third g in the main g? – Fulvia

I haven't posted any SVG's, only a JSON, do you mean making a SVG and filling it @Stuart? – Fulvia

I followed your link, the blue colour you are wanting to change is set in the SVG... – Conation

Answer 1

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:

Siskin

Thank you, the number calc helped me to come up with my code below – Tear

Answer 2

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.

Calendre

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;      
  }
}

Bashkir

Answer 4

Do a search for "fl" in your json file and try changing k values under value "fl" by dividing each rgb value of your chosen color by 255

Handmedown

Not sure why this is downvoted, this is exactly correct. Though there are 4 values: [red, green, blue, alpha]. All are normalized between 0-1, so dividing by 255 is correct. Lottie allows only 10 uploads for editing with their editor. If you've surpassed that and find $240/year steep, this is exactly how to edit Lottie json file colors directly. – Scabby

Answer 5

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

lottie editor

Viguerie

Answer 6

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;
    }

Tear

Answer 7

You can edit the JSON file using the Lottie JSON Editor.

Note that this is NOT the Lottie online editor.

You don't need to do any conversion. Just pick a color using the color picker provided.

Mormon