从绿色到红色取决于百分比

Question

我有一个民意调查系统,我希望这个民意调查的答案有色.例如:如果它是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();
}  

现在我想要百分之十六进制.

Answer 1

使用HSL和小提琴的简单方案:

function getColor(value){
    //value from 0 to 1
    var hue=((1-value)*120).toString(10);
    return ["hsl(",hue,",100%,50%)"].join("");
}

根据需要调整饱和度和亮度.还有一个小提琴.

Answer 2

这可能比您需要的多,但这可以让您设置任意颜色映射:

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
}  

Answer 3

您可以在几行代码(不包括注释)中执行此操作,而无需任何颜色映射.

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或更低版本不兼容.(感谢BernhardFürst)

Answer 4

在这种情况下,此方法很有效(百分比从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)';
        }

Answer 5

我知道这最初是一个旧的 javascript 问题，但我在这里搜索仅使用CSS 的解决方案，所以也许它会同样帮助其他人：它实际上很简单：

使用百分比作为 HSL 颜色值！红色到绿色跨度从 H0到128.（因此您可以根据需要提高百分比1.2）。例子：

background-color:hsl(perc,100%,50%);

其中 perc 只是数字，没有%符号。

Answer 6

我修改了 zmc 的答案，给出从绿色（0％）到红色（100％）的渐变。

const getGreenToRed = (percent) => {
  const r = (255 * percent) / 100;
  const g = 255 - (255 * percent) / 100;
  return 'rgb(' + r + ',' + g + ',0)';
};

编辑：

几年后再次回顾......这里是任何颜色的更灵活的实现。

const getGreenToRed = (percent) => {
  const r = (255 * percent) / 100;
  const g = 255 - (255 * percent) / 100;
  return 'rgb(' + r + ',' + g + ',0)';
};

const interpolateBetweenColors = (
  fromColor,
  toColor,
  percent
) => {
  const delta = percent / 100;
  const r = Math.round(toColor.r + (fromColor.r - toColor.r) * delta);
  const g = Math.round(toColor.g + (fromColor.g - toColor.g) * delta);
  const b = Math.round(toColor.b + (fromColor.b - toColor.b) * delta);

  return `rgb(${r}, ${g}, ${b})`;
};

const patches = document.getElementById('patches');

for (let i = 0; i <= 100; i += 5) {
  const color = interpolateBetweenColors(
    { r: 0, g: 255, b: 0 },
    { r: 255, g: 0, b: 0 },
    i
  );
  
  const patch = document.createElement('div');
  patch.style.backgroundColor = color;
  patch.style.width = '100px';
  patch.style.height = '10px';
  patches.appendChild(patch);
}

Answer 7

function hexFromRGBPercent(r, g, b) {
    var hex = [
        Math.floor(r / 100 * 255).toString( 16 ),
        Math.floor(g / 100 * 255).toString( 16 ),
        Math.floor(b / 100 * 255).toString( 16 )
    ];
    $.each( hex, function( nr, val ) {
        if ( val.length === 1 ) {
            hex[ nr ] = "0" + val;
        }
    });
    return hex.join( "" ).toUpperCase();
}

归功于安德鲁.他更快.

Answer 8

使用 HLS从 更改red为green颜色。该值应介于 0 到 100 之间，在本例中模拟百分比 (%)。

function getColorFromRedToGreenByPercentage(value) {
    const hue = Math.round(value);
    return ["hsl(", hue, ", 50%, 50%)"].join("");
}