javascript - 如何 "sort"特定色调的颜色

Question

所以如果我使用randomColor为了生成“绿色”的相当随机的变化，我得到了这个例子:

这对我来说有点困惑，我想得到一个绿色列表，它们有某种顺序或排序。看起来它们彼此流动。更像这样:

问题是使用什么原则来以这种方式对颜色进行排序。我想知道如何构建一个比随机排列特定色调的颜色更令人愉悦的颜色网格。

我使用的代码很简单:

var randomColor = require('randomcolor')

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

如果有什么不同，我希望能够指定将颜色划分为的行数和列数。任何语言或伪代码都可以很好地解决这个问题，但在 JavaScript 中看到它，特别是如果它涉及像位移位这样的位操作，会有所帮助，但不是必需的。

This似乎不太符合我的要求。

Answer 1

图像上的绿色呈现出各种色调，然后当您向下移动时，它们的值会下降(黑色变少)。

你漂亮的颜色生成器 randomColor 基于一个奇怪的理论，即在颜色空间内通过黄金比例移动的颜色会更漂亮，基本上它只是确保你倾向于获得线性步骤。但是，该代码是 CC0 许可的，并且包含许多对您有用的东西。首先他们定义了什么是绿色。它们定义了如何从 RGB 转换为 HSL。我只需更改该代码，以通过正确的色调进行线性步进，然后在行方向上逐步调整值。

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

如果您确实想对这些颜色进行排序，您可以通过字面意义上的排序来对它们进行排序。在代码 randomColor 中使用 HexToHSB()，然后根据生成的色调值对值进行排序。这通常会有更浅、更明亮的颜色，但您可以清楚地看到整个图案不太困惑。

所有颜色空间往往都是 3 个值，因此将它们放入 2d 中往往有点笨拙，因此您不妨选择一两个指标并使用它们。

  function HexToHSB(hex) {
    hex = hex.replace(/^#/, '');
    hex = hex.length === 3 ? hex.replace(/(.)/g, '$1$1') : hex;

    var red = parseInt(hex.substr(0, 2), 16) / 255,
      green = parseInt(hex.substr(2, 2), 16) / 255,
      blue = parseInt(hex.substr(4, 2), 16) / 255;

    var cMax = Math.max(red, green, blue),
      cMin = Math.min(red, green, blue),
      delta = cMax - cMin,
      saturation = cMax ? (delta / cMax) : 0;

    switch (cMax) {
      case 0:
        return [0, 0, 0];
      case cMin:
        return [0, 0, cMax];
      case red:
        return [60 * (((green - blue) / delta) % 6) || 0, saturation, cMax];
      case green:
        return [60 * (((blue - red) / delta) + 2) || 0, saturation, cMax];
      case blue:
        return [60 * (((red - green) / delta) + 4) || 0, saturation, cMax];
    }
  }

  var input = 'green'
  var colors = randomColor({
    count: 200,
    hue: input
  })
  colors = colors.sort(function(a, b) {
    var hsva = HexToHSB(a);
    var hsvb = HexToHSB(b);
    return hsva[0] - hsvb[0];
  });
  div = document.createElement("div");
  document.body.appendChild(div);
  colors.forEach(function(element) {
    var d = document.createElement("button");
    d.style.cssText = 'padding:5px; font-size:22px; width:50px; height:50px; background-color:' + element;
    div.appendChild(d);
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/randomcolor/0.5.4/randomColor.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>