JavaScript-如何以编程方式计算颜色

JavaScript - how do you programmatically calculate colours?

本文关键字：方式 计算 颜色 编程 JavaScript-      更新时间：2023-09-26

在JavaScript/jQuery应用程序中，我想根据外部变量设置div元素的颜色。从这个变量的低值到高值，你可以从绿色到红色。现在，我可以这样做：

setColor: function(quantity)
{
    var color;
    if(quantity <= -1000)
    {
       color = '#00ff00'
    }
    else if(quantity > -1000 && quantity <= -900)
    {
       color = '#11ee00'
    }
    // a million more else if statements
    return color;
}

任何-1000或以下的都是#00ff00（绿色），所有+1000或以上的都是#ff0000（红色），0是#ffff00（黄色）。在这三个极端之间有很多颜色变化：例如，-950的值将是比-951稍红的绿色。

但是，对于这类东西，难道没有一个公式，这样我就不会以1000行函数结束吗？

"稍红的绿色"变为淡黄色，因为红色和绿色中间的颜色是黄色。因此，当值为<=时，此函数返回纯绿色的RGB字符串下限，当值>=上限时为红色，当值为中间值（在您的情况下为0）时为黄色，以及介于两者之间的所有阴影。

var low = -1000, upp = 1000,
    mid = (upp + low) / 2, dif = (upp - low) / 2;
function grade(value) {
    var r = 255, g = 255, b = 0;
    if (value <= low) r = 0;
    else if (value >= upp) g = 0;
    else if (value < mid) r = Math.round(255 * Math.abs(low - value) / dif);
    else if (value > mid) g = Math.round(255 * Math.abs(upp - value) / dif);
    return  'rgb(' + r + ',' + g + ',' + b + ')';
}

根据您的用例调整变量low和upp。该功能易于适应绿色/青色/蓝色或红色/紫色/蓝色之间的颜色变化。如果你需要一道完整的彩虹，还需要付出更多的努力。

首先，最好分离装饰逻辑（颜色值），为不同的颜色设置类，并将其设置为div。我有一个这样的任务，并使用每个通道的sin函数，每个通道具有不同的幅度、周期和偏移：

var ColorPicker = {
  colors: {},

  init: function(range){
    var ra = 190,
      rp = 8/3*range,
      rs = range*2/3;
    var ga = 190,
      gp = range,
      gs = 0;
    var ba = 150,
      bp = 8/3*range,
      bs = range;
    var pipi = 2*Math.PI;
    var r, g, b, w;
    for (var i = 0; i < range; i++) {
      r = ra*Math.cos(i*pipi/rp + rs*pipi/range);
      g = ga*Math.cos(i*pipi/gp + gs*pipi/range);
      b = ba*Math.cos(i*pipi/bp + bs*pipi/range);
      r = Math.round( ( r > 0 ) ? r : 0 );
      g = Math.round( ( g > 0 ) ? g : 0 );
      b = Math.round( ( b > 0 ) ? b : 0 );
      w = Math.round( i/range*255);
      this.colors[i] = {red: r, green: g, blue: b, white: w};   
    };
  },

  getColorObj: function(grade){
    return this.colors[grade];
  },
  getRGB: function(grade, coef){
    var o = this.colors[grade];
    if (!coef){
      coef = 1;
    }
    var r = (Math.round(o.red*coef)>255)?255:Math.round(o.red*coef),
      g = (Math.round(o.green*coef)>255)?255:Math.round(o.green*coef),
      b = (Math.round(o.blue*coef)>255)?255:Math.round(o.blue*coef);
    return 'rgb(' + r + ','
            + g + ',' 
            + b + ')'; 
  },
  // get shades of BW
  getW: function(grade){
    var o = this.colors[grade];
    return 'rgb(' + o.white + ','
            + o.white + ',' 
            + 0.9*o.white + ')'; 
  },
  // opposite to BW
  getB: function(grade){
    var o = this.colors[grade],
      b = 255 - o.white;
    // console.log(b);
    return 'rgb(' + b + ','
            + b + ',' 
            + .9*b + ')'; 
  },
};

但可能需要重写。现在不要认为这是一个最佳解决方案。

有一个名为TinyColor的颜色操作库。你想做的是改变色调。这样做：

var red = tinycolor("#FF0000").toHsv();
var green = tinycolor("#00FF00").toHsv(), h, col, hex;
h = green.h + (red.h-green.h)*(quantity+1000)/2000;
col = tinycolor({h: h, s: 0.5, v: 0.5});
hex = col.toHex();

请参阅此处的演示

相关文章：