👋 Greetings! In this article, we will look at how to replace colors in lottie animations across multiple exercise JSON files using the Visual Studio Code editor. We will be performing color replacements from the rgba (0-1) format to another color based on queries to ChatGPT for converting a color from HEX to rgba. Known arrays of original colors will be replaced with the required colors.

So, to begin with, you will need to download the Visual Studio Code (VS Code). It is one of the best code editors for working with multiple files, and it will enable you to replace colors with ease.

You will also need to download all the exercises and place the JSON files in a separate folder. ❗ Be sure to make a copy of this folder in case something goes wrong.

📋 Now let’s proceed to the main steps.

📥 Step 1: Preparing the Required Colors

First, gather all the colors in HEX format that you want to use for replacement. For example, you need to change the color of the shirt/nearest sneaker to #E9A111 (a shade of orange) and the color of the far sneaker to #E99911 (slightly darker than the previous color), and the color of the front pants to #505050 (dark gray) and the back pants to #3C3C3C (darker than the previous color). ❗ Using multiple shades of one color is necessary for side view exercises, while in front view exercises, the color will be replaced with the first one, i.e., #E9A111 and #505050, respectively.

If you haven't decided on the colors yet, you can choose them in the Lottie Editor by opening any of the downloaded exercises. For more details on how to do this, you can watch here.

🔄 Step 2: Converting HEX to RGBA (0-1) Using ChatGPT

We will use ChatGPT for conversion. Simply enter the following queries into ChatGPT to get the RGBA (0-1) values:

Convert colors #E9A111, #E99911, #505050, #3C3C3C to RGBA (0-1) format like [0.847000002394,0.607999973671,0.497999991623,1].

❗ It is important to show ChatGPT the exact format required; otherwise, it may output shortened color codes, which may not work.

ChatGPT will provide the following result:

📂 Step 3: Use the Table I Created with the Original Color Arrays

Open the table (male or female variation) and enter your color values created with ChatGPT next to the original color.

❗ You may notice that some parts have multiple rgba (0-1) colors. This happens because sometimes the same HEX colors are converted to rgba (0-1) differently. You just need to find all these rgba (0-1) values of the same color and replace them with the required color, as described below.

📝 Step 4: Opening JSON Files in VS Code

Launch Visual Studio Code and open the folder with the exercises where your JSON files are located, which you want to replace colors in.

🔍 Step 5: Finding and Replacing Colors

To replace the colors, use the Find functionality in VS Code:

💾 Step 6: Saving Changes

Make sure all changes are saved by using Ctrl+S (or Cmd+S on Mac), or File -> Save All.

And voila, all colors are changed!🥳

Now you know how to replace colors in multiple exercises using Visual Studio Code.

❗ If you have any questions, find any mistakes, or know a better way, please write to me at vectorfitexercises@gmail.com

Have a good color change!🎨