【问题标题】:jquery color variationjquery颜色变化
【发布时间】:2011-04-12 04:55:07
【问题描述】:

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

提前致谢。

【问题讨论】:

  • “变体”到底是什么意思?
  • 其实只有一种颜色。它只有 1600 万种变体。
  • @recursive,那个颜色当然是八色的。
  • @josoroma 您仍然没有定义“变化”的含义。色调变化?亮度?红/绿/蓝分量?

标签: javascript jquery colors


【解决方案1】:

我假设您正在谈论对特定颜色值的单个红色、绿色和蓝色通道(我认为这就是您所说的“颜色”)执行某种数学运算。我只能猜测您想要的输入和输出值,但这是一个开始的示例,操作 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 空间可能不是最好的色彩空间,但根据您的问题,我认为是。

【讨论】:

    【解决方案2】:

    谢谢。

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

    我将尝试使用以下概念: 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 个“真正的”红色、绿色和蓝色的十六进制值,但我迷路了。

    【讨论】:

      猜你喜欢
      • 2011-02-04
      • 1970-01-01
      • 1970-01-01
      • 2015-08-11
      • 2012-04-02
      • 1970-01-01
      • 2014-02-12
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多