javascript - 从百分比获取颜色值

Question

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

这是渐变调色板

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

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

我不知道如何调整它以仅获得 2 种渐变颜色(从 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('input', e => {
    percentage = colorSlider.value
    colorShower.style.backgroundColor = buildColor(redAspect(percentage), blueAspect(percentage))
  })
}

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

.color-slider {
  width: 100%;
}

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