遍历javascript中的颜色答案

【问题标题】：iterate through colors in javascript遍历javascript中的颜色
【发布时间】：2013-05-06 09:06:06
【问题描述】：

我想列出 css 中使用的所有颜色，但它们似乎以 16 进制格式存储。我认为这样的事情可能会起作用，但它并没有达到我想要的效果，

for(x; x< 100; x++)
{
   color = x.toString(16);
}

【问题讨论】：

CSS 中使用的所有颜色是什么意思？为什么您希望该代码执行您想要的操作？如何描述你想要什么，并展示你迄今为止为实现这一目标所做的努力。
实际上想使用滑块小部件。滑块的每次增量都会将 div 更改为新颜色。

标签： javascript css loops colors

【解决方案1】：

CSS 3 中使用的颜色包括红色、绿色、蓝色各 8 位，以及我相信为 8 位的 alpha 通道（但定义为十进制数，因此更难告诉）。可以将这些颜色表示为rgba 或hsla。使用十六进制，您只能表示 100% 不透明的颜色。迭代一种颜色的八位很容易：

for (var i=0; i<256; i++) {
    var redChan = i;
}

遍历所有颜色可能是通过将此循环嵌套四层深，但这会对您想要迭代的确切方向做出一些假设。这也是一个相当冗长的操作。

// This is not intended to be the best solution, just to demonstrate the basic algorithm.
for (var r=0; r<256; r++) {
    for (var g=0; g<256; g++) {
        for (var b=0; b<256; b++) {
            // Assume we have 8 bits of alpha to use.
            for (var a=0; a<256; a++) {
                console.log('rgba(' + [r,g,b,a/255].join(',') + ')');
            }
        }
    }
}

【讨论】：

a 部分介于 0 和 1 之间
在 RGBA 中，alpha 通道不一定有 8 位（与 ARGB 不同，但那是另一回事）。
@PaulS。我正在寻找这方面的文档，但到目前为止还没有找到。有链接吗？
@PaulS。嗯，我看到了，但这并不能告诉你 Alpha 通道的位深度实际上是多少。
是的，我找不到任何命名数据类型，但 w3 中的示例使用 0.1，这不是 0.1 = x / 256 的整数解。不过，我不会说 256 个可能的 alpha 值还不够。

【解决方案2】：

CSS 中的颜色通常用它们的红色、绿色和蓝色值（0-255 之间的整数）来描述，有时还用 alpha 值表示透明度。

如果您对 alpha 值不感兴趣，可以在 CSS 中以 #RRGGBB 十六进制格式编写颜色。

如果我们忘记了我们正在使用红色、绿色和蓝色的分组，可以看出我们正在写一个介于 000000 (0) 和 FFFFFF (16777215) 之间的数字。因此，您可以将每种 RGB 颜色描述为该范围内的整数。

var i = 0, colour;
for (; i < 16777216; ++i) { // this is a BIG loop, will freeze/crash a browser!
    colour = '#' + ('00000' + i.toString(16)).slice(-6); // pad to 6 digits
    // #000000
    // #000001
    // ... #000100 ...
    // #FFFFFE
    // #FFFFFF
}

上面的代码循环了所有16777216颜色，所以我建议不要运行这样的循环，但你可以看到它如何将范围内的整数更改为唯一的十六进制颜色。

【讨论】：

【解决方案3】：

在 JavaScript 中，您可以在数字前使用“0x”将其设为十六进制，使用“0”将其设为八进制。使用这种方法，这应该是最好的代码。这可能会使您的网络浏览器崩溃，因为所有 CSS 中可能有 16,581,375 种不同的十六进制颜色。这比 1 兆字节（约 100 万）中的字节数或破解 17 个小写字母密码需要多少年的时间还要多。

var colors = new Array();
for(col=0x0;col<=0xFFFFFF;col++) {
  colors.push("#" + col);
}

【讨论】：