随机颜色生成器

给定这个function，我想用随机的颜色生成器replace颜色。

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

我该怎么做？

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> 

Answer 2

我怀疑有什么比这个更快或者更短：

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

挑战！

Answer 3

这是另外一个解决这个问题的方法。

我的目标是创造鲜明而鲜明的色彩。 为了确保颜色不同，我避免使用随机发生器，并从彩虹中select“均匀间隔”的颜色。

这非常适合在Google地图上创build具有最佳“唯一性”（即没有两个标记具有相似颜色）的popup式标记。

 function rainbow(numOfSteps, step) { // This function generates vibrant, "evenly spaced" colours (ie 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); } 

如果你想看看这在行动看起来像什么，请参阅http://blog.adamcole.ca/2011/11/simple-javascript-rainbow-color.html 。

Answer 4

谁能击败它？

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

保证一直工作： http : //jsbin.com/OjELIfo/2/edit

根据@eterps注释，如果随机颜色的hex表示很短（ 0.730224609375 => 0.baf ），上面的代码仍然可以生成较短的string。

这个代码应该适用于所有情况：

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

Answer 5

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

Answer 6

不需要hex字母的散列。 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(); } 

Answer 7

随机亮度控制颜色生成：

 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(",") + ")"; } 

Answer 8

 '#'+Math.random().toString(16).slice(-3) // three-numbers format aka #f3c '#'+Math.random().toString(16).slice(-6) // six-number format aka #abc123 

Answer 9

这是@Anatoliy提供的解决scheme的一个转折点。

我只需要生成浅色（用于背景），所以我使用了三个字母（#AAA）格式：

 function get_random_color() { var letters = 'ABCDE'.split(''); var color = '#'; for (var i=0; i<3; i++ ) { color += letters[Math.floor(Math.random() * letters.length)]; } return color; } 

Answer 10

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

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

这会给你只有明亮的颜色，你也可以玩亮度，饱和度和阿尔法。

Answer 11

Paul Irish在JavaScript中随机hex颜色代码生成器写的文章是绝对惊人的。 使用：

 '#'+Math.floor(Math.random()*16777215).toString(16); 

这里是源代码链接：

http://www.paulirish.com/2009/random-hex-color-code-snippets/

Answer 12

使用Googlesearch可以很容易地find这一点：

 function random_color(format) { var rint = Math.round(0xffffff * Math.random()); switch(format) { case 'hex': return ('#0' + rint.toString(16)).replace(/^#0([0-9a-f]{6})$/i, '#$1'); break; case 'rgb': return 'rgb(' + (rint >> 16) + ',' + (rint >> 8 & 255) + ',' + (rint & 255) + ')'; break; default: return rint; break; } } 

更新版本：

 function random_color( format ){ var rint = Math.floor( 0x100000000 * Math.random()); switch( format ){ case 'hex': return '#' + ('00000' + rint.toString(16)).slice(-6).toUpperCase(); case 'hexa': return '#' + ('0000000' + rint.toString(16)).slice(-8).toUpperCase(); case 'rgb': return 'rgb(' + (rint & 255) + ',' + (rint >> 8 & 255) + ',' + (rint >> 16 & 255) + ')'; case 'rgba': return 'rgba(' + (rint & 255) + ',' + (rint >> 8 & 255) + ',' + (rint >> 16 & 255) + ',' + (rint >> 24 & 255)/255 + ')'; default: return rint; } } 

Answer 13

 var color = "#"; for (k = 0; k < 3; k++) { color += ("0" + (Math.random()*256|0).toString(16)).substr(-2); } 

这是如何工作的细分：

Math.random()*256获取从0到256（0到255）范围内的随机（浮点数）
示例结果：116.15200161933899

在小数点后面添加|0条。
例如：116.15200161933899 – > 116

使用.toString(16)将此数字转换为hex（基数16）。
例如：116 – > 74
另一个例如：228 – > e4

添加"0"填充零。 当我们得到子string时，这将是重要的，因为我们的最终结果必须有每个颜色的两个字符。
例如：74 – > 074
另一个例如：8 – > 08

.substr(-2)只是最后两个字符。
例如：074 – > 74
另一个例如：08 – > 08（如果我们没有添加"0" ，这将产生“8”而不是“08”）

for循环运行这个循环三次，将每个结果添加到颜色string，产生如下所示：
#7408e4

Answer 14

所以虽然这里所有的答案都很好，但是我想对输出进行更多的控制。 例如，我想防止任何接近的白色阴影，同时确保我得到明亮的鲜艳的色彩不被冲出阴影。

 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个任意范围来从中selectrgb值。 你可以调用它没有参数，并得到我的默认设置，通常会产生一个明显的主色调相当鲜艳的色彩，或者你可以提供自己的范围数组。

Answer 15

简短的答案与垫精确的大小

'#'+((1<<24)*(Math.random()+1)|0).toString(16).substr(1)

Answer 16

如果你是一个像我这样的高手，对hex等没有任何意义，这可能会更直观。

 function r() { return Math.random() * 255; } var color = 'rgb(' + r() + "," + r() + "," + r() + ')'; 

你只需要一个string，如'rgb(255, 123, 220)'

Answer 17

又一个随机的颜色生成器：

 var randomColor; randomColor = Math.random() * 0x1000000; // 0 < randomColor < 0x1000000 (randomColor is a float) randomColor = Math.floor(randomColor); // 0 < randomColor <= 0xFFFFFF (randomColor is an integer) randomColor = randomColor.toString(16); // hex representation randomColor randomColor = ("000000" + randomColor).slice(-6); // leading zeros added randomColor = "#" + randomColor; // # added 

Answer 18

你可以使用这个简单的function

 function getRandomColor(){ var color = "#" + (Math.random() * 0xFFFFFF << 0).toString(16); return color; } 

Answer 19

Array.prototype.reduce使得它非常干净。

 ["r","g","b"].reduce(function(res) { return res + ("0"+~~(Math.random()*256).toString(16)).slice(-2) }, "#") 

---

需要一个旧的浏览器垫片。

Answer 20

 function get_random_color() { return "#" + (Math.round(Math.random() * 0XFFFFFF)).toString(16); } 

http://jsfiddle.net/XmqDz/1/

Answer 21

使用不同的颜色 。

它生成视觉上不同颜色的调色板。

独特的颜色是高度可configuration的：

• select调色板中有多less种颜色
• 将色调限制在特定的范围内
• 将色度（饱和度）限制在特定的范围内
• 将亮度限制在特定范围内
• configuration调色板的一般质量

Answer 22

几乎所有以前的短手方法都会生成无效的hex代码（五位数字）。 我遇到了一个类似的技术，只有在这里没有这个问题：

 "#"+("000"+(Math.random()*(1<<24)|0).toString(16)).substr(-6) 

testing

在控制台中试试这个：

 for(i = 0; i < 200; i++) { console.log("#" + ("000" + (Math.random()*(1<<24)|0).toString(16)).substr(-6)); } 

Answer 23

答案最高的评论表明，Martin Ankerl的方法比随机的hex数更好，虽然我没有改进Ankerl的方法，但我已经成功地将其转换为JavaScript。 我想我会发布一个额外的答案，这已经是大型SO线程，因为最高的答案有一个链接到一个Gist与JS的Ankerl的逻辑实现和链接被打破（404）的另一个评论。 如果我有名誉，我会简单地评论我创build的jsbin链接。

 // adapted from // http://jsfiddle.net/Mottie/xcqpF/1/light/ const rgb2hex = (rgb) => { return (rgb && rgb.length === 3) ? "#" + ("0" + parseInt(rgb[0],10).toString(16)).slice(-2) + ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) + ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) : ''; } // next two methods converted from Ruby to JS // soured from http://martin.ankerl.com/2009/12/09/how-to-create-random-colors-programmatically/ // # HSV values in [0..1[ // # returns [r, g, b] values from 0 to 255 const hsv_to_rgb = (h, s, v) => { const h_i = Math.floor(h*6) const f = h*6 - h_i const p = v * (1 - s) const q = v * (1 - (f * s)) const t = v * (1 - (1 - f) * s) let r, g, b switch(h_i){ case(0): [r, g, b] = [v, t, p] break case(1): [r, g, b] = [q, v, p] break case(2): [r, g, b] = [p, v, t] break case(3): [r, g, b] = [p, q, v] break case(4): [r, g, b] = [t, p, v] break case(5): [r, g, b] = [v, p, q] break } return [Math.floor(r * 256), Math.floor(g * 256), Math.floor(b * 256)] } // # use golden ratio const golden_ratio_conjugate = 0.618033988749895 let h = Math.random() // # use random start value const gen_hex = (numberOfColors) => { const colorArray = [] while (numberOfColors > 0) { h += golden_ratio_conjugate h %= 1 colorArray.push(rgb2hex(hsv_to_rgb(h, 0.99, 0.99))) numberOfColors -= 1 } console.log(colorArray) return colorArray } gen_hex(100) 

https://jsbin.com/qeyevoj/edit?js,console

Answer 24

这是我的随机hex代码生成器的两个版本。

/* Slowest but shortest. */ "#000000".replace(/0/g,function(){return (~~(Math.random()*16)).toString(16);}); /* Good performance with small size. */ "#"+(function(a,b){while(a--){b+=""+(~~(Math.random()*16)).toString(16);} return b;})(6,""); /* Remy Sharp provided one that's the fastest but a little bit too long */ (function(h){return '#000000'.substr(0,7-h.length)+h})((~~(Math.random()*(1<<24))).toString(16))
/* Slowest but shortest. */ "#000000".replace(/0/g,function(){return (~~(Math.random()*16)).toString(16);}); /* Good performance with small size. */ "#"+(function(a,b){while(a--){b+=""+(~~(Math.random()*16)).toString(16);} return b;})(6,""); /* Remy Sharp provided one that's the fastest but a little bit too long */ (function(h){return '#000000'.substr(0,7-h.length)+h})((~~(Math.random()*(1<<24))).toString(16)) 

Answer 25

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

Answer 26

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

它试图通过找出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); } 

Answer 27

这个方法会得到一个随机数，把它转换成一个hex的string，然后提取一部分，给你一个随机的hex。

 function randomColor() { return "#" + Math.random().toString(16).slice(2,8); } 

Answer 28

我的版本：

 function RandomColor() { var hex = (Math.round(Math.random()*0xffffff)).toString(16); while (hex.length < 6) hex = "0" + hex; return hex; } 

Answer 29

只是因为我可以，我创build了一个不可读的片段随机在最小和最大的hex代码…：

 function a(f, s){ if(!s || !s.length > 1) return ""; var c = Math.floor(Math.random()*(parseInt("0x" + s.substr(0,2))-parseInt("0x" + f.substr(0,2))+1)+parseInt("0x" + f.substr(0,2))).toString(16); return (Array(3 - c.length).join("0")) + c + a(f.substr(2,f.length),s.substr(2,s.length)); } 

a("990099","ff00ff") →可能随机→ b5009e

它是成对的，所以a("12","f2") →可能随机化→ 8f 。 但是它不会超过'f2' 。

 var color = "#" + a("11","22") + a("33","44") + a("55","66"); 

这是一样的：

 var color = "#" + a("113355","224466") 

但速度较慢。

Answer 30

有很多方法可以做到这一点。 这是我做的两个：

生成六个随机的hex数字（0-F）

 function randColor() { for (var i=0, col=''; i<6; i++) { col += (Math.random()*16|0).toString(16); } return '#'+col; } 

生成单独的RGB分量（00-FF）

 function randColor2() { var r = ('0'+(Math.random()*256|0).toString(16)).slice(-2), g = ('0'+(Math.random()*256|0).toString(16)).slice(-2), b = ('0'+(Math.random()*256|0).toString(16)).slice(-2); return '#' +r+g+b; }