jquery颜色变化

时间:2010-09-14 14:19:13

标签: javascript jquery colors

我需要生成给定颜色的所有255/256颜色变化,是否有一些建议要启动,或者使用jQuery lib?

提前致谢。

2 个答案:

答案 0 :(得分:5)

我假设您正在谈论在特定颜色值的单个红色,绿色和蓝色通道(我认为这是“颜色”的含义)上执行某种数学运算。我只能猜测你想要的输入和输出值,但这是一个开始的例子,操纵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

所以,通过改变红色通道产生所有颜色数组的一种方法,保持绿色和蓝色不变:

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空间可能不是最佳使用颜色空间,但根据您的问题,我认为是。

答案 1 :(得分:1)

感谢。

我发现了两个有趣的概念:

我将使用以下概念进行一些演奏: http://www.xarg.org/project/jquery-color-plugin-xcolor/

$。xcolor.lighten和$ .xcolor.darken

另一个有趣的读物: http://javascript.internet.com/miscellaneous/true-color-darkening-and-lightening.html

但最后一个与红色,绿色和蓝色合作: FF0000 00FF00 0000FF

也许只需要一点点修复即可接受3“真正的”红色,绿色和蓝色十六进制值,但我输了。