Лучший способ генерировать случайный цвет в javascript?

Без использования каких-либо фреймворков.

Я написал 2 функции:

function get_random_color() 
{
    var color = "";
    for(var i = 0; i < 3; i++) {
        var sub = Math.floor(Math.random() * 256).toString(16);
        color += (sub.length == 1 ? "0" + sub : sub);
    }
    return "#" + color;
}

function get_rand_color()
{
    var color = Math.floor(Math.random() * Math.pow(256, 3)).toString(16);
    while(color.length < 6) {
        color = "0" + color;
    }
    return "#" + color;
}

Что будет считаться лучшим? Есть ли лучшие способы сделать это?

Ответ 1

Более короткий путь:

'#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6)

Ответ 2

Мне нравится ваш второй вариант, хотя его можно сделать немного проще:

// Math.pow is slow, use constant instead.
var color = Math.floor(Math.random() * 16777216).toString(16);
// Avoid loops.
return '#000000'.slice(0, -color.length) + color;

Ответ 3

Здесь можно создать случайный цвет и обеспечить минимальную яркость:

function randomColor(brightness){
  function randomChannel(brightness){
    var r = 255-brightness;
    var n = 0|((Math.random() * r) + brightness);
    var s = n.toString(16);
    return (s.length==1) ? '0'+s : s;
  }
  return '#' + randomChannel(brightness) + randomChannel(brightness) + randomChannel(brightness);
}

Вызвать randomColor со значением от 0 до 255, указывая, насколько ярким должен быть цвет. Это полезно для создания пастелей, например randomColor(220)

Ответ 4

Как сказал Джордж, лучший способ - использовать HSL, чтобы вы могли создать кучу случайных различимых для человека цветов. Подобная идея реализована в ответе Адамса Коула на аналогичный вопрос, но его код имеет случайный генератор цвета и hsl- > hex rgb translator, входящий в комплект, что затрудняет понимание и модифицировать.

Если вы используете одну из библиотек манипуляции javascript (например, jquery-color), генерация цвета становится тривиальной:

function rainbow() {
  // 30 random hues with step of 12 degrees
  var hue = Math.floor(Math.random() * 30) * 12;

  return $.Color({
    hue: hue,
    saturation: 0.9,
    lightness: 0.6,
    alpha: 1
  }).toHexString();
};

Ответ 5

Более краткий:

function get_random_color2() 
{
    var r = function () { return Math.floor(Math.random()*256) };
    return "rgb(" + r() + "," + r() + "," + r() + ")";
}

Ответ 6

Этот ответ является лучшим методом.

Вы должны предоставить известные цвета на выбор вместо того, чтобы полагаться на чисто числовые методы. Вы можете использовать сайты, такие как ColorBrewer, чтобы выбрать цветовые палитры, которые хорошо работают в зависимости от проблемы (качественный набор данных, количественный или любой другой).

['red','orange','yellow','green','blue','purple'][Math.random()*6|0]

var colors = {
  rainbow: ['red', 'orange', 'yellow', 'green', 'blue', 'purple'],
  qual: ['#8dd3c7', '#ffffb3', '#bebada', '#fb8072', '#80b1d3', '#fdb462', '#b3de69', '#fccde5', '#d9d9d9', '#bc80bd', '#ccebc5', '#ffed6f'],
  quant: ['#fff7ec', '#fee8c8', '#fdd49e', '#fdbb84', '#fc8d59', '#ef6548', '#d7301f', '#b30000', '#7f0000'],
  div: ['#67001f','#b2182b','#d6604d','#f4a582','#fddbc7','#f7f7f7','#d1e5f0','#92c5de','#4393c3','#2166ac','#053061']
};
randc = function(array) {
  return array[Math.random() * array.length | 0]
}
genc = function() {
  var frag = [];
  var arr = colors[$("select").val()];
  for (var i = 0; i < 1024; i++) {
    frag.push("<div style='background-color:" + randc(arr) + ";'></div>");
  }
  $("#demo").html(frag.join(''));
}
genc();
$("select").on("change", genc);

#demo {
  margin-top: 10px;
  font-size: 0;
}
#demo div {
  display: inline-block;
  width: 24px;
  height: 24px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value='qual'>Qualitative (categorical)</option>
  <option value='quant'>Quantitative (sequential)</option>
  <option value='div'>Divergent (republicans versus democrats)</option>
  <option value='rainbow'>Rainbow (my little pony)</option>
</select>
<div id='demo'></div>

Ответ 7

Самый сжатый:

function get_random_color()
{
  return '#' + Math.random().toString(16).substring(4);
}

Nicolas Buduroi дал лучший код, чтобы получить случайный цвет в Random Color generator в Javascript

Ответ 8

Я сделал это так, используя другие ответы:

'#' + parseInt(Math.random() * 0xffffff).toString(16)

Ответ 9

function randomColor()
{
     color='rgb('+Math.round(Math.random()*255)+','+Math.round(Math.random()*255)+','+Math.round(Math.random()*255)+')';

     return color;
}

Это возвращает случайное значение RGB.