How to mathematically calculate the gradient of a color palette
I'll start with offtopic
I would like to start with the background and the problem that I solve at work. There is a site where photos on which, when published, must fit a certain aspect ratio (3×2). At the same time, certain difficulties often arise in work. For example, what if the author took a screenshot that does not match this ratio?
A designer can help here by inserting the image onto a suitable background, or simply choosing when loading which part of the image will have to be cut off. Both options are inconvenient for their own reasons. The first is due to time, the second is due to loss of content. Hence the task of writing a service that will automatically do the designer’s work: take an image and place it in frames with the required aspect ratio. You'll get something like this:
Developing this idea, the need arose not to make a monochrome background, albeit with the ability to set any color, but to make a gradient that would take into account the colors of the image. This is where my initial calculations and this article came from.
Disclaimer
In no way do I claim the uniqueness of my work or the correctness of my approach and my calculations. It is possible that ready-made formulas and algorithms already exist. But here I tried to study this issue on my own and dive into the topic of the mathematics of raster images.
Technique for constructing a gradient
Since the color components of an image are numbers, for example RGB {173, 217, 54}, when constructing a gradient we have a transition from one number to another. Here we immediately remember school arithmetic and geometric progressions, which will help us in calculations.
Linear Gradient
Let's look at an arithmetic progression. In it, each subsequent element differs from the previous one by a specific constant, called the progression difference.
Here d is the difference in the arithmetic progression. From this formula you can calculate the following parameters:
It is the last formula that will give us the required gradient step. By gradient step I mean how much the color component of the pixel 
different from pixel 
. Conventionally, the parameter R has changed from 201 to 203. Here the step is 
.
But which approach should we use next? From Eq. 
it follows that 
exists for any 
for each pixel component. In my case, in the format 
will exist 
, 
And 
. In the first assumption, which I have not yet tested, they will change independently of each other.
The mathematics will be as follows: we take the color of the 1st and last pixels from the original image in the top line. We calculate for each of them 
. In general, it will represent a floating point real number. We represent each color component similarly as a floating point number and change each subsequent pixel using the formula 
.
To display a specific color, I suggest cutting off the fractional part or, in other words, rounding 
to a lesser extent. This will create a smooth transition from the initial color to the final color.
Afterword
As I already said, I do not claim to be the ultimate truth. In this article, I only covered my calculations using arithmetic progression. The second will present calculations for geometric progression.
Most likely, my math has a lot of gaps and shortcomings, so I would appreciate any feedback. And again, I repeat that I do not pretend to be scientific, but I am looking for a specific solution for a specific business problem.
