从百分比获取颜色值

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">

从百分比获取颜色值

Get colors values from percentages

html

javascript

css

hsl

rgb