it-swarm.com.de

Zufälliger Farbgenerator

Mit dieser Funktion möchte ich den colordurch einen Zufallsfarbgenerator ersetzen.

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

Wie kann ich es tun?

341
n00ki3

Verwenden Sie getRandomColor() anstelle von "#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>

833
Anatoliy

Ich bezweifle, dass etwas schneller oder kürzer als dieser sein wird:

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

Herausforderung!

218
ZPiDER

Hier ist eine andere Einstellung zu diesem Problem.

Mein Ziel war es, lebendige und unverwechselbare Farben zu schaffen. Um sicherzustellen, dass die Farben eindeutig sind, vermeide ich die Verwendung eines Zufallsgenerators und wähle "gleichmäßig beabstandete" Farben aus dem Rainbow.

Dies ist ideal für das Erstellen von Pop-Out-Markern in Google Maps, die eine optimale "Einzigartigkeit" aufweisen (dh, dass keine zwei Markierungen ähnliche Farben haben).

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

Wenn Sie sehen möchten, wie dies in Aktion aussieht, siehe http://blog.adamcole.ca/2011/11/simple-javascript-Rainbow-color.html .

135
Adam Cole

Wer kann es schlagen? 

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

Garantiert, um die ganze Zeit zu funktionieren: http://jsbin.com/OjELIfo/2/edit

Basierend auf einem @eterps-Kommentar kann der obige Code immer noch kürzere Zeichenfolgen erzeugen, wenn die hexadezimale Darstellung der Zufallsfarbe sehr kurz ist (0.730224609375 => 0.baf).

Dieser Code sollte in allen Fällen funktionieren:

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

Es ist kein Hash von Hexadezimalbuchstaben erforderlich. JavaScript kann dies alleine tun:

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();
}
26
Alsciende

Zufällige Farberzeugung mit Helligkeitssteuerung:

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

Ich mag dieses hier: '#' + (Math.random().toString(16) + "000000").substring(2,8)

25
Nicolas Buduroi

Sie können HSL auch in jedem guten Browser verwenden ( http://caniuse.com/#feat=css3-colors ).

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

Dadurch erhalten Sie nur helle Farben. Sie können mit Helligkeit, Sättigung und Alpha herumspielen.

// es6
const randomHsl = () => `hsla(${Math.random() * 360}, 100%, 50%, 1)`
19
kigiri
'#'+Math.random().toString(16).slice(-3) // three-numbers format aka #f3c
'#'+Math.random().toString(16).slice(-6) // six-number format aka #abc123
18
jt3k

Der Artikel von Paul Irish über den Zufalls-Hex-Farbcode-Generator in JavaScript ist absolut erstaunlich. Benutzen: 

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

Hier ist der Quelllink: 

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

17
way2vin

Hier ist die Lösung von @Anatoliy.

Ich musste nur helle Farben erzeugen (für Hintergründe), also habe ich das Format mit drei Buchstaben (#AAA) gewählt:

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;
}
14
Andrei R

Dies kann sehr einfach über die Google-Suche gefunden werden:

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

Aktualisierte Version:

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;
  }
}
13
Funky Dude
var color = "#";
for (k = 0; k < 3; k++) {
    color += ("0" + (Math.random()*256|0).toString(16)).substr(-2);
}

Eine Aufschlüsselung, wie das funktioniert:

Math.random()*256 erhält eine Zufallszahl (Fließkommazahl) von 0 bis 256 (einschließlich 0 bis 255)
.__ Beispielergebnis: 116.15200161933899

Durch das Hinzufügen von |0 wird alles nach dem Dezimalzeichen entfernt.
Beispiel: 116.15200161933899 -> 116

Mit .toString(16) wird diese Zahl in Hexadezimalzahl (Basis 16) umgewandelt.
Beispiel: 116 -> 74
Ein anderes Ex: 228 -> e4

Durch Hinzufügen von "0" wird eine Null eingefügt. Dies ist wichtig, wenn wir die Teilzeichenfolge erhalten, da unser Endergebnis zwei Zeichen für jede Farbe haben muss.
Beispiel: 74 -> 074
Ein anderes Ex: 8 -> 08

.substr(-2) erhält nur die letzten beiden Zeichen.
Ex: 074 → 74
Ein anderes Ex: 08 -> 08 (wenn wir den "0" nicht hinzugefügt hätten, hätte dies "8" anstelle von "08" erzeugt).

Die for-Schleife führt diese Schleife dreimal aus, wobei jedes Ergebnis der Farbzeichenfolge hinzugefügt wird und etwa Folgendes erzeugt wird:
#7408e4

10
Erin Heyming

Wenn Sie ein Noob wie ich sind, ahnungslos über Hexadezimale usw.

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

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

Sie müssen nur noch einen String wie 'rgb(255, 123, 220)' haben.

9
ICoffeeConsumer

Kurze Antwort mit Block auf genaue Größe

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

9
Taha Jahangir

Obwohl alle Antworten hier gut sind, wollte ich etwas mehr Kontrolle über die Ausgabe. Zum Beispiel möchte ich nahe liegende Weißtöne vermeiden und gleichzeitig sicherstellen, dass ich helle, lebendige Farben und keine ausgewaschenen Farben bekomme.

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

Jetzt kann ich 3 beliebige Bereiche angeben, aus denen die RGB-Werte ausgewählt werden sollen. Sie können es ohne Argumente aufrufen und erhalten mein Standard-Set, das normalerweise eine recht kräftige Farbe mit einem offensichtlich dominanten Farbton erzeugt.

8
Ollie Edwards

Der am besten gewählte Kommentar der ersten Antwort legt nahe, dass der Ansatz von Martin Ankerl besser ist als die Zufallszahlen, und obwohl ich die Methode von Ankerl nicht verbessert habe, habe ich sie erfolgreich in JavaScript übersetzt. Ich dachte mir, ich würde eine zusätzliche Antwort auf diesen Mega-großen SO -Thread posten, da die erste Antwort einen weiteren Kommentar enthält, der mit einer Gist mit der JS-Implementierung von Ankerls Logik verknüpft ist und diese Verknüpfung unterbrochen ist (404). Wenn ich den Ruf hätte, hätte ich einfach den von mir erstellten Jsbin-Link kommentiert.

// 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,console

6
spakmad

Array.prototype.reduce macht es sehr sauber.

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

Benötigt eine Unterlage für alte Browser.

6
user1106925

Noch ein zufälliger Farbgenerator:

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
Salman A

ES6-Version.

Zufällige Farbe

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

Zufälliges Alpha, zufällige Farbe.

`#${Math.floor(Math.random() * 0x100000000).toString(16).padStart(8, 0)}`

Sie können diese einfache Funktion verwenden 

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

Verwenden Sie eindeutige Farben .

Es erzeugt eine Palette von visuell verschiedenen Farben.

different-colors ist in hohem Maße konfigurierbar:

  • Wählen Sie aus, wie viele Farben in der Palette enthalten sind
  • Beschränken Sie den Farbton auf einen bestimmten Bereich
  • Schränken Sie die Farbsättigung (Sättigung) auf einen bestimmten Bereich ein
  • Beschränken Sie die Helligkeit auf einen bestimmten Bereich
  • Konfigurieren Sie die allgemeine Qualität der Palette
5
InternalFX
function get_random_color() {
    return "#" + (Math.round(Math.random() * 0XFFFFFF)).toString(16);
}

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

5
user2102611

Hier sind meine zwei Versionen für einen zufälligen Hex-Code-Generator.


/* 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
Larry Battle

Diese Funktion geht auf zwei Arten über andere Antworten hinaus:

Es versucht, Farben so deutlich wie möglich zu erzeugen, indem welche Farbe von 20 Versuchen hat die am weitesten entfernte euklidische Entfernung von die anderen im HSV-Kegel

Damit können Sie den Farbton einschränken, Sättigung oder Wertebereich, versucht jedoch immer noch, Farben als .__ auszuwählen. so deutlich wie möglich innerhalb dieses Bereichs.

Es ist nicht besonders effizient, aber für vernünftige Werte (wer könnte sogar 100 Farben leicht auseinander nehmen?) Es ist schnell genug.

Siehe 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
Andy

Fast alle der bisherigen Short-Hand-Methoden generieren ungültige Hex-Codes (fünf Ziffern). Ich bin auf eine ähnliche Technik nur ohne dieses Problem gestoßen. Hier :

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

Prüfung

Versuchen Sie dies in der Konsole:

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

Es gibt so viele Möglichkeiten, wie Sie dies erreichen können. Hier einige, die ich gemacht habe:

Erzeugt sechs zufällige Hex-Ziffern (0-F)

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

Extrem kurzer Einliner

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

Erzeugt einzelne RGB-Komponenten (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;
}

Überentwickelter Hex-String (XORs 3-Ausgänge bilden zusammen Farbe)

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

Meine Version:

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

Sie können colorchain.js verwenden, um eine Folge von Farben mit unterschiedlichen Farbtönen zu erzeugen.

2
alexishacks

Ich habe noch nicht die einfachste Antwort gesehen.

Dies ist der effizienteste Weg, eine zufällige Farbe zu erzeugen:

var color = "#" + Math.floor(Math.random() * 16777215).toString(16);

Erklärt was es macht:

  • Es gibt nur 16777216 RGB-Farbvariationen (256 * 256 * 256)
  • Wählen Sie eine Zufallszahl zwischen 0 und 16777216
  • Number.toString (16) gibt Ihnen einen Hex-String.
2
Azarus

Diese Methode erhält eine Zufallszahl, konvertiert sie in eine hexadezimale Zeichenfolge und extrahiert dann einen Teil davon, um ein zufälliges Hex zu erhalten.

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

Nur weil ich es kann, habe ich ein unlesbares Snippet erstellt, das zwischen min und max Hex-Codes randomisiert ...:

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") → kann randomisieren → b5009e

Es tut dies paarweise, also a("12","f2") → könnte randomisieren → 8f. Aber es geht nicht über 'f2' hinaus.

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

Es ist das gleiche wie:

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

Aber langsamer.

2
zenril

Sie können es versuchen. Es ist ein absolut zufälliger und komfortabler Farbgenerator))

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

Viele Antworten rufen mehr als nötig an Math.random(). Oder sie hoffen, dass die Hex-Darstellung dieser Zahl 6 Zeichen hat.

Multiplizieren Sie zuerst den zufälligen Float, um im Bereich [0, 0xffffff + 1) zu sein. Jetzt hat unsere Nummer die Form 0xRRRRRR und einige Änderungen, eine Zahl mit 24 signifikanten Bits. Lesen Sie jeweils 4 Bits ab und verwenden Sie diese Zufallszahl [0, 15] und konvertieren Sie sie in lookup in das entsprechende Hexadezimalzeichen.

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]
    );
};
1
cdosborn

Ich denke, die erste Antwort ist am knackigsten/nützlichsten, aber ich habe nur eine geschrieben, die für Anfänger wahrscheinlich leichter zu verstehen wäre.

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;
}
1
mv.danj
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;
}
1
TheDarkIn1978

regexp (gibt immer eine gültige hexadezimale 6-stellige Farbe zurück)

"#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
1

Diese Zeile sollte die Farbe für Sie zufällig ändern:

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);
0
sandeep

single-Line-Lösung (mit führenden Nullen):

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

Ein wenig verbesserter Einliner, um den Ansatz lebendiger zu gestalten 

'#' + Math.round((0x1000000 + 0xffffff * Math.random())).toString(16).slice(1)
0
alexfedotov
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);
0
Durul Dalkanat

Probieren Sie dieses Paket aus - https://www.npmjs.com/package/gen-random-colors - .__ Es bietet auch die Möglichkeit, den Farbsatz von 0 bis 5 zu konfigurieren (0 ist der dunkelste).

0
kurumkan

Dieser Code (Mohsen's) kann keine Farben wie # fcfc80 erzeugen. 

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

Nicolas Budurois kann # 008a80 nicht generieren.

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

Dieser Code erzeugt viele illegale Farben (wie #abcde).

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

Und ich benutze weiter

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

Ich habe 100 verschiedene Farben mit unterschiedlichem Kontrast erzeugt. Sie können die Werte entsprechend Ihrem Bedarf erhöhen:

Feedle Zum Beispiel: http://jsfiddle.net/zFbfE/29/

Es funktioniert für mich und ich denke, es wäre auch für Sie hilfreich

Eine gute Sache in diesem Beispiel ist, dass 100 zufällige Farben generiert werden und die Farben bei jedem Laden der Seite gleich sind.

0
Shubham Nigam

Ich mag parseInt für diesen Fall:

parseInt(Math.random()*0xFFFFFFFF).toString(16)
0
Jony-Y

mit Rekursion

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

mit der Array.from () -Methode von ES6 habe ich diese Lösung erstellt:

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

bei den anderen Implementierungen, die ich gesehen habe, muss sichergestellt werden, dass die Zahl immer noch 6 Ziffern enthält, wenn der Hex-Wert führende Nullen enthält.

Die Antwort von K ._ verwendete dazu das padStart von ES6

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

Die andere gute einzeilige Lösung, die ich gesehen habe, ist

function randomColor() {
  return '#'+ ('000000' + (Math.random()*0xFFFFFF<<0).toString(16)).slice(-6);
}
0
Alexander Rice
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})`;
    }
}
0
jt3k

function getHashColor() {
  var hash = "0123456789ABCDEF";
  var hashColor = "#";
  for (var i = 0; i < 6; i++)
    hashColor += hash[Math.floor(Math.random() * hash.length)];

  document.getElementById('demo').style.background = hashColor
}
<div id="demo" style="background:red;height:300px;width:300px"></div>
<button type="button" onclick="getHashColor()">Clik Me</button>

0
Tariq Javed

map (liefert immer gültige rgb farbe)

`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
0