Attaching a sample image. In which you can see a vivid pattern using two colours and the ranges in between. I earlier thought of using the difference between the two colours and adding random values in that range to the smaller(hex) colour. But it gave me a very unpleasant palette. First is what I need, Second is What I get.

CodePudding user response：

When you generate colors, you should remember that they are built up from (R)ed (G)reen (B)lue, and sometimes Alpha-transparency.

Think of it: if you pick a random number between #000000 and #ffffff, you could get something like: #840523. Note that it's not gray, as you'd expect.

If you want it "random", you should pick random values for each channel.

So, in your example, do this:

Color1: #297EA6 split: #29 #7E #A6
Color2: #00101C split: #00 #10 #1C

Red  : get a random value between #29 and #00 --> #20?
Green: get a random value between #7E and #10 --> #61?
Blue : get a random value between #A6 and #1C --> #8D?

New Color: #20   #61  #8D --> #20618D

If you want to keep the same tone, then you should consider calculating Hue/Saturation/Luminance values, and play with those. You might get more pleasing results.

In this answer I've explained how to do what you were trying to do, but make sure to read this too, because it goes deeper into interpolating colors: Interpolate from one color to another