Интерпретация интервала между шестнадцатеричными номерами Javascript между несколькими номерами

Question

Я создаю счетчик типов «символов, оставшихся» для моего сайта, и я пытаюсь получить плавные переходы цвета.

Как мне создать функцию для получения шестнадцатеричного значения для цвета, если я передаю максимальное число (в данном случае 300) и текущий счетчик символов, считая шаблон зеленым, желтым, оранжевым, красным?

Это в Javascript. Вот то, что я до сих пор:

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; 
} 

Как вы можете видеть, это на самом деле не интерполировать, просто идет от зеленого до оранжевого до красного.

Answer 1

"rgb (" + Math.round (Math.min ((((символы + (max/2)) * 2/max) -1) 255,255)) + "," + Math.round (Math. мин (((символы -2/max) +2) * 255,255)) + ", 0)";

Answer 2

Вам необходимо интерполировать каждый компонент цвета отдельно от 0 до 255 (или наоборот).
Это будет намного проще, если вы используете color: rgb(0, 255, 0).

Answer 3

Это работало лучше, чем RGB() для меня:

var pct = val/max; 
var h = pct * 120; 
var newColor = 'hsl(' + h + ', 80%, 50%)'; 

http://jsfiddle.net/ehUHp/