Javascript 如何"；排序“；特定色调的颜色

因此，如果我使用生成一个非常随机的“绿色”变量，我得到如下示例：

这对我来说有点混乱，相反，我想得到一个绿色的列表，它们有一定的顺序或排序。看起来它们好像是互相流入的。更像这样：

问题是用什么原则来对颜色进行排序。我想知道我如何才能着手构建一个比特定色调的随机颜色组合更令人愉悦的颜色网格

我使用的代码如下所示：

var randomColor = require('randomcolor')

var input = process.argv[2]
var colors = randomColor({
  count: 20,
  hue: input
})

如果有区别的话，我希望能够指定要划分颜色的行数和列数。任何语言或伪代码都可以理解这一点，但在JavaScript中看到它，特别是当它涉及位移位之类的位操作时，会有所帮助，但不是必需的

似乎不完全符合我的要求。

（不希望这是一个包含完整代码的答案）

在第二张图中，你的果岭从蓝绿色穿过顶部，变成黄绿色。实际上，这意味着左上角的绿色是“0红色，可能是255绿色和200蓝色”。在另一边，右上角，可能是“200红，255绿，0蓝”。（我本可以通过使用颜色检测器使这些更准确，但我正在打电话）

通过降低r g b值，将行向下移动到黑色，因此对于中间行，它们可能从rgb 0127100下降到rgb 100127,0

从算法上讲，使用hsv颜色而不是rgb可能更容易做到这一点，因为跨列的颜色从较高的色调变为较低的色调，向下的行从较高的值变为较低的值。这可能比进行rgb计算更容易实现，因为您只需要接受从h+40到h-40（从360的全轮）的色调和矩阵（您可能需要要求行和列，而不仅仅是20行，否则您如何知道输出5x4或4x5）

（不希望这是一个包含完整代码的答案）

第二张图片中的绿色，从蓝绿色到黄绿色的顶部。实际上，这意味着左上角的绿色是“0红色，可能是255绿色和200蓝色”。在另一侧，右上角，可能是“200红色，255绿色，0蓝色”。（我本可以通过使用颜色检测器使这些更准确，但我正在打电话）

通过降低r g b值，将行向下移动到黑色，因此对于中间行，它们可能从rgb 0127100下降到rgb 100127,0

---

从算法上讲，虽然使用hsv颜色而不是rgb可能更容易做到这一点，因为跨列的颜色从较高的色调变为较低的色调，向下的行从较高的值变为较低的值。这可能比使用rgb数学更容易实现，因为您只需要接受从h+40到h+40的色调h-40（来自360的全轮）和矩阵（您可能需要要求行和列，而不仅仅是20行，否则您将如何知道输出5x4或4x5）

图像上的绿色穿过各种颜色，然后在向下移动时，它们的值下降（黑色变少）

你的美丽颜色生成器randomColor基于一个奇怪的理论，即在颜色空间中通过黄金比例的颜色会更漂亮，基本上它只是确保你倾向于获得线性步长。但是，代码是CC0许可的，并且包含了许多有用的东西。首先，它们定义了什么是绿色。而y定义如何从RGB转换到HSL。我只需要修改代码，使其通过正确的色调进行线性步进，然后沿行方向步进值

但是，这将只是每次创建相同的颜色，因此您可以定义您喜欢的绿色列表

如果你真的想对这些颜色进行排序，你可以直接对它们进行排序。在代码randomColor中使用HexToHSB（），然后根据得到的色调值对值进行排序。这通常会有更亮更亮的颜色，但你可以清楚地看到一个不太混乱的图案

所有颜色空间通常都是3个值，所以将它们放在2d中有点麻烦，所以您最好选择一个或两个度量并使用它们

函数HexToHSB（hex）{
十六进制=十六进制。替换（/^#/，“”）；
十六进制=十六进制长度===3？十六进制替换（/（）/g，$1$1'）：十六进制；
var red=parseInt（十六进制substr（0,2），16）/255，
绿色=parseInt（十六进制substr（2，2），16）/255，
blue=parseInt（十六进制substr（4,2），16）/255；
var cMax=数学最大值（红色、绿色、蓝色），
cMin=数学最小值（红色、绿色、蓝色），
δ=cMax-cMin，
饱和度=cMax？（δ/cMax）：0；
开关（cMax）{
案例0：
返回[0,0,0]；
案例cMin：
返回[0,0，cMax]；
红色表壳：
返回[60*（（绿-蓝）/delta）%6）| | 0，饱和度，cMax]；
绿色外壳：
返回[60*（（蓝-红）/delta）+2）| | 0，饱和度，cMax]；
蓝色表壳：
返回[60*（（红-绿）/增量）+4）| | 0，饱和度，cMax]；
}
}
变量输入='绿色'
变量颜色=随机颜色({
计数：200，
色调：输入
})
颜色=颜色。排序（函数（a，b）{
var hsva=六角体hsb（a）；
var hsvb=六角体hsb（b）；
返回hsva[0]-hsvb[0]；
});
div=document.createElement（“div”）；
文件.正文.附件（div）；
颜色。forEach（函数（元素）{
var d=document.createElement（“按钮”）；
d、 style.cssText='填充：5px；字体大小：22px；宽度：50px；高度：50px；背景色：'+元素；
儿童组（d）；
})；

---

图像上的绿色穿过各种色调，然后向下移动时，它们的值会下降（黑色变少）

您的漂亮颜色生成器randomColor是谓词