以十六进制循环 RGB 颜色答案

【问题标题】：Cycling through RGB colors in hex以十六进制循环 RGB 颜色
【发布时间】：2016-01-13 05:30:09
【问题描述】：

我正在使用表格创建颜色选择器类型工具。我想为 16 x 16 表中的每个单元格应用颜色。我在循环颜色时遇到了麻烦，可能是因为我不知道该怎么做。我该怎么做？

【问题讨论】：

您能否详细说明“循环颜色”的含义？你有没有做过任何尝试？如果不是，你应该，然后再提出一个更具体、更不开放的问题。
十六进制颜色值远不止 256 种，一个 16×16 的网格只能包含 256 种颜色。你需要决定你想要哪些特定的颜色。
也许这可以作为一个起点：jsfiddle.net/ar3q406k/1

【解决方案1】：

六角形

您可以使用此BaseConverter。创建一个循环，以给定的间隔写入 0-255 范围内的十进制数，将它们转换为六角形，并创建一个包含三种颜色的十六进制数的字符串，在它们之前有一个“#”（rgb）。

它的工作方式与下面的 sn-p 相同，但您需要额外转换数字："rgb(" + (i * interval) + ", " + (j * interval) + ", " + (k * interval) + ")" 将更改为 "#" + bin2hex(i * interval) + bin2hex(j * interval) + bin2hex(k * interval)。

十进制举例

否则只需使用CSS Colors 的另一种格式，即rgb(red, green, blue)，它将十进制数作为参数。

/* Please keep in mind that this function is just an example.
   You can modify it to create different palette schemes. */
var tot = 800; /* total amount of blocks */
var num = Math.pow(tot, 1/3); /* amount of blocks in one axis */
var interval = parseInt(255 / num); /* color diff step */
var cont = document.getElementById("container");
var tmp = 0;
for (i = 0; i < num; i++) { 
    for (j = 0; j < num; j++) { 
       for (k = 0; k < num; k++) {
           /* creates block, add styled class and set color */
           var block = document.createElement("div");
           block.className = "foo";
           block.style.backgroundColor = "rgb(" + (i * interval) + ", " + (j * interval) + ", " + (k * interval) + ")";
           cont.appendChild(block);
           /* i - red, j - green, k - blue */
           tmp++;
       }
    }
}

.foo {
   width: 20px;
   height: 20px;
   float: left;
}

<!-- It will be populated with JS -->
<div id="container"></div>

如果我对您的问题的理解有误，那么抱歉。这就是我对“循环”的理解。

您可能遇到的问题是rgb() 需要三个参数，而您想用它创建二维数组。尝试在 google 图形中查找 rgb palette 以了解 RGB 调色板的外观，然后从上面更改代码。

【讨论】：