如何在 JavaScript 中获取渐变颜色的十六进制代码（基于值的 3 种颜色）

Question

我正在尝试根据值在 3 种混合颜色中获取十六进制代码。

示例：

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

如果值为：

1 - 十六进制代码是 #FF0000

50 - 十六进制代码是 #FFFF00

100 - 十六进制代码是 #008000

在 1-50 等值之间，十六进制代码应与 Red-Yellow.

混合

50-100 十六进制代码混合 黄绿色 基于值增加。

我怎样才能做到这一点？

Answer 1

尝试

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>

如何在 JavaScript 中获取渐变颜色的十六进制代码（基于值的 3 种颜色）

How to get hex code of the gradient color (3 colors based on values) in JavaScript

javascript

css

gradient

colors

示例：