从百分比中获取颜色值

Question

我必须从0％到200％之间的百分比获得颜色。

这里是渐变调色板

我的实际算法正在采用5种颜色渐变

percentageToColor(perc) {
  perc = Math.trunc(perc);
  perc > 200 ? (perc = 200) : '';
  const hue = 200 - perc;
  return `hsl(${hue}, 100%, 50%)`;

我不知道如何将其调整为仅获得2种渐变颜色（相同的Blue从0到100％，然后开始添加红色红色，而所有红色均为200％）

最好是颜色渐变是通用的，但特定的蓝色和红色也很好。

我没有找到能做到这一点的图书馆。

Answer 1

根据获得的百分比计算RGB的红色和蓝色纵横比，然后将它们插入rgb值。

这是一个有效的示例：

window.onload = function() {
  let colorShower = document.querySelector('.color-shower')
  let colorSlider = document.querySelector('#colorSlider')
  let blueAspect = percentage => Math.round(255 * (1 - (percentage - 1) / 200))
  let redAspect = percentage => Math.round(255 * (percentage - 1) / 200)
  let percentage = colorSlider.value
  let buildColor = (redAspect, blueAspect) => `rgb(${redAspect}, 0, ${blueAspect}`
    
  colorShower.style.backgroundColor = buildColor(redAspect(percentage), blueAspect(percentage))
  
  colorSlider.addEventListener('change', e => {
    percentage = colorSlider.value
    colorShower.style.backgroundColor = buildColor(redAspect(percentage), blueAspect(percentage))
  })
}

.color-shower {
  width: 100%;
  height: 50px;
}

<div class = "color-shower"></div>
<input type = "range" min = "1" max = "200" value = "1" class = "color-slider" id = "colorSlider">