Calculating color value (r,g,b) using javascript

I have x amounts of arrays containing speed values.

The values are in m/s and I don't know how many there are and how large they are. I need to create a function to decide on what color to use.

My idea was to find the max and min value of the array (the speeds), and since I know the values are all dividable with 0.25 I wanted to count the possible amount of "steps" by doing var steps = (max - min) / 0.25

Since I have an RGB spectrum I thought I could somehow calculate what value to use, but I simply can't wrap my head around what to do.

What I want to be able to do was to have slower speeds be red'ish, medium speeds to be green'ish and fast speeds to be blue'ish.

An example could be that I have an array:

speeds = [0.5, 0.5, 0.75, 1.25, 0.50, 0.75, 1.00, 4.00, 4.50, 8.00, 7.50, 8.50, 6.50, 6.00, 5.00, 5.25, 4.75, 4.00, 3.25, 2.50, 1.25, 0.00]

Now, for each value I have I want to calculate a color where the largest values will be more intense the larger they are (in the blue spectrum - something like (0, 0, 255)) while the smaller values will be more intense (in the red spectrum - (255, 0, 0)) the lower they are. And for the middle values I thought they could more intense in the green color (0, 255, 0) if it is absolutely in the middle, and then adding either a little bit of red or blue based on which side they are leaning towards.

I have tried to look for a plugin that could do this for me but I am unable to find such and I have also tried googling for a way to do this, but without any luck.

Solution

Another option would be to simple calculate the hsl value, since you already know the exact colors you are dealing with. Converting from hsl to rgb should not be to hard, there are plenty of libraries out there that do that very well.

Here is an example.

var speeds = [0.5, 0.5, 0.75, 1.25, 0.50, 0.75, 1.00, 4.00, 4.50, 8.00, 7.50, 8.50, 6.50, 6.00, 5.00, 5.25, 4.75, 4.00, 3.25, 2.50, 1.25, 0.00];
var fragment = document.createDocumentFragment();
var list = document.querySelector('ul');
var speedsMin = Math.min(...speeds);
var speedsMax = Math.max(...speeds);
var hslMin = 0;
var hslMax = 240;

var hslValues = speeds.map(function(value) {
  return { 
    h: Math.ceil( ( (value - speedsMin) / (speedsMax - speedsMin) ) * (hslMax - hslMin) + hslMin ),
    s: 100,
    l: 50
  }
})

hslValues.forEach(function(value) {
  var item = document.createElement('li');
  var color = 'hsl(' + value.h + ',' + value.s + '%,' + value.l + '%)';
  item.style.backgroundColor = color;
  fragment.appendChild(item)
})

list.appendChild(fragment)

ul {
  list-style-type: none
  margin: 0;
  padding: 0;
}

ul li {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  display: inline-block;
  margin: 0 4px
}

<ul></ul>