Цветовая шкала Javascript от 0% до 100%, отрисовка любого цвета до любого цвета на индикаторе выполнения

Question

У меня есть индикатор выполнения, и я хотел бы, чтобы он отображал цвета от красного для 0% до зеленого для 100%. Я использую фрагмент js отсюда https://gist.github.com/mlocati/7210513, который работает хорошо, но я хотел бы указать точные цвета для 0% и 100%.

красный цвет, который я хочу: rgb (239, 83 , 80) для 0% (# ef5350) зеленый цвет, который я хочу: RGB ( 54 , 161,14) на 100% (# 36a10e)

Красного цвета у меня на данный момент: rgb (239, 0 , 80), (# ef0050) Зеленый цвет у меня на данный момент: RGB ( 0 , 161,14). (# 00a10e)

Как мне получить 83 и 54?

function perc2color() {

  var progressBar = $('#progress-bar');
  var value = $(progressBar).data('value');

  var r = 0;
  var g = 0;
  var b = 0;
  if (value < 50) {
    r = 239;
    g = Math.round(5.1 * value);
    b = 80;
  } else {
    r = Math.round(510 - 5.10 * value);
    g = 161;
    b = 14;
  }
  var h = r * 0x10000 + g * 0x100 + b * 0x1;
  window.alert('#' + ('000000' + h.toString(16)).slice(-6))
  progressBar.css({
    backgroundColor: '#' + ('000000' + h.toString(16)).slice(-6),
    width: value + '%'
  });
}
perc2color();

.progress-bar {
  height: 100%;
}

.progress {
  width: 100%;
  height: 25px;
  background-color: #eee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress">
  <div class="progress-bar" id="progress-bar" data-value="100"></div>
</div>
<!-- to see the difference just change the number in data-value to anything between 0-100 -->

Answer 1

Формула довольно проста:

 Math.round(start + (end - start) * value / 100);

Таким образом, это будет start для 0 и end для 100.