我有一个投票系统，我希望这个投票的答案是彩色的。例如：如果是 10% 则是红色，如果是 40% 则是黄色，如果是 80% 则是绿色，所以我希望我的 javascript 代码使用 rgb 颜色根据给定的百分比制作颜色。
function hexFromRGB(r, g, b) {
var hex = [
r.toString( 16 ),
g.toString( 16 ),
b.toString( 16 )
];
$.each( hex, function( nr, val ) {
if ( val.length === 1 ) {
hex[ nr ] = "0" + val;
}
});
return hex.join( "" ).toUpperCase();
}
现在我想要百分比的十六进制。
使用 HSL 和小提琴的简单方案：
function getColor(value){
//value from 0 to 1
var hue=((1-value)*120).toString(10);
return ["hsl(",hue,",100%,50%)"].join("");
}
根据需要调整饱和度和亮度。和一把小提琴。
function getColor(value) {
//value from 0 to 1
var hue = ((1 - value) * 120).toString(10);
return ["hsl(", hue, ",100%,50%)"].join("");
}
var len = 20;
for (var i = 0; i <= len; i++) {
var value = i / len;
var d = document.createElement('div');
d.textContent = "value=" + value;
d.style.backgroundColor = getColor(value);
document.body.appendChild(d);
}这可能超出了您的需要，但这可以让您设置任意颜色映射：
var percentColors = [
{ pct: 0.0, color: { r: 0xff, g: 0x00, b: 0 } },
{ pct: 0.5, color: { r: 0xff, g: 0xff, b: 0 } },
{ pct: 1.0, color: { r: 0x00, g: 0xff, b: 0 } } ];
var getColorForPercentage = function(pct) {
for (var i = 1; i < percentColors.length - 1; i++) {
if (pct < percentColors[i].pct) {
break;
}
}
var lower = percentColors[i - 1];
var upper = percentColors[i];
var range = upper.pct - lower.pct;
var rangePct = (pct - lower.pct) / range;
var pctLower = 1 - rangePct;
var pctUpper = rangePct;
var color = {
r: Math.floor(lower.color.r * pctLower + upper.color.r * pctUpper),
g: Math.floor(lower.color.g * pctLower + upper.color.g * pctUpper),
b: Math.floor(lower.color.b * pctLower + upper.color.b * pctUpper)
};
return 'rgb(' + [color.r, color.g, color.b].join(',') + ')';
// or output as hex if preferred
};
您可以在几行代码（不包括注释）中完成此操作，而无需任何颜色映射。
function hsl_col_perc(percent, start, end) {
var a = percent / 100,
b = (end - start) * a,
c = b + start;
// Return a CSS HSL string
return 'hsl('+c+', 100%, 50%)';
}
//Change the start and end values to reflect the hue map
//Refernece : http://www.ncl.ucar.edu/Applications/Images/colormap_6_3_lg.png
/*
Quick ref:
0 – red
60 – yellow
120 – green
180 – turquoise
240 – blue
300 – pink
360 – red
*/
示例：https : //jsfiddle.net/x363g1yc/634/
不需要颜色图（除非它是非线性的颜色变化，这没有被问到）
警告：这与 IE8 或更低版本不兼容。（感谢 Bernhard Fürst）
这种方法在这种情况下效果很好（从 0 到 100 的百分比）：
function getGreenToRed(percent){
r = percent<50 ? 255 : Math.floor(255-(percent*2-100)*255/100);
g = percent>50 ? 255 : Math.floor((percent*2)*255/100);
return 'rgb('+r+','+g+',0)';
}
我知道这最初是一个旧的 javascript 问题，但我在这里搜索仅使用CSS 的解决方案，所以也许它会同样帮助其他人：它实际上很简单：
使用百分比作为 HSL 颜色值！红色到绿色跨度从 H0到128.（因此您可以根据需要提高百分比1.2）。例子：
background-color:hsl(perc,100%,50%);
其中 perc 只是数字，没有%符号。