javascript - 生成人类可区分的随机颜色

Question

我试图在 javascript 中随机生成十六进制颜色。

然而，生成的颜色几乎无法区分。
有什么办法可以改善吗？

---

这是我使用的代码:

function randomColor(){
   var allowed = "ABCDEF0123456789", S = "#";

   while(S.length < 7){
       S += allowed.charAt(Math.floor((Math.random()*16)+1));
   }
   return S;
}

---

我听说过一些关于 HSL 和 HSV 颜色模型的事情，但无法获得它在我的代码中工作。请帮忙。

提前致谢

Answer 1

选择最大不同颜色的最简单方法是使用 HSL 值而不是 RGB，然后操作 Hue，因为它的值从 0 到 360 值并且环绕(0 是红色，360 也是如此)；

如果您需要 10 种可区分的颜色，您可以将 360 除以 10，然后通过将值乘以索引(从零开始)来选择单独的颜色。这是一个示例函数，它允许您从中选择颜色:

function selectColor(colorNum, colors){
    if (colors < 1) colors = 1; // defaults to one color - avoid divide by zero
    return "hsl(" + (colorNum * (360 / colors) % 360) + ",100%,50%)";
}

通过这种方式，您可以通过随机化索引来随机化颜色选择，但颜色将始终位于同一调色板中。

这将从 10 种调色板中随机选择一种颜色:

var color = selectColor(Math.floor(Math.random() * 10), 10);

这也是:

var color = selectColor(Math.floor(Math.random() * 999), 10);

或者您可以从调色板中选择特定颜色，例如 13 种调色板中的第 9 种颜色(索引 8):

var color = selectColor(8, 13);

这里有一个可以玩的 fiddle :http://jsfiddle.net/2UE2B/

2020-02-23 更新:

所以，今天我需要解决同样的问题。在这里谷歌搜索这个答案(我知道，在 SO 上寻找东西的一种非常奇怪的方式)我遇到了 Golden Angle概念。这将使上面的示例更加简单，并且不需要提供预定数量的颜色:

function selectColor(number) {
  const hue = number * 137.508; // use golden angle approximation
  return `hsl(${hue},50%,75%)`;
}

这回答了@netoperator-wibby 的问题