JavaScript - 如何以編程方式計算顏色？

在JavaScript/jQuery應用程序中，我想根據外部變量設置div元素的顏色。從該變量的低值到高值，您將顏色從綠色變爲紅色。現在，我可以這樣做：JavaScript - 如何以編程方式計算顏色？

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行功能？

來源

2014-10-20 ohyeah

這個變量和顏色有什麼關係？ '0' ='＃f00'，'1000000' ='＃0f0'？（或者最高的號碼可能是...） – 2014-10-20 09:40:07

Woops。可以說任何-1000或以下的東西都是＃00ff00（綠色），所有+1000或以上的東西都是＃ff0000（紅色），0代表＃ffff00（黃色）。 – ohyeah 2014-10-20 09:42:31

RGB顏色由3個顏色通道組成：R（0-255），G（0-255），B（0-255）。所以你可以這樣做：'RGB（數量＆255，（數量>> 8）＆255，（數量>> 16）＆255）'，你有一個計算0到16581375之間的顏色的函數。你的值，併爲它提供一個函數很容易 – DoXicK 2014-10-20 09:42:34

「一個稍微偏紅的綠蔭」變成淡黃色，因爲在紅色和綠色之間的中間色爲黃色。因此，當值爲< =下限時，此函數返回一個純綠色的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你的用例。該功能很容易適應綠色/青色/藍色或紅色/紫色/藍色之間的顏色變化。如果你需要一個全綵虹，需要更多的努力。

來源

2014-10-20 11:29:58

漂亮的代碼！很棒。 – ohyeah 2014-10-20 12:00:28

首先，分離裝飾邏輯（顏色值）和爲不同顏色設置類別並將其設置爲div是很好的。我有那樣的任務和使用的每個香奈兒的罪fuctions不同的振幅，週期和移位每個通道：

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 + ')'; 
    }, 

};

可能需要重寫，雖然它。現在不要認爲它是最佳解決方案。

來源

2014-10-20 09:43:03

有一個稱爲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();

See demo here

來源

2014-10-20 10:54:04

JavaScript - 如何以編程方式計算顏色？

回答

相關問題