随机颜色生成器


440

鉴于此功能,我想更换颜色与颜色随机发生器。

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

我该怎么做?


31
'#'+ Math.floor(Math.random()* 16777215).toString(16);
SepehrM 2014年


2
@SepehrM,当随机返回0.001则结果为"#4189"(无效颜色-4位数字)
KamilKiełczewski19年

这是一个非常好的解决方案,对我来说非常有用github.com/davidmerfield/randomColor
maikelm

5
'#'+Math.random().toString(16).substr(2,6) (来源:CodeGolf
ashleedawg,

Answers:


1018

使用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>


87
请注意,由于RGB包装颜色空间的方式,这会偏向于较暗和不饱和的颜色。马丁·安克尔(Martin Ankerl)也有一篇不错的文章,也介绍了如何从其他空间(例如HSV)生成颜色:martin.ankerl.com/2009/12/09/…–
Thomas Ahle

13
使用时击中0或15的几率Math.round(Math.random()*15)只有1:30,而其他数字的几率是1:15。
user123444555621 2012年

3
您可以删除.split('')调用。字符串已经具有数组索引器。
ujeenator

3
你也可以使用一个发电机功能这样
tsuz

4
这段代码很la脚。继承人:Math.floor(Math.random()* 16777215).toString(16)
DDD

269

我怀疑任何事物都会比这更快或更短:

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

挑战!


18
您忘了填零。
user123444555621

143
'#'+(Math.random()*0xFFFFFF<<0).toString(16);
莫森

15
@Mohsen,FYI每一个现在,那么你的代码会产生无效的5位数字
rochal

6
结果未填充到6位数字
Taha Jahangir 2012年

32
('00000'+(Math.random()*(1<<24)|0).toString(16)).slice(-6)将始终返回长度为6的长度,尽管此方法仍会(很少)返回较小的数字,这些数字给出的结果类似,000cf4或者0000a7我觉得有点怪异。在这些情况下,红色成分不会影响随机颜色。
bryc 2012年

162

这是对此问题的另一种看法。

我的目标是创造鲜艳鲜明的色彩。为了确保颜色鲜明,我避免使用随机生成器,而是从彩虹中选择“均匀分布”的颜色。

这非常适合在Google地图中创建具有最佳“唯一性”(即,没有两个标记具有相似颜色)的弹出标记。

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

如果您希望看到实际效果,请参阅http://blog.adamcole.ca/2011/11/simple-javascript-rainbow-color.html


7
我一直在寻找这样的东西!好东西!
科隆2012年

我已对与类似问题stackoverflow.com/a/14187677/421010
安德鲁

15
那么参数的值是多少?
Ekramul Hoque

2
我也创建了类似的东西,但是它是随机的并且非常独特。伪代码在这里。它使用hsv而不是rgb,因为hsv具有更可预测的行为。如果您希望看到Python的实现,那么我在这里这里都使用了它。您必须在代码中搜索“颜色”。
zondo 2016年

1
@RobertMolina:对不起,我把东西搬到了Gitlab。伪代码现在在这里,项目在这里这里
zondo

56

谁能打败它?

'#'+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;
}

12
当Math.random()返回0.022092682472568126时,此代码将生成无效的'#5a7dd'字符串。疯!
rochal 2011年

因为#ffffff不会经常出现,所以就这样。
Warface 2014年

在很多情况下,这是行不通的。检查Math.random()的以下输出... 0.730224609375、0.43603515625、0.957763671875,列表继续...
表示

@eterps那些不是正确的随机数!请参阅原始的IEEE 754十六进制double :0.730224609375 = 0x3fe75e0000000000, 0.43603515625 = 0x3fdbe80000000000, 0.957763671875 = 0x3feea60000000000几乎没有使用任何尾数!他们只是美化的分数。一个正确的:'12位”输出将产生类似的结果0.347876714234 = 0x3fd6439cb1ab32ac, 0.447556256665 = 0x3fdca4c2ff5fc450
bryc

自2015年以来,我相信许多网络浏览器已经Math.random()用更好的替代了那些在幕后使用的糟糕的PRNG (我必须假定这负责@etertp的结果),因此那些低质量的随机数类型已经成为过去现在。
bryc

29

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

29

您还可以在每个好的浏览器上使用HSL(http://caniuse.com/#feat=css3-colors

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

这只会给您明亮的颜色,您可以尝试亮度,饱和度和Alpha。

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

谢谢!我设法通过以下方法获得完美的背景颜色:'hsla(' + (Math.floor(Math.random()*360) + ', 100%, 70%, 1)'
jj_ 2014年

1
没有问题,我很惊讶没有人使用hsl的力量:)
kigiri 2014年

stackoverflow.com/a/23861752/1693593,不需要hsla,如果alpha = 1,只需使用hsl

1
您无法以这种方式生成16M kolor(例如,您永远不会获得白黑灰度)-但是,是的-如果我们对每个分量使用随机值,那么我们将获得所有的hsl齿轮
KamilKiełczewski19年

1
+1这样可以更轻松地使用亮度和饱和度设置随机的背景颜色,同时确保文本始终可读
Osvaldo Maria

27

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


'#' + Math.floor(Math.random()*16777215).toString(16);
Mohammad Anini 2015年

@MohammadAnin有16分之一的机会产生少于6位数字
James

1
这可能会生成无效的颜色。例如'#' + (0.125).toString(16).substring(2, 8) === '#2'。这很危险,因为概率很低(我认为是4096分之一),因此很可能会通过测试导致错误。您应该('#' + Math.random().toString(16) + "000000").substring(2, 8)
詹姆斯

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

25

具有亮度控制的随机颜色生成:

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

1
非常酷,虽然大多数情况下会生成“粉彩”,而不是我看到亮度时希望的更鲜艳的色彩。仍在我的把戏里!
JayCrossler 2012年

我非常喜欢这个,因为您可以对其进行自定义,使其与您的网站调色板保持一致
Emanuel Gianico 2015年

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

我喜欢它的易读性
hitautodestruct

1
如果Math.random()返回,0.125则结果将是#0.2(无效的颜色)(您需要添加一些填充而不是切片)
KamilKiełczewski19年

18

Paul Irish在JavaScript中使用“随机十六进制颜色代码生成器”撰写的文章绝对令人惊讶。采用:

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

这是源链接:

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


5
这有时会返回格式不正确的颜色值,例如“ 1fa4c”(需要3个或6个字符)
jj_ 2014年

1
@jj_是吗?抱歉,我没有注意到。感谢您的分享
way2vin 2014年

当随机返回时,0.00001结果是#a7(无效颜色)
KamilKiełczewski19年

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

17

这与@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;
}

我认为这很可能会产生大多数颜色,尽管光线相似。对于较稀疏的随机颜色范围,我认为
@Anatoli

15

如果您是像我这样的菜鸟,对十六进制等一无所知,这可能会更直观。

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

var color = 'rgb(' + r() + "," + r() + "," + r() + ')';

您只需要以如下字符串结尾 'rgb(255, 123, 220)'


这个答案应该是头等的答案
Gil Epshtain '18

您必须使用256才能获得0。
丽莎·塞里利

13

使用Google搜索可以很容易地找到它:

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

1
可能是吧; 但是您希望将Google Adwords收入转到哪个网站?=)
大卫说应

2
哪个网站为您提供了答案?如果他们为您提供了答案,那么他们应该会获得成功。
时髦的家伙2009年

1
@FunkyDude现在此结果是Google上的第一名,并且stackoverflow存在的原因是不要太频繁地使用Google;)
Akshat 2013年


10
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)将该数字转换为十六进制(以16为底)。
例如:116-> 74
另一个例如:228-> e4

"0"其加零。当我们获得子字符串时,这将很重要,因为我们的最终结果每种颜色必须有两个字符。
例如:74-> 074
其他例如:8-> 08

.substr(-2)仅获取最后两个字符。
例如:074-> 74
另一个例如:08-> 08(如果未添加"0",则将产生“ 8”而不是“ 08”)

for循环运行此循环三次,将每个结果添加到颜色字符串中,产生如下所示:
#7408e4


你应该充实自己的答案。
13年

8

因此,尽管这里的所有答案都不错,但我还是希望对输出有更多的控制。例如,我想防止出现任何接近白色的阴影,同时确保获得明亮的鲜艳颜色,而不是淡化阴影。

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值。您可以不带任何参数调用它,并获得我的默认设置,该默认设置通常会生成一种非常鲜明的颜色,并带有明显的显性阴影,或者您可以提供自己的范围数组。


1
Google Map API仅支持“ #FFFFFF”格式的十六进制HTML颜色。
Valery Viktorovsky

当然,将数字转换为十六进制n.toString(16)的唯一方法很简单,那就是您将需要零填充以确保从内部g函数获得两个字符的返回值。
Ollie Edwards 2010年

8

最高答案的最高投票意见表明,Martin Ankerl的方法比随机十六进制数更好,尽管我没有对Ankerl的方法进行改进,但我已成功将其翻译为JavaScript。我想我应该为这个已经很大的SO线程发布一个额外的答案,因为最上面的答案还有另一条评论链接到具有Ankerl逻辑的JS实现的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) : '';
}

// 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,控制台


7

为了获得体面的随机性。

颜色随机

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

随机alpha,随机颜色。

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

7

您可以通过多种方法来完成此任务。这是我做的一些事情:

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

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

极短的单缸

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

生成单个十六进制分量(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;
}

过度设计的十六进制字符串(XOR 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);
}

极值一线:当随机返回时,0.125结果是#0.2(无效颜色)
KamilKiełczewski19年

@KamilKiełczewski 0.125= 3FC0000000000000IEEE十六进制中。3个十六进制数字是指数,13个是尾数。有一个1万亿4.5的机会,尾数完全是空的那样。我在Firefox / Chrome中测试了1亿次。您只是打破它;)。Math.random应该永远不会给你0.125。如果是的话,PRNG存在问题,这不是我的问题。分数0.5、0.25、0.0625等是无用的,它们不包含随机性。也许您对此极端情况有解决方案,嗯?;)
bryc

是的'#'+Math.random().toString(16).split('.')[1].slice(-6).padStart(6,0),但我更喜欢
卡米尔Kiełczewski

6

另一个随机颜色生成器:

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


6

您可以使用此简单功能

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

1
当随机返回0.001的结果是"#4189"(无效的颜色4位数字)
KamilKiełczewski,


5

使用独特的颜色

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

独特的颜色是高度可配置的:

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

3541线在这里code..where其他的答案是〜6-10线......让我印象深刻没人如何写代码那么多行只是为了挑选不同的颜色..
VSYNC

挑选真正视觉上不同的颜色需要的数学运算不仅仅是随机的颜色生成器。
InternalFX'2

我只是在两行中完成了此操作。.修改了此功能:stackoverflow.com/a/20129594/104380
vsync

不是那么简单。建议阅读
InternalFX

谢谢,非常有趣的文章。我的方法总是提供相同的颜色,并且结果是一致且独特的。我猜在某些情况下,您可能需要真正随机且分布均匀的颜色,这对人眼来说很漂亮。
vsync

3

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


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


3

此功能以两种方式超越其他答案:

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

3

几乎所有以前的速记方法都生成无效的十六进制代码(五位数)。我碰到过类似的技术,但是这里没有这个问题:

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

测试

在控制台中尝试:

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

4
我做了一个for循环,运行了此代码20000次,并且仅在长度小于7的情况下才打印到控制台,并且确实找到了字符串小于6个字符的情况。另外,此代码的一个问题是,它仅填充整个6位数字的字符串,而不填充单个2位数字的颜色代码,这意味着红色值比绿色或蓝色值更可能为零。
艾琳·海明

当随机返回0.00001的结果是"#000a7"(无效的颜色-5位数字)
KamilKiełczewski19

3

我的版本:

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

我认为不随机0会使颜色random不够XD
shrekuu 2015年

我们仅生成一个从0到的十六进制数ffffff。这是一个完美的均匀分布。出于浏览器使用方面的考虑,该零仅表示完整的字符串。我建议您在此解决方案上多加小心。
Prostakov

我确实做了一些调整,但未链接到您的评论:)
Prostakov

感谢Prostakov。:D
shrekuu


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.