web-dev-qa-db-ja.com

入力範囲の赤と緑の間の色を生成します

可能性のある複製：
数値に基づく色分け

ユーザーが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の多くの異なる組み合わせを試しましたが、実際には正しくないようです。

javascriptcolorsrangeinterpolation
25
Neal

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']");​

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

14
Neal

RBG空間でグラデーションを作成する方法のため、緑が混ざり合っています。 「よりクリーンな」グラデーションを得るには、前述のようにHSVモデルを使用できます リンク先の質問の答えで 。

RGBグラデーション（上）vs HSV（下）top gradient uses RGB, bottom uses 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

追伸 jquery-colors を使用すると、カラーモデル間の変換が簡単になりますが、独自にロールするのはそれほど難しくありません。

42
Shawn Chin

非常に手の波状の方法で、私はそれをこのようにすると思います：

1〜50の範囲に最大の緑（FF）を設定し、赤と青のスケーリング値を1の赤と青の00から、50の赤と青のFFまで設定します。

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

その後、51〜100で、赤をFFに保ち、青と緑を100に達すると青と緑が0に近づくように縮小します。

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

これにより、0が緑、50が白、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']");
4
Beska