以十六进制循环显示RGB颜色

时间:2016-01-13 05:30:10

标签: javascript html colors

我正在使用表格创建颜色选择器类型工具。我想在16 x 16表中为每个单元格应用一种颜色。我在骑车时遇到麻烦可能是因为我不确定如何去做。我该怎么做?

1 个答案:

答案 0 :(得分:0)

六角

您可以使用此BaseConverter。创建一个循环,以给定的间隔写入0-255范围内的十进制数,将它们转换为六边形,并创建一个包含十六进制数字的字符串,其前面带有“#”(rgb)。

它的工作方式与下面的代码段相同,但您需要另外转换数字:"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调色板的外观,然后更改上面的代码。