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

【问题标题】：jQuery How to make a color palette with RGB?jQuery 如何使用 RGB 制作调色板？
【发布时间】：2012-08-14 16:27:21
【问题描述】：

不确定标题是否能说明问题，但可能不是！

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

白色的 RGB 值为 255、255、255 深黄色的 RGB 值为 227、151、4

我怎么能用 javascript (jQuery) 来遍历每个 div 并使其逐渐变暗？

这是一个屏幕截图非常感谢

【问题讨论】：

您将不得不找到/创建某种公式来说明 R - G - B 中的每一个需要如何减少和迭代。
RGB部分应该不难，但是你想要图片中的渐变和颜色选择效果吗？
我创建了一个循环，我正在尝试迭代颜色但不起作用
贴出你目前拥有的代码

标签： javascript jquery colors

【解决方案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;
}

演示： http://jsfiddle.net/RSyCM/

【讨论】：

最后 2 个 div 是白色的（检查轮廓）。
只有一个问题，你为什么把它们转换成十六进制？我们不能把它保留为 rgb 吗？
@peduarte：不确定 jQuery 是否修复了 rgb 的任何跨浏览器问题，所以我选择了 hex，因为我知道它有广泛的支持。

【解决方案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

【讨论】：

加 1 用于演示！几乎工作了。但是我总共有 50 个 div，现在它变成了红色。屏幕截图：cl.ly/image/0D3T2w1O0y2f
我不明白你是如何得出乘法值（3、10 和 25）或你的，Zoltan。某处必须有一个公式。最后一个 div 的 rgb 值需要为 227、151、4
3、10 和 25 - 这只是近似值。您可以非常精确地计算它们，即红色：(255 - 227) / 50 - 这是您的乘法值

【解决方案3】：

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

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());
}

【讨论】：