web-dev-qa-db-ja.com

JavaScriptでランダムな色を生成する最良の方法は？

フレームワークを使用せずにJavaScriptでランダムな色を生成する最良の方法は何ですか...

ここに私が思いついたいくつかの解決策があります：

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

それを行うより良い方法はありますか？

javascriptrandom
37
Dan

より短い方法：

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

私はあなたの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;
14
Blixt

私は他の答えの助けを借りて、このようにしました：

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

より簡潔：

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

この答えが最良の方法です。

純粋に数値的な方法に頼るのではなく、選択する既知の色を提供する必要があります。 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>
3
nothingisnecessary
function randomColor()
{
     color='rgb('+Math.round(Math.random()*255)+','+Math.round(Math.random()*255)+','+Math.round(Math.random()*255)+')';

     return color;
}

これは、ランダムなRGB値を返します。

2
user8085127

少し複雑なソリューションを作成しましたが、色の彩度と明るさを制御できます。 SwitchColors.jsのコードはこちらで確認できます https://github.com/akulmehta/SwitchColors.js

1
Coola

最も簡潔：

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

Nicolas Buduroi は、上記で最適なコードを与えて、ランダムな色を取得しました Javascriptのランダムカラージェネレーター

0
Jack Liu Shurui