入力範囲のため

Question

可能性の重複を赤と緑の間の色を生成します。
Color coding based on number

私は、ユーザーが1-100、どこの範囲から選択できるようにするために必要

数字が50未満になると、領域の色はより暗い緑色になり、色が100に近づくにつれて色はより赤くなります。

私は、中心に近づくにつれて色が白（50 =完全白）に近くなるようにしています。

私はここから答えてみました：

<span><span class="value">50</span><input type="range" /></span>​ 

そして、次のjavascript：私は、次のHTMLを持っている... 50は混乱緑されて終わる....無駄に

をGenerate colors between red and green for a power meter?を：

$(document).on({ 
    change: function(e) { 

     var self = this, 
      span = $(self).parent("span"), 
      val = parseInt(self.value); 
     if (val > 100) { 
      val = 100; 
     } 
     else if (val < 0) { 
      val = 0; 
     } 
     $(".value", span).text(val); 
     var r = Math.floor((255 * val)/100), 
      g = Math.floor((255 * (100 - val))/100), 
      b = 0; 
     span.css({ 
      backgroundColor: "rgb(" + r + "," + g + "," + b + ")" 
     }); 
    } 
}, "input[type='range']");​ 

フィドル：http://jsfiddle.net/maniator/tKrM9/1/

私はr、g、bのいろいろな組み合わせを試してきましたが、実際には正しくできないようです。非常に手の波状のように、私はそれをこのようにすると思う

Answer 1

私が思いつきましたこの回答でhereの助けを借りてInterpolate私は簡単に開始と終了の色を設定することができます機能。

function Interpolate(start, end, steps, count) { 
    var s = start, 
     e = end, 
     final = s + (((e - s)/steps) * count); 
    return Math.floor(final); 
} 

function Color(_r, _g, _b) { 
    var r, g, b; 
    var setColors = function(_r, _g, _b) { 
     r = _r; 
     g = _g; 
     b = _b; 
    }; 

    setColors(_r, _g, _b); 
    this.getColors = function() { 
     var colors = { 
      r: r, 
      g: g, 
      b: b 
     }; 
     return colors; 
    }; 
} 

$(document).on({ 
    change: function(e) { 

     var self = this, 
      span = $(self).parent("span"), 
      val = parseInt(self.value), 
      red = new Color(232, 9, 26), 
      white = new Color(255, 255, 255), 
      green = new Color(6, 170, 60), 
      start = green, 
      end = white; 

     $(".value", span).text(val); 

     if (val > 50) { 
      start = white, 
       end = red; 
      val = val % 51; 
     } 
     var startColors = start.getColors(), 
      endColors = end.getColors(); 
     var r = Interpolate(startColors.r, endColors.r, 50, val); 
     var g = Interpolate(startColors.g, endColors.g, 50, val); 
     var b = Interpolate(startColors.b, endColors.b, 50, val); 

     span.css({ 
      backgroundColor: "rgb(" + r + "," + g + "," + b + ")" 
     }); 
    } 
}, "input[type='range']");​ 

フィドル：ジャンFrançoisCorbett@http://jsfiddle.net/maniator/tKrM9/53/

Answer 2

：

1-50の範囲を確認し、最大緑（FF）が、赤と00に至るまでの青色の両方のためにスケーリングされた値赤と1の青色、FFまでのすべての方法のために赤と青のために50

（サンプル値：1 - > 00FF00、25 - > 7FFF7F、50 - > FFFFFF）で

そして51から-100、FFに赤を維持し、青と緑をスケールして青と緑が0に近づくようにします。

（サンプル値：51 - > FFFFFF、75 - > FF7F7F、100 - > FF0000）は

これは、50の白、0であなたブリリアントグリーンを与えることが保証、および赤100

領域にあります目が異なる色の濃さを違ったものに解釈するだけで、正確には完璧ではないかもしれませんが（色が他の色よりも優れています）、かなり近づくはずです。

私は次のようにあなたのバイオリンのコードを変更し、そしてそれは私が説明何が行われます。

$(document).on({ 
    change: function(e) { 

     var self = this, 
      span = $(self).parent("span"), 
      val = parseInt(self.value); 
     if (val > 100) { 
      val = 100; 
     } 
     else if (val < 0) { 
      val = 0; 
     } 
     $(".value", span).text(val); 
     if (val <= 50) 
     { 
      r = Math.floor((255 * (val/50))), 
      g = 255, 
      b = Math.floor((255 * (val/50))); 
     } 
     else 
     { 
      r = 255, 
      g = Math.floor((100 - val)/50 * 255), 
      b = Math.floor((100 - val)/50 * 255); 
     } 
     span.css({ 
      backgroundColor: "rgb(" + r + "," + g + "," + b + ")" 
     }); 
    } 
}, "input[type='range']"); 

Answer 3

あなたはので、あなたがRBG空間でグラデーションを作成している方法の混乱の緑を取得しています。 「クリーナー」グラデーションを得るには、前述のようにHSVモデルを使用することができますin the answer of the question you linked to。

^{RGB勾配0（赤）とのH（色相）値をスケーリングすることによりHSV（下）対（上）}

および120（緑）、あなたは素敵なきれいな移行を取得します。しかし、中点（60）では、意図した白の代わりに明るい黄色になります。これは、S（彩度）値を変更することで対処できます.0彩度では、白で終わります（1はフル彩度を与えます）。

彩度を1から0までバック1への入力値が0 50から100に行くように - 。それはあなた自身をロールバックするにはあまりにも難しいことではありませんが、カラーモデル間の変換PSは、jquery-colorsを使用して簡単です

var hue = Math.floor((100 - val) * 120/100); // go from green to red 
var saturation = Math.abs(val - 50)/50; // fade to white as it approaches 50 

http://jsfiddle.net/xgJ2e/2/