Question

Not the biggest whiz on math here… having a hard time figuring this out.

So I get the clients time of day using:

var clientdate = new Date();                            
var clientTime = clientdate.getHours() + 1;

Psuedo:

If clientTime() = 1, rgb should equal 55,91,128
If clientTime() = 24, rgb should equal 0,30,61

What I am trying to figure out is how to get the values to be correct if the time is, for instance, 14.

My original theory was this:

1. Subtract difference from RGB values.
   So they would be 55,61,67.
2. Divide clientTime by 24
   (clientTime/24), multiple that by
   my difference in step 1.
3. Subtract step 2 from the original RGB values.

Here is the code:

var clientdate = new Date();                            
var clientTime = clientdate.getHours() + 1;



var r = 55;
var g = 91;
var b = 128;
var rn = 0;
var gn = 30;
var bn = 61;    

var rt = (r-rn)*(clientTime/24);
var gt = (g-gn)*(clientTime/24);
var bt = (b-bn)*(clientTime/24);

var rf = r-rt;
var gf = g-gt;
var bf = b-bt;

Question

How do I get RGB values between 55,91,128 and 0,30,61 based on the time of day.

Did I do this correctly, and if so, how do I do it more concise?

Answer 1

If you want to be inclusive of the bounds on your color, then change clientTime to:

clientdate.getHours();

…and change rt, gt, and bt to:

var rt = (r-rn)*(clientTime/23.0);
var gt = (g-gn)*(clientTime/23.0);
var bt = (b-bn)*(clientTime/23.0);