jQuery如何使用RGB制作调色板？

Question

不确定标题是否解释，但可能不是！

无论如何，我有50个div，我想将背景颜色设置为白色到深黄色。 第一个div是白色，最后一个是深黄色。

白色的RGB值为255,255,255 暗黄色的RGB值为227,151,4

我怎么能用javascript（jQuery）做到这一点，所以迭代每个div并让它逐渐变暗？

这是一个截屏 非常感谢

Answer 1

var divs = $('div'),
    len = divs.length;

var targ_R = 227,
    targ_G = 151,
    targ_B = 4,

    inc_R = (255 - targ_R) / len,
    inc_G = (255 - targ_G) / len,
    inc_B = (255 - targ_B) / len;

divs.css("backgroundColor", function(i, curr) {
    return "#" + toHex(255 - (i * inc_R)) +
                 toHex(255 - (i * inc_G)) +
                 toHex(255 - (i * inc_B));
});

function toHex(n) {
    var h = (~~n).toString(16);
    if (h.length < 2)
        h = "0" + h;
    return h;
}

DEMO： http://jsfiddle.net/RSyCM/

Answer 2

试试这个 - DEMO

var r, g, b;

for (var i = 0, count = $("div").length; i < count; i++) {
    r = 255 - i * 3;
    g = 255 - i * 10;
    b = 255 - i * 25;

    $("div").eq(i).css("background", "rgb(" + r + ", " + g + ", " + b + ")");
}

更新

制作最后一个rgb(227, 151, 4) - DEMO

Answer 3

以下是使用pusher.color library的Zoltan Toth答案的变体，以防您想使用库来处理解析和混合。

DEMO

var color0 = pusher.color('white');
var color1 = pusher.color('rgb', 227, 151, 4);

for (var i = 0, count = $("div").length; i < count; i++) {
    var amount = i / (count-1);
    var result = color0.blend(color1, amount);
    $("div").eq(i).css("background", result.html());
}