2010-09-14 128 views
2

我需要产生给定颜色的所有255/256颜色变化,是否有一些建议开始,或使用jQuery库?jQuery的颜色变化

在此先感谢。

+2

你是什么意思的“变异”? – 2010-09-14 14:21:16

+1

这是否接近? http://stackoverflow.com/questions/1177826/simple-color-variation – 2010-09-14 14:21:46

+2

实际上只有一种颜色。它只有1600万变化。 – recursive 2010-09-14 14:23:07

回答

4

我假设你正在讨论对某个特定颜色值的红色,绿色和蓝色通道(我认为这就是你所说的“颜色”的含义)进行某种算术运算。我只能猜测你想要的输入和输出值,但这里是一个例子来开始,操纵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空间可能不是最好的色彩空间的使用,但根据你的问题,我觉得是。

+0

哇,真棒! – Trafalmadorian 2010-09-14 15:18:44

0

谢谢。

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

我要去从发挥一点与概念: http://www.xarg.org/project/jquery-color-plugin-xcolor/

$ .xcolor.lighten和$ .xcolor.darken

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

但随着红,绿,蓝的最后一个doestn工作: FF0000 00FF00 0000FF

也许只需要一点点修复就可以接受3个“真实”的红色,绿色和蓝色十六进制值,但我失去了。