Javascript hex number interpolation between several numbers

Question

I'm creating a "characters remaining" type counter for a site of mine, and am trying to get smooth color transitions.

How would I go about creating a function to obtain the hex value for a color if I pass the maximum number (in this case 300) and the current char count assuming the pattern is green, yellow, orange, red?

This is in Javascript. Here is what I have so far:

function commentcounter(val) {
max = 300;
if(val >= max){
    color = '#FF0000';
}else if(val > (max / 2)){
    color = '#FF9900';
}else{
    color = '#00FF00';
}
display = '<span style="color:' + color + '">' + val + '/' + max + '</span>';
document.getElementById('counter').innerHTML = display;
}

As you can see, this doesn't really interpolate, just goes from green to orange to red.

Answer 1

You need to interpolate each color component individually from 0 to 255 (or vice-versa).
This will be much easier if you use color: rgb(0, 255, 0).

Answer 2

"rgb("+Math.round(Math.min((((chars+(max/2))*2/max)-1)*255,255))+","+Math.round(Math.min(((chars*-2/max)+2)*255,255))+",0)";