wake-up-neo.com

Der beste Weg, eine zufällige Farbe in Javascript zu erzeugen?

Was ist der beste Weg, um eine zufällige Farbe in JavaScript zu generieren, ohne Frameworks zu verwenden ...

Hier sind ein paar Lösungen, die ich mir ausgedacht habe:

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

Gibt es bessere Möglichkeiten, dies zu tun?

javascriptrandom
33
Dan

Ein kürzerer Weg:

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

Ich mag die zweite Option, obwohl sie etwas einfacher gemacht werden kann:

// 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;
13
Blixt

So erstellen Sie eine zufällige Farbe und bieten die minimale Helligkeit:

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

Rufen Sie randomColor mit einem Wert von 0-255 auf, um anzugeben, wie hell die Farbe sein soll. Dies ist hilfreich beim Erzeugen von Pastellen, zum Beispiel randomColor(220)

9
David Mihal

Wie George sagte, ist der beste Weg, HSL zu verwenden, so dass Sie eine Reihe von zufälligen, vom Menschen unterscheidbaren Farben erzeugen können. Die ähnliche Idee wird in Adams Cole answer auf die ähnliche Frage implementiert, aber sein Code enthält einen Zufallsfarbgenerator und einen hsl-> hex rgb-Übersetzer, der zusammengebündelt ist, was es schwer macht, ihn zu verstehen und zu modifizieren. 

Wenn Sie eine der JavaScript-Farbmanipulationsbibliotheken (wie jquery-color ) verwenden, wird die Farbgenerierung einfach: 

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();
};
8
Andrew

Prägnanter: 

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

Diese Antwort ist die beste Methode.

Sie sollten bekannte Farben zur Auswahl bereitstellen, anstatt sich auf rein numerische Methoden zu verlassen. Sie können Sites wie ColorBrewer verwenden, um Farbpaletten auszuwählen, die je nach Problem gut funktionieren (qualitativer Datensatz, quantitative oder was auch immer).

['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

Ich habe es so gemacht, mit Hilfe anderer Antworten:

'#' + parseInt(Math.random() * 0xffffff).toString(16)
2
Damjan Pavlica
function randomColor()
{
     color='rgb('+Math.round(Math.random()*255)+','+Math.round(Math.random()*255)+','+Math.round(Math.random()*255)+')';

     return color;
}

Dies gibt einen zufälligen RGB-Wert zurück. 

2
user8085127

Am knackigsten:

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

Nicolas Buduroi gab den oben genannten besten Code, um bei Random Color-Generator in Javascript zufällige Farbe zu erhalten

0
Jack Liu Shurui

Ich habe eine etwas kompliziertere Lösung entwickelt, mit der Sie die Sättigung der Farben und die Helligkeit steuern können. Den Code für SwitchColors.js finden Sie hier https://github.com/akulmehta/SwitchColors.js

0
Coola