javascript - 如何在JavaScript中获取渐变颜色的十六进制代码(基于值的3种颜色)

我试图获取基于值的3种混合颜色的十六进制代码。

例：


开始-#FF0000（红色）。
中-#FFFF00（黄色）。
结束-#008000（绿色）。


如果值为：

1-十六进制代码为#FF0000

50-十六进制代码为#FFFF00

100-十六进制代码为#008000

介于1-50之间的十六进制代码应与红黄色混合。

根据值增加，将50-100十六进制代码与黄绿色混合。

我怎样才能做到这一点？

最佳答案

尝试

function change(e) {
  box.style.background = gradient(e.target.value/100,'#FF0000','#FFFF00','#008000');
}

// t in ragne 0..1, start-middle-end are colors in hex e.g. #FF00FF
function gradient(t,start,middle,end) {
  return t>=0.5 ? linear(middle,end,(t-.5)*2) : linear(start,middle,t*2);
}

function linear(s,e,x) {
  let r = byteLinear(s[1]+s[2], e[1]+e[2], x);
  let g = byteLinear(s[3]+s[4], e[3]+e[4], x);
  let b = byteLinear(s[5]+s[6], e[5]+e[6], x);
  return "#" + r + g + b;
}

// a,b are hex values from 00 to FF; x is real number in range 0..1
function byteLinear(a,b,x) {
  let y = (('0x'+a)*(1-x) + ('0x'+b)*x)|0;
  return y.toString(16).padStart(2,'0') // hex output
}

#box { width: 50px; height: 50px; background: #FF0000 }

<input type="range" min="0" max="100" oninput="change(event)" value="0">
<div id="box"></div>