29

重複の可能性:
番号に基づく色分け

1～100の範囲で選択できるようにしたいのですが、50未満になると濃い緑になり、100に近づくほど赤くなります.

範囲が中央に近づくにつれて、色が白に近くなるようにしようとしています (50 = 完全な白)。

ここから答えを試しました：パワーメーターの赤と緑の間の色を生成しますか？無駄に.... 50 は、混乱した緑になってしまいます...

私は次のhtmlを持っています:

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

そして、次のJavaScript：

$(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のさまざまな組み合わせを試してみましたが、本当にうまくいかないようです。

4

3 に答える 3

46

RBG 空間でグラデーションを作成する方法が原因で、緑がごちゃごちゃになっています。「よりクリーンな」勾配を得るには、リンク先の質問の回答に記載されているように、HSV モデルを使用できます。

RGB グラデーション (上) と HSV (下) 上のグラデーションは RGB を使用し、下のグラデーションは HSV を使用します

H (色相) の値を 0 (赤) から 120 (緑) の間で調整すると、きれいなトランジションが得られます。ただし、中間点 (60) では、意図した白ではなく明るい黄色になります。S (彩度) 値を変更することでこれに対処できます。彩度が 0 の場合、最終的には白になります (1 を指定すると、完全な色の彩度が得られます。

入力値が0から50、100になると、彩度を1から0にスケーリングし、1に戻す大まかな例を次に示します- http://jsfiddle.net/xgJ2e/2/

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

ps カラー モデル間の変換は、 jquery-colorsを使用して簡単に行うことができますが、自分で作成するのはそれほど難しくありません。

于 2012-08-07T16:31:06.280 に答える