使用:

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;
}
}

使用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提供的解决方案。

我只需要生成浅色(作为背景)，所以我使用了三个字母(#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;
}

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

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

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值。你可以不带参数调用它，得到我的默认设置，它通常会生成一个非常鲜艳的颜色，有明显的主色调，或者你可以提供你自己的范围数组。

这是我的两个版本的随机十六进制代码生成器。

/* 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))

我怀疑还有什么能比这条更快或更短:

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

挑战!

另一个随机颜色生成器:

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

随机颜色生成与亮度控制:

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

下面是对这个问题的另一种看法。

我的目标是创造充满活力和独特的颜色。为了确保颜色的不同，我避免使用随机生成器，并选择“均匀间隔”。彩虹的颜色。

这非常适合在谷歌地图中创建弹出式标记，具有最佳的“唯唯性”。(也就是说，没有两个标记会有相似的颜色)。

/**
* @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);
}

如果你想看看它的实际效果，请查看简单JavaScript彩虹颜色生成器为谷歌地图标记。

谁能打败它?

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

# EYZ0: # EYZ1

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

这段代码应该在所有情况下工作:

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

几乎所有以前的速记方法都会生成无效的十六进制代码(五位数)。我遇到了一个类似的技术，只是没有这个问题在这里:

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

测试

在控制台试试这个:

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

一个简短的答案，有精确大小的填充:

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

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

我的版本:

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

有很多方法可以做到这一点。以下是我做的一些:

简短的一行代码，保证有效的颜色

'#'+(Math.random().toString(16)+'00000').slice(2,8)

生成6个随机十六进制数字(0-F)

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


// ES6 one-liner version
[..."000000"].map(()=>Math.random().toString(16)[2]).join("")

生成单独的HEX组件(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;
}

过度设计的十六进制字符串(XORs 3输出一起形成颜色)

function randColor3() {
var str = Math.random().toString(16) + Math.random().toString(16),
sg = str.replace(/0./g,'').match(/.{1,6}/g),
col = parseInt(sg[0], 16) ^
parseInt(sg[1], 16) ^
parseInt(sg[2], 16);
return '#' + ("000000" + col.toString(16)).slice(-6);
}

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"用0填充它。这在我们获取子字符串时很重要，因为我们的最终结果每种颜色必须有两个字符。
例:74 -> 074
另一个例子:8 -> 08

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

我认为第一个回答是最简洁/有用的，但我只是写了一个初学者可能更容易理解的回答。

function randomHexColor(){
var hexColor=[]; //new Array()
hexColor[0] = "#"; //first value of array needs to be hash tag for hex color val, could also prepend this later


for (i = 1; i < 7; i++)
{
var x = Math.floor((Math.random()*16)); //Tricky: Hex has 16 numbers, but 0 is one of them


if (x >=10 && x <= 15) //hex:0123456789ABCDEF, this takes care of last 6
{
switch(x)
{
case 10: x="a"
break;
case 11: x="b"
break;
case 12: x="c"
break;
case 13: x="d"
break;
case 14: x="e"
break;
case 15: x="f"
break;
}
}
hexColor[i] = x;
}
var cString = hexColor.join(""); //this argument for join method ensures there will be no separation with a comma
return cString;
}

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

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

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

如果你像我一样是个新手，对十六进制之类的东西一无所知，这可能更直观。

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


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

您只需要以"rgb(255, 123, 220)"这样的字符串结束。

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

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

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

只是因为我可以，我创建了一个不可读的片段，在最小和最大十六进制代码之间随机…:

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

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

即:

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

但速度较慢。

你可以试试这个。这是一个绝对随机和舒适的颜色生成器))

var Color = '#';
var myElement;
for (var i = 0; i < 6; i++) {
function Random1(from, to) {
return Math.floor((Math.random() * (70 - 65 + 1)) + 65);
}
function Random2(from, to) {
return Math.floor((Math.random() * (1 - 0 + 1)) + 0);
}
function Random3(from, to) {
return Math.floor((Math.random() * (9 - 0 + 1)) + 0);
}
if (Random2()) {
myElement = Random3();
}
else {
myElement = String.fromCharCode(Random1());
}
Color += myElement;
}

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

保罗爱尔兰， JavaScript中的随机十六进制颜色代码生成器 . \{\{0写的文章绝对是惊人的。使用:

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

多亏了Haytam共享和padStart解决了十六进制代码长度的问题。

您还可以使用在所有优秀浏览器上可用的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)`

var html = '';
var red;
var green;
var blue;
var rgbColor;


for ( var i = 1; i <= 100; i += 1) {
red = Math.floor(Math.random() * 256 );
green = Math.floor(Math.random() * 256 );
blue = Math.floor(Math.random() * 256 );
rgbColor = 'rgb(' + red + ',' + green + ',' + blue + ')';
html += '<div style="background-color:' + rgbColor + '"></div>';
}


document.write(html);

这条线会为你随机改变颜色:

setInterval(function(){y.style.color=''+"rgb(1"+Math.floor(Math.random() * 100)+",1"+Math.floor(Math.random() * 100)+",1"+Math.floor(Math.random() * 100)+")"+'';},1000);

我已经生成了100种不同对比度的不同颜色，你可以根据需要增加数值:

Feedle的例子:http://jsfiddle.net/zFbfE/29/ -

// CHANGE THE INITIAL SEED HERE
Math.seed = 23;


/**
* Math.seededRandom()
*
*/
Math.seededRandom = function(max, min) {
max = max || 1;
min = min || 0;


Math.seed = (Math.seed * 9301 + 49297) % 233280;
var rnd = Math.seed / 233280.0;


return min + rnd * (max - min);
}


var c, r = 0,
l = 100000,
t,
random = [],
seededRandom = [];


for(var i=0; i<100; i++)
{
random[i] = 0;
seededRandom[i] = 0;
}


// Do some loops withouth benchmarking
// to have a "fair" comparison
/*for (c = 0; c < l; ++c) {
r = 5+5;
}*/




// benchmark Math.random()
t = new Date().getTime();
s = '';




// benchmark Math.seededRandom()
t = new Date().getTime();
while(l--){
r = Math.seededRandom();
seededRandom[(r*100)|0] += 1;
}


var inc = 0;
for(c=0; c<seededRandom.length; c++) {
//var inc=15;
for(var i=0; i<seededRandom.length; i++)
{
if(i!==c) {
if(seededRandom[c] == seededRandom[i]) {
seededRandom[c] += inc;
inc = inc + 10;
//    console.log(seededRandom[c]);
}
}
}
inc = inc > 255 ? 0 : inc;
}


var a=[], b=[], d=[], inc=0, dec=255;
for(c=0; c<seededRandom.length; c++) {
a[c] = (seededRandom[c] % 100) + inc;
b[c] = dec - Math.floor(seededRandom[c]/100);
if(b[c] < 0)
b[c] = b[c]* - 1;
if(a[c] > 255)
a[c] -= 255;
d[c] = Math.floor(b[c]/2);
inc += 5;
dec -= 5;
}




var app = angular.module("myAppp", []).controller('myCtrl',function($scope, $http) {
$scope.id = [];
for(var i=0; i<seededRandom.length; i++)
$scope.id.push(i);


// Generate random number
$scope.Icon = [];$scope.Icon2 = [], $scope.Icon3 = [];


var ran = 0, inc = 5, dec = 255;
for(var i=0;i<seededRandom.length;i++)
{
$scope.Icon.push(a[i]%100);
$scope.Icon2.push(b[i]%100);
$scope.Icon3.push(d[i]%100);
console.log(a[i] + "|" + b[i] + "|" + d[i]);
}


});

它对我有用，我想它对你也会有帮助。

这个例子中最好的一点是，它将生成100个随机颜色，并且每个页面加载的颜色都是相同的。

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

它不是超级高效，但对于合理的值(谁甚至可以轻松地区分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);
}

使用# EYZ0。

它生成一个由在视觉上不同颜色组成的调色板。

Distinct-colors是高度可配置的:

• 选择调色板中有多少种颜色
• 将色调限制在一个特定的范围内
• 限制色度(饱和度)到一个特定的范围
• 将亮度限制在一个特定的范围内
• 配置调色板的一般质量

function randomColor(format = 'hex') {
const rnd = Math.random().toString(16).slice(-6);
if (format === 'hex') {
return '#' + rnd;
}
if (format === 'rgb') {
const [r, g, b] = rnd.match(/.{2}/g).map(c=>parseInt(c, 16));
return `rgb(${r}, ${g}, ${b})`;
}
}

这段代码(莫森的)不能生成像#fcfc80这样的颜色。

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

尼古拉斯·布杜罗伊就是其中之一工作，除非Math.random()返回0，这是合理的。

'#' + (Math.random().toString(16) + "000000").substring(2,8)

这段代码生成了很多非法的颜色(比如#abcde)。

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

我一直在使用(+1或任何东西也很好，但我习惯了+2)

"#" + ((Math.random()+2)*16777216|0).toString(16).slice(1)

function getRandomColor()
{
var color = "#";


for (var i = 0; i < 3; i++)
{
var part = Math.round(Math.random() * 255).toString(16);


color += (part.length > 1) ? part : "0" + part;
}


return color;
}

此方法将获得一个随机数，将其转换为十六进制字符串，然后提取它的一部分，从而得到一个随机十六进制。

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

你可以用这个简单的函数

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

投票最多的回答表明，Martin Ankerl的方法比随机十六进制数字更好，尽管我还没有改进Ankerl的方法，但我已经成功地将其翻译成JavaScript。

我想我应该对这个已经非常大的Stack Overflow问题发布一个额外的答案，因为顶部的答案有另一个评论链接到一个带有Ankerl逻辑的JavaScript实现的Gist，而这个链接是坏的(404)。如果我有这样的声誉，我就会简单地注释我创建的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) : '';
}


// The next two methods are converted from Ruby to JavaScript.
// It is sourced 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 the golden ratio
const golden_ratio_conjugate = 0.618033988749895
let h = Math.random() // # Use a 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

试试这个包——https://www.npmjs.com/package/gen-random-colors。

它还提供了从0到5(0是最暗的)配置颜色集的能力。

增强了一点的一行代码，使方法更加生动

'#' + Math.round((0x1000000 + 0xffffff * Math.random())).toString(16).slice(1)

为了适当的随机性。

随机的颜色

`#${crypto.getRandomValues(new Uint32Array(1))[0].toString(16).padStart(8, 0).slice(-6)}`

随机的阿尔法，随机的颜色。

`#${crypto.getRandomValues(new Uint32Array(1))[0].toString(16).padStart(8, 0)}`

许多答案对Math.random()进行了不必要的调用。或者他们希望这个数字的十六进制表示，有六个字符。

首先将随机浮点数乘以范围[0, 0xffffff + 1)。现在我们的数字有了形式0xRRRRRR和一些变化，这是一个有24位有效位的数字。一次读取4位，并使用随机数[0, 15]并将其转换为lookup中匹配的十六进制字符。

function randomColor() {
var lookup = "0123456789abcdef";
var seed = Math.random() * 0x1000000;
return (
"#" +
lookup[(seed & 0xf00000) >> 20] +
lookup[(seed & 0x0f0000) >> 16] +
lookup[(seed & 0x00f000) >> 12] +
lookup[(seed & 0x000f00) >> 8] +
lookup[(seed & 0x0000f0) >> 4] +
lookup[seed & 0x00000f]
);
};

在这种情况下，我喜欢parseInt:

parseInt(Math.random()*0xFFFFFFFF).toString(16)

一个工作的单行解决方案(前导零填充):

var color = "#" + "colors".split("").map(function(){return parseInt(Math.random()*0x10).toString(16);}).join("");

递归:

var randomColor = (s='') => s.length === 6 ? '#' + s : randomColor(s + '0123456789ABCDEF'[Math.floor(Math.random() * 16)]);
randomColor();

使用ES6的Array.from()方法，我创建了这个解决方案:

function randomColor() {
return "#"+ Array.from({length: 6},()=> Math.floor(Math.random()*16).toString(16)).join("");
}

我见过的其他实现需要确保如果十六进制值有前导零，则该数字仍然包含六位数字。

K._的回答使用了ES6的padStart:

function randomColor() {
return `#${Math.floor(Math.random() * 0x1000000).toString(16).padStart(6, 0)}`
}

我见过的另一个好的单线解决方案是

function randomColor() {
return '#'+ ('000000' + (Math.random()*0xFFFFFF<<0).toString(16)).slice(-6);
}

地图

总是返回一个有效的 RGB颜色:

`rgb(${[1,2,3].map(x=>Math.random()*256|0)})`

let c= `rgb(${[1,2,3].map(x=>Math.random()*256|0)})`


console.log(c);
document.body.style.background=c

正则表达式

总是返回有效的十六进制6位数颜色

"#xxxxxx".replace(/x/g, y=>(Math.random()*16|0).toString(16))

let c= "#xxxxxx".replace(/x/g, y=>(Math.random()*16|0).toString(16));
       

console.log(c);
document.body.style.background=c

使用:

function randomColor(){
var num = Math.round(Math.random() * Math.pow(10,7));
// Converting number to hex string to be read as RGB
var hexString = '#' + num.toString(16);


return hexString;
}

可能是最简单的

'#' + Math.random().toString(16).substring(9)

您应该使用'#'+Math.floor(Math.random()*16777215).toString(16);作为随机颜色代码。

你的想法，但为什么是16777215?查看这篇文章:< a href = " https://dev。to/akhil_001/generating-random-color-with-single-line-of-js-code-fhj" rel="nofollow noreferrer">用一行JavaScript代码生成一个随机颜色

function generateRandomColor()
{
var randomColor = '#'+Math.floor(Math.random()*16777215).toString(16);
if(randomColor.length != 7){ // In any case, the color code is invalid
randomColor = generateRandomColor();
}
return randomColor;
// The random color will be freshly served
}
document.body.style.backgroundColor = generateRandomColor() // -> #E1AC94

用这个:

// RGBA()
function getRandomRGBA() {
function numbers() {
var x = Math.floor(Math.random() * 256);
return x;
}


alpha = 1.0;
return (
"rgba(" +
numbers() +
", " +
numbers() +
", " +
numbers() +
", " +
alpha.toFixed(1) +
")"
);
}

审查

这里的许多答案都是基于Math.random().toString(16)。他们有时会用一个随机数乘以一些数字，并假设转换到十六进制字符串总是会产生一个浮点十六进制表示，在点后面至少有6个数字(并且他们使用这些数字作为颜色)。

这是错误的假设

因为有很多数字实际上给出的数字小于6位(在点后面)。如果Math.random()选择了这样一个数字，那么得到的十六进制颜色将无效(除非有人处理这种情况)。下面是一个生成此类值的示例生成器(我基于这个转换器编写)。

function calc() {
let n = hex2dec(hexInput.value)
console.log(`${n} -> ${n.toString(16)}` );
}


// Source: https://stackoverflow.com/questions/5055723/converting-hexadecimal-to-float-in-javascript/5055821#5055821
function hex2dec(hex) {
hex = hex.split(/\./);
var len = hex[1].length;
hex[1] = parseInt(hex[1], 16);
hex[1] *= Math.pow(16, -len);
return parseInt(hex[0], 16) + hex[1];
}

Put some 5-digit (or less) hexdecimal number in range 0-1<br>
<input id="hexInput" value="0.2D4EE">
<button onclick="calc()">Calc</button>

我已经在没有这个假设的情况下对你的问题给出了两个答案:RGB和十六进制，所以在这个答案中，我不会给出另一个答案。

我想创建非常独特和充满活力的颜色(用于绘图)。对于任何严重的问题，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

有不需要使用JavaScript来生成一个随机的CSS颜色。

例如，在SCSS /萨斯中，你可以使用这样的代码:

.rgb-color-selector {
background-color: rgb(random(255), random(255), random(255));
}

或

.hsl-color-selector {
color: hsl(random(360) * 1deg, floor(random() * 100%), floor(random() * 100%));;
}

# EYZ0。

function generateRandomColor()
{
var randomColor = '#'+Math.floor(Math.random()*16777215).toString(16);
return randomColor;
//random color will be freshly served
}
document.body.style.backgroundColor = generateRandomColor() // -> #e1ac94
someDiv.style.color = generateRandomColor() // -> #34c7aa

这个只生成饱和色

let randomSaturatedColor = () => {
let r = Math.random().toString(16).slice(2, 4)
let value_012345 = Math.random().toString(6).slice(2, 3)
let hex = {
[0]: `${r}00FF`,
[1]: `00${r}FF`,
[2]: `00FF${r}`,
[3]: `${r}FF00`,
[4]: `FF${r}00`,
[5]: `FF00${r}`,
}[value_012345]
return '#' + hex
}

JS中的随机rgb颜色

const getRandomArbitrary = (min, max) => parseInt(Math.random() * (max - min) + min, 10)


const generateRandomRGBColor = () =>
`rgb(${getRandomArbitrary(0, 255)}, ${getRandomArbitrary(0, 255)}, ${getRandomArbitrary(0, 255)})`;


// generateRandomRGBColor()

或者你可以使用在线工具生成调色板-我已经建立了https://colorswall.com/palette/generate用于此目的。

# eyz0:(#000000 - # ffffff)

语法非常简单。我们将十六进制颜色指定为#RRGGBB。我们知道每个十六进制颜色(RR、GG和BB)由8个字节定义。记住，每个字节可以表示256个值。

• # EYZ0。GG和BB也类似。

这意味着十六进制颜色系统可以取256(R) × 256(G) × 256(B) = 16,777,216个值。

我们使用Math.random()和Math.floor()来获得一个范围为0到16777215的数字。

Math.floor(Math.random()*16777215)

最后，数字需要转换为以16为基数(十六进制)，我们可以通过使用toString(基数)得到这个。

Math.floor(Math.random()*16777215).toString(16);
//->12ef556
let randomColor = '#'+Math.floor(Math.random()*16777215).toString(16);

我想要材质-颜色ui。这个答案是stackoverflow回答

用这个github repo defaultPalette我做了这个javascript，你可以导入到，你可以通过const color= defaultPalette();或const color = defaultPalette('flatui');调用它

    <!-- language: lang-js -->
const defaultPalette = {
// Red, Pink, Purple, Deep Purple, Indigo, Blue, Light Blue, Cyan, Teal, Green, Light Green, Lime, Yellow, Amber, Orange, Deep Orange, Brown, Grey, Blue Grey
'50': ['#FFEBEE', '#FCE4EC', '#F3E5F5', '#EDE7F6', '#E8EAF6', '#E3F2FD', '#E1F5FE', '#E0F7FA', '#E0F2F1', '#E8F5E9', '#F1F8E9', '#F9FBE7', '#FFFDE7', '#FFF8E1', '#FFF3E0', '#FBE9E7', '#EFEBE9', '#FAFAFA', '#ECEFF1'],
'100': ['#FFCDD2', '#F8BBD0', '#E1BEE7', '#D1C4E9', '#C5CAE9', '#BBDEFB', '#B3E5FC', '#B2EBF2', '#B2DFDB', '#C8E6C9', '#DCEDC8', '#F0F4C3', '#FFF9C4', '#FFECB3', '#FFE0B2', '#FFCCBC', '#D7CCC8', '#F5F5F5', '#CFD8DC'],
'200': ['#EF9A9A', '#F48FB1', '#CE93D8', '#B39DDB', '#9FA8DA', '#90CAF9', '#81D4FA', '#80DEEA', '#80CBC4', '#A5D6A7', '#C5E1A5', '#E6EE9C', '#FFF59D', '#FFE082', '#FFCC80', '#FFAB91', '#BCAAA4', '#EEEEEE', '#B0BEC5'],
'300': ['#E57373', '#F06292', '#BA68C8', '#9575CD', '#7986CB', '#64B5F6', '#4FC3F7', '#4DD0E1', '#4DB6AC', '#81C784', '#AED581', '#DCE775', '#FFF176', '#FFD54F', '#FFB74D', '#FF8A65', '#A1887F', '#E0E0E0', '#90A4AE'],
'400': ['#EF5350', '#EC407A', '#AB47BC', '#7E57C2', '#5C6BC0', '#42A5F5', '#29B6F6', '#26C6DA', '#26A69A', '#66BB6A', '#9CCC65', '#D4E157', '#FFEE58', '#FFCA28', '#FFA726', '#FF7043', '#8D6E63', '#BDBDBD', '#78909C'],
'500': ['#F44336', '#E91E63', '#9C27B0', '#673AB7', '#3F51B5', '#2196F3', '#03A9F4', '#00BCD4', '#009688', '#4CAF50', '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800', '#FF5722', '#795548', '#9E9E9E', '#607D8B'],
'600': ['#E53935', '#D81B60', '#8E24AA', '#5E35B1', '#3949AB', '#1E88E5', '#039BE5', '#00ACC1', '#00897B', '#43A047', '#7CB342', '#C0CA33', '#FDD835', '#FFB300', '#FB8C00', '#F4511E', '#6D4C41', '#757575', '#546E7A'],
'700': ['#D32F2F', '#C2185B', '#7B1FA2', '#512DA8', '#303F9F', '#1976D2', '#0288D1', '#0097A7', '#00796B', '#388E3C', '#689F38', '#AFB42B', '#FBC02D', '#FFA000', '#F57C00', '#E64A19', '#5D4037', '#616161', '#455A64'],
'800': ['#C62828', '#AD1457', '#6A1B9A', '#4527A0', '#283593', '#1565C0', '#0277BD', '#00838F', '#00695C', '#2E7D32', '#558B2F', '#9E9D24', '#F9A825', '#FF8F00', '#EF6C00', '#D84315', '#4E342E', '#424242', '#37474F'],
'900': ['#B71C1C', '#880E4F', '#4A148C', '#311B92', '#1A237E', '#0D47A1', '#01579B', '#006064', '#004D40', '#1B5E20', '#33691E', '#827717', '#F57F17', '#FF6F00', '#E65100', '#BF360C', '#3E2723', '#212121', '#263238'],
'A100': ['#FF8A80', '#FF80AB', '#EA80FC', '#B388FF', '#8C9EFF', '#82B1FF', '#80D8FF', '#84FFFF', '#A7FFEB', '#B9F6CA', '#CCFF90', '#F4FF81', '#FFFF8D', '#FFE57F', '#FFD180', '#FF9E80'],
'A200': ['#FF5252', '#FF4081', '#E040FB', '#7C4DFF', '#536DFE', '#448AFF', '#40C4FF', '#18FFFF', '#64FFDA', '#69F0AE', '#B2FF59', '#EEFF41', '#FFFF00', '#FFD740', '#FFAB40', '#FF6E40'],
'A400': ['#FF1744', '#F50057', '#D500F9', '#651FFF', '#3D5AFE', '#2979FF', '#00B0FF', '#00E5FF', '#1DE9B6', '#00E676', '#76FF03', '#C6FF00', '#FFEA00', '#FFC400', '#FF9100', '#FF3D00'],
'A700': ['#D50000', '#C51162', '#AA00FF', '#6200EA', '#304FFE', '#2962FF', '#0091EA', '#00B8D4', '#00BFA5', '#00C853', '#64DD17', '#AEEA00', '#FFD600', '#FFAB00', '#FF6D00', '#DD2C00'],
'flatui': ['#1ABC9C', '#2ECC71', '#3498DB', '#9B59B6', '#34495E', '#16A085', '#27AE60', '#2980B9', '#8E44AD', '#2C3E50', '#F1C40F', '#E67E22', '#E74C3C', '#ECF0F1', '#95A5A6', '#F39C12', '#D35400', '#C0392B', '#BDC3C7', '#7F8C8D'],
'metro': ['#A4C400', '#60A917', '#008A00', '#00ABA9', '#1BA1E2', '#0050EF', '#6A00FF', '#AA00FF', '#F472D0', '#D80073', '#A20025', '#E51400', '#FA6800', '#F0A30A', '#E3C800', '#825A2C', '#6D8764', '#647687', '#76608A', '#A0522D']
}
const defaultBase = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', 'A100', 'A200', 'A400', 'A700', 'flatui', 'metro']


const randomIntFromInterval = (min, max) => { // min and max included
return Math.floor(Math.random() * (max - min + 1) + min)
}




export default (choosePalette)=>{
if (choosePalette === undefined) {
const nrindexdefault = defaultBase.length - 1;
const number = randomIntFromInterval(0, nrindexdefault);


const defaultPaletteColorsArray = defaultPalette[defaultBase[number]];
const nrindexcolor = defaultPaletteColorsArray.length - 1;
const defaultColor = randomIntFromInterval(0, nrindexcolor)
return defaultPaletteColorsArray[defaultColor];
} else {
const defaultPaletteColorsArray = defaultPalette[choosePalette];
const nrindexcolor = defaultPaletteColorsArray.length - 1;
const defaultColor = randomIntFromInterval(0, nrindexcolor)
return defaultPaletteColorsArray[defaultColor];
}


}

拥有相同的“随机”;颜色每次运行，而不是使用Math.random，你可以使用，例如，Mulberry32算法。

下面是使用输入元素的种子值mulberry32打印随机颜色行的演示。

为了得到一个随机的颜色值，我使用HLS“生成器”。其中除了随机的“;H"(hue)值(共360种颜色)使用随机的“;L"(亮度)值(从"40 %"到"60 %")。也每下一个"H"值至少与10相差，以防止相邻颜色过于相似。

function hlsGen(seed) {
if (isNaN(seed)) {
seed = 0;
}
const random = mulberry32(seed);
  

let preH = 0;
function getH() {
while (true) {
const newH = random() * 360;
if (Math.abs(preH - newH) > 10) {
preH = newH;
return newH;
}
}
}
  

return function() {
const H = getH();
const L = (40 + random() * 20) + "%";
return `hsl(${H}, 100%, ${L})`;
};
}


function mulberry32(seed = Date.now()) {
return function() {
let x = seed += 0x6D2B79F5;
x = Math.imul(x ^ x >>> 15, x | 1);
x ^= x + Math.imul(x ^ x >>> 7, x | 61);
return ((x ^ x >>> 14) >>> 0) / 4294967296;
}
}


// --- The example code ---
const input = document.createElement("input");
document.body.append(input);
input.addEventListener("input", () => {
const seed = Number(input.value);
const nextHls = hlsGen(seed);
document.querySelectorAll("div").forEach(div => div.remove());
for (let i = 0; i < 20; i++) {
const style = `border-left: 10px solid ${nextHls()};`;
document.body.insertAdjacentHTML("beforeend", `<div style="${style}">${i}</div>`);
}
});
input.value = 100;
input.dispatchEvent(new Event("input"));

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

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

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

创建一个基于任意随机值的唯一颜色

    selectColor(numberOrString) {
if (typeof numberOrString === "string") {
// convert string to number
numberOrString = numberOrString.toLowerCase().split('').reduce(function (a, b) {
a = ((a << 5) - a) + b.charCodeAt(0); // explained here: https://stackoverflow.com/a/7616484/112731
return a & a
}, 0);
}
const hue = numberOrString * 137.508; // use golden angle approximation
return `hsl(${hue},50%,75%)`;
}