随机颜色生成器

Question

给定这个函数，我想用随机颜色生成器替换颜色。

document.overlay = GPolyline.fromEncoded({
    color: "#0000FF",
    weight: 10,
    points: encoded_points,
    zoomFactor: 32,
    levels: encoded_levels,
    numLevels: 4
});

我该怎么做？

- n00ki3

Answer 1

使用 getRandomColor() 替代 "#0000FF":

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}



function setRandomColor() {
  $("#colorpad").css("background-color", getRandomColor());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="colorpad" style="width:300px;height:300px;background-color:#000">

</div>
<button onclick="setRandomColor()">Random Color</button>

- Anatoliy

---

请注意，由于RGB包装颜色空间的方式，此内容偏向相当暗淡和不饱和的颜色。Martin Ankerl有一篇关于从其他空间（如HSV）生成颜色的好文章：http://martin.ankerl.com/2009/12/09/how-to-create-random-colors-programmatically/ - Thomas Ahle

你也可以像这样使用生成器函数：https://jsfiddle.net/zafbbvvj/。 - Taku

@WebWanderer 没错，有16777216种可能的RGB颜色变化。使用toString(16)将提供十六进制值。这是一种更快、更准确的生成颜色变化的方法。请注意16777215和16777216之间的区别。那是因为我们从0开始计数。所以你有16777216种不同的颜色，但最大值是16777215。 - Playdome.io

@Azarus 这太棒了。谢谢，伙计。我喜欢这种方法。 - WebWanderer

@Azarus 只是确保我还有一个脑细胞（以及未来的谷歌搜索者的文档记录！）。无论如何，这段代码非常有用。谢谢！ - sheng

Answer 2

我怀疑没有比这个更快或更短的方法：

"#" + ((1 << 24) * Math.random() | 0).toString(16).padStart(6, "0")

挑战！

- ZPiDER

---

'#'+(Math.random()*0xFFFFFF<<0).toString(16); 翻译为中文是：生成一个随机的16进制颜色代码，格式为 #xxxxxx。其中 x 代表 0-F 的十六进制数字。 - Mohsen

('00000'+(Math.random()*(1<<24)|0).toString(16)).slice(-6)将始终返回长度为6的值。尽管这种方法偶尔会返回像000cf4或0000a7这样的较小数字，这有点巧妙。在这些情况下，红色分量不参与生成随机颜色。 - bryc

自 2011 年以来，我已经复制并粘贴这段内容数十次用于新建的页面模型原型。非常真诚地感谢您！ - Dom Vinyard

Math.random().toString(16).slice(-6) 简短清晰 :) （该代码）生成一个六位的随机十六进制数。 - bryc

代码易于理解的代码。 \#${Math.floor(Math.random() * 0x1000000).toString(16).padStart(6, 0)}`` - Константин Ван

Answer 3

这是解决此问题的另一种方法。

我的目标是创建鲜明而独特的颜色。为了确保颜色不同，我避免使用随机生成器，并从彩虹中选择“均匀分布”的颜色。

这非常适合在Google Maps中创建突出显示的标记，具有最佳的“独特性”（即没有两个标记具有相似的颜色）。

/**
 * @param numOfSteps: Total number steps to get color, means total colors
 * @param step: The step number, means the order of the color
 */
function rainbow(numOfSteps, step) {
    // This function generates vibrant, "evenly spaced" colours (i.e. no clustering). This is ideal for creating easily distinguishable vibrant markers in Google Maps and other apps.
    // Adam Cole, 2011-Sept-14
    // HSV to RBG adapted from: http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript
    var r, g, b;
    var h = step / numOfSteps;
    var i = ~~(h * 6);
    var f = h * 6 - i;
    var q = 1 - f;
    switch(i % 6){
        case 0: r = 1; g = f; b = 0; break;
        case 1: r = q; g = 1; b = 0; break;
        case 2: r = 0; g = 1; b = f; break;
        case 3: r = 0; g = q; b = 1; break;
        case 4: r = f; g = 0; b = 1; break;
        case 5: r = 1; g = 0; b = q; break;
    }
    var c = "#" + ("00" + (~ ~(r * 255)).toString(16)).slice(-2) + ("00" + (~ ~(g * 255)).toString(16)).slice(-2) + ("00" + (~ ~(b * 255)).toString(16)).slice(-2);
    return (c);
}

如果你想看看这个是如何实现的，请查看 Simple JavaScript Rainbow Color Generator for Google Map Markers。

- Adam Cole

---

更新链接：http://blog.adamcole.ca/2011/11/simple-javascript-rainbow-color.html - neuquen

参数的值会是什么？ - Ekramul Hoque

我也创建了类似的东西，但它相当随机且非常独特。 伪代码在这里。 它使用hsv而不是rgb，因为hsv具有更可预测的行为。 如果您想查看Python实现，我在这里和这里使用了它。 您将不得不在代码中搜索“color”。 - zondo

@RobertMolina：抱歉，我已将我的东西转移到Gitlab。伪代码现在在这里，项目在这里和这里。 - zondo

我该如何避免使用过于鲜艳的颜色？ - Thadeus Ajayi

Answer 4

谁能打败它？

'#' + Math.random().toString(16).substr(-6);

这保证了它始终起作用: http://jsbin.com/OjELIfo/2/edit

基于eterps的评论，如果随机颜色的十六进制表示非常短(0.730224609375 => 0.baf)，则上面的代码仍然可以生成更短的字符串。

此代码应在所有情况下工作:

function makeRandomColor(){
  var c = '';
  while (c.length < 7) {
    c += (Math.random()).toString(16).substr(-6).substr(-1)
  }
  return '#' + c;
}

- Mohsen

---

当 Math.random() 返回 0.022092682472568126 时，此代码生成无效的 '#5a7dd' 字符串。太疯狂了！ - Piotr Rochala

喜欢这个，因为 #ffffff 不经常出现。 - Warface

有很多情况下这种方法是行不通的。请查看以下 Math.random() 的输出结果：0.730224609375、0.43603515625、0.957763671875 等等... - eterps

简短版：当Math.random返回0.125时，结果是"#0.2"（无效） - Kamil Kiełczewski

甚至更基本的是：0 是 Math.random 的一个有效返回值，而 '#' + (0).toString(16).substr(-6) 就是 "＃0"。如果您不介意，我会在 _它保证一直工作_ 上画个删除线以避免给别人造成困惑？ - bluenote10

Answer 5

你也可以在每个好的浏览器上使用 HSL（http://caniuse.com/#feat=css3-colors）。

function randomHsl() {
    return 'hsla(' + (Math.random() * 360) + ', 100%, 50%, 1)';
}

这将给你只有明亮的颜色，你可以试着调整亮度、饱和度和透明度。

// es6
const randomHsl = () => `hsla(${Math.random() * 360}, 100%, 50%, 1)`

- kigiri

---

谢谢！我成功地使用以下代码获得了完美的背景颜色：'hsla(' + (Math.floor(Math.random()*360) + ', 100%, 70%, 1)'。 - Redoman

没问题，我很惊讶没有人使用 HSL 的强大功能 :) - kigiri

hsla是不需要的，alpha=1就可以了，只需使用hsl。 - user1693593

你不能用这种方式生成16M种颜色（例如，你永远无法得到白黑灰度）- 但是如果我们对每个组件使用随机数，则可以获得所有的HSL颜色。 - Kamil Kiełczewski

这样做可以更轻松地使用亮度和饱和度来设置随机背景颜色，同时确保文本始终可读。 - Osvaldo Maria

Answer 6

不需要使用十六进制字母的哈希值。JavaScript可以自行完成此操作：

function get_random_color() {
  function c() {
    var hex = Math.floor(Math.random()*256).toString(16);
    return ("0"+String(hex)).substr(-2); // pad with zero
  }
  return "#"+c()+c()+c();
}

- Alsciende

Answer 7

我喜欢这个代码：'#' + (Math.random().toString(16) + "000000").substring(2,8)

- Nicolas Buduroi

---

或者 '#' + Math.floor(Math.random()*16777215).toString(16); - Mohammad Anini

@MohammadAnin 这有1/16的概率产生少于6位数字。 - James

这可能会生成无效的颜色。例如'#' + (0.125).toString(16).substring(2, 8) === '#2'。这是危险的，因为概率很低（我认为是4096分之1），所以有可能会通过测试的错误。你应该使用'#' + Math.random().toString(16) + "000000").substring(2, 8)。 - James

更正：应该是 '#' + (Math.random().toString(16) + "000000").substring(2,8)。 - James

Answer 8

这篇由Paul Irish撰写的文章，JavaScript中的随机十六进制颜色代码生成器，内容非常精彩。使用方法：

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

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

- way2vin

Answer 9

随机颜色生成并带有亮度控制：

function getRandColor(brightness){

    // Six levels of brightness from 0 to 5, 0 being the darkest
    var rgb = [Math.random() * 256, Math.random() * 256, Math.random() * 256];
    var mix = [brightness*51, brightness*51, brightness*51]; //51 => 255/5
    var mixedrgb = [rgb[0] + mix[0], rgb[1] + mix[1], rgb[2] + mix[2]].map(function(x){ return Math.round(x/2.0)})
    return "rgb(" + mixedrgb.join(",") + ")";
}

- letronje

---

非常酷，尽管它生成的大多是“柔和”的颜色，而不是我希望看到的更鲜艳的颜色，当我看到亮度时。仍然进入我的技巧袋！ - JayCrossler

我真的很喜欢这个，因为你可以将它定制成与你的网站配色协调。 - Emanuel Gianico

Answer 10

如果你像我一样是一个新手，在十六进制等方面毫无头绪，这可能更容易理解。

function r() {
  return Math.floor(Math.random() * 256);
}

const color = "rgb(" + r() + "," + r() + "," + r() + ")";

您只需要得到一个字符串，例如"rgb(255, 123, 220)"。

- ICoffeeConsumer