Paul Irish写的文章《JavaScript中的随机十六进制颜色代码生成器》绝对令人惊叹。使用:

'#' + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0');

感谢Haytam分享padStart来解决十六进制代码长度的问题。

这个函数在两个方面超越了其他答案:

它试图生成尽可能不同的颜色 20种颜色中哪一种与欧几里得距离最远 其他的都在HSV锥内。

它允许你限制色调， 饱和度，或值范围，但它仍然试图选择颜色作为 在这个范围内尽可能的不同。

它不是超级高效，但对于合理的值(谁甚至可以轻松地区分100种颜色?)够快了。

请参阅 JSFiddle

  /**
   * Generates a random palette of HSV colors.  Attempts to pick colors
   * that are as distinct as possible within the desired HSV range.
   *
   * @param {number}    [options.numColors=10] - the number of colors to generate
   * @param {number[]}  [options.hRange=[0,1]] - the maximum range for generated hue
   * @param {number[]}  [options.sRange=[0,1]] - the maximum range for generated saturation
   * @param {number[]}  [options.vRange=[0,1]] - the maximum range for generated value
   * @param {number[][]}[options.exclude=[[0,0,0],[0,0,1]]] - colors to exclude
   *
   * @returns {number[][]} an array of HSV colors (each HSV color
   * is a [hue, saturation, value] array)
   */
  function randomHSVPalette(options) {
    function random(min, max) {
      return min + Math.random() * (max - min);
    }

    function HSVtoXYZ(hsv) {
      var h = hsv[0];
      var s = hsv[1];
      var v = hsv[2];
      var angle = h * Math.PI * 2;
      return [Math.sin(angle) * s * v,
              Math.cos(angle) * s * v,
              v];
    }

    function distSq(a, b) {
      var dx = a[0] - b[0];
      var dy = a[1] - b[1];
      var dz = a[2] - b[2];
      return dx * dx + dy * dy + dz * dz;
    }

    if (!options) {
      options = {};
    }

    var numColors = options.numColors || 10;
    var hRange = options.hRange || [0, 1];
    var sRange = options.sRange || [0, 1];
    var vRange = options.vRange || [0, 1];
    var exclude = options.exclude || [[0, 0, 0], [0, 0, 1]];

    var points = exclude.map(HSVtoXYZ);
    var result = [];

    while (result.length < numColors) {
      var bestHSV;
      var bestXYZ;
      var bestDist = 0;
      for (var i = 0; i < 20; i++) {
        var hsv = [random(hRange[0], hRange[1]), random(sRange[0], sRange[1]), random(vRange[0], vRange[1])];
        var xyz = HSVtoXYZ(hsv);
        var minDist = 10;
        points.forEach(function(point) {
          minDist = Math.min(minDist, distSq(xyz, point));
        });
        if (minDist > bestDist) {
          bestHSV = hsv;
          bestXYZ = xyz;
          bestDist = minDist;
        }
      }
      points.push(bestXYZ);
      result.push(bestHSV);
    }

    return result;
  }

  function HSVtoRGB(hsv) {
    var h = hsv[0];
    var s = hsv[1];
    var v = hsv[2];

    var i = ~~(h * 6);
    var f = h * 6 - i;
    var p = v * (1 - s);
    var q = v * (1 - f * s);
    var t = v * (1 - (1 - f) * s);
    v = ~~(255 * v);
    p = ~~(255 * p);
    q = ~~(255 * q);
    t = ~~(255 * t);
    switch (i % 6) {
      case 0: return [v, t, p];
      case 1: return [q, v, p];
      case 2: return [p, v, t];
      case 3: return [p, q, v];
      case 4: return [t, p, v];
      case 5: return [v, p, q];
    }
  }

  function RGBtoCSS(rgb) {
    var r = rgb[0];
    var g = rgb[1];
    var b = rgb[2];
    var rgb = (r << 16) + (g << 8) + b;
    return '#' + ('000000' + rgb.toString(16)).slice(-6);
  }

有多种方法来创建随机十六进制颜色代码在博客文章中随机十六进制颜色代码生成器在JavaScript。当随机值小于0×100000时，你需要用0填充，所以下面是正确的版本:

var randomColor = "#000000".replace(/0/g,function(){return (~~(Math.random()*16)).toString(16);});

这将用一个随机的十六进制数字替换六个0中的每一个，因此它一定会得到一个完整的六位数有效颜色值。

我想创造非常独特和充满活力的颜色(用于绘图)。对于任何严重的问题，hsl是一个比rgb更好的方法。如有必要，您可以像其他人已经提到的那样将hsl转换为rgb。

简单的方法:

创建一个从0到360的随机色调 创建一个从0.5到1(或50到100)的随机饱和度 将亮度设置为50%以获得最佳能见度。

color_generator = () => hsl (360*Math.random(), 0.5 + Math.random()/2, 0.5)

修改方法

它创造了一个非常明亮和生动的颜色光谱，但问题是，在通常的颜色光谱中，红色、绿色、蓝色比黄色、青色和紫色更占主导地位。我通过acos函数变换了色调。技术原因很无聊，所以我跳过了，但你可以在维基上挖掘。

color_generator = () => {
    let color_section = Math.floor(Math.random()/0.33) // there are three section in full spectrum
    let transformed_hue = Math.acos(2*Math.random() - 1)/3.14 // transform so secondary colors would be as dominant as the primary colors
    let hue = 120*color_section + 120*transformed_hue
    return hsl(hue, 0.5 + Math.random()/2, 0.5)
}

在尝试了许多其他方法后，这是我得到的最好的色谱。

引用:

https://observablehq.com/@d3/color-schemes https://en.wikipedia.org/wiki/HSL_and_HSV

您可以使用colorchain.js生成具有不同色调的颜色序列。

所以，虽然这里所有的答案都很好，但我想对输出有更多的控制。例如，我想防止任何接近白色的阴影，同时确保我得到明亮的充满活力的颜色，而不是水洗阴影。

function generateColor(ranges) {
            if (!ranges) {
                ranges = [
                    [150,256],
                    [0, 190],
                    [0, 30]
                ];
            }
            var g = function() {
                //select random range and remove
                var range = ranges.splice(Math.floor(Math.random()*ranges.length), 1)[0];
                //pick a random number from within the range
                return Math.floor(Math.random() * (range[1] - range[0])) + range[0];
            }
            return "rgb(" + g() + "," + g() + "," + g() +")";
        };

所以现在我可以指定3个任意范围来选择rgb值。你可以不带参数调用它，得到我的默认设置，它通常会生成一个非常鲜艳的颜色，有明显的主色调，或者你可以提供你自己的范围数组。