javascript - jquery颜色变化

Question

我需要生成给定颜色的所有 255/256 颜色变化，是否有一些建议可以开始，或者可以使用 jQuery 库？

提前致谢。

Answer 1

我假设您正在谈论对特定颜色值的各个红色、绿色和蓝色 channel (我认为这就是您所说的“颜色”的意思)执行某种数学运算。我只能猜测您想要的输入和输出值，但这里有一个开始的示例，操作 RGB 空间*中的值。假设您的输入是十六进制数字:

var color = 0xFFD700, // "gold"

    // separate the channels using bitmasks
    redValue = color & 0xFF0000, // redValue is 0xFF0000
    greenValue = color & 0x00FF00, // greenValue is 0x00D700
    blueValue = color & 0x0000FF; // blueValue is 0x000000

// now we can manipulate each color channel independently
var lessRed = redValue - 0x010000,
    moreBlue = blueValue + 0x000001,
    newColor = lessRed + greenValue + moreBlue; // newColor is 0xFED701

因此，一种通过改变红色 channel 、保持绿色和蓝色不变来生成所有颜色的数组的方法:

var colors = [],
    startColor = 0x00D700,
    endColor = 0xFFD700,
    incr = 0x010000;

while (startColor <= endColor)
{
    colors.push(startColor);
    startColor = startColor + incr;
}

// print the hex values
var i, len = colors.length, out = [];
for (var i=0; i<len; i++)
{
    out.push('0x' + colors[i].toString(16))
}
console.log(out.join('\n'))

如果您输入的是字符串，则只需先将其转换为数字即可。

var input = 'FFD700',
    hexValue = parseInt(input, 16);
console.log(hexValue.toString(10)); // prints: 16766720
console.log(hexValue.toString(16)); // prints: FFD700

哦，不需要 jQuery!

---

* 按照this answer ，RGB 空间可能不是最好使用的色彩空间，但根据您的问题，我认为它是最好的。