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?
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>
Ich bezweifle, dass etwas schneller oder kürzer als dieser sein wird:
"#"+((1<<24)*Math.random()|0).toString(16)
Herausforderung!
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 .
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;
}
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();
}
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(",") + ")";
}
Ich mag dieses hier: '#' + (Math.random().toString(16) + "000000").substring(2,8)
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)`
'#'+Math.random().toString(16).slice(-3) // three-numbers format aka #f3c
'#'+Math.random().toString(16).slice(-6) // six-number format aka #abc123
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/
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;
}
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;
}
}
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
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.
Kurze Antwort mit Block auf genaue Größe
'#'+((1<<24)*(Math.random()+1)|0).toString(16).substr(1)
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.
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)
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.
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
`#${Math.floor(Math.random() * 0x1000000).toString(16).padStart(6, 0)}`
`#${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;
}
Verwenden Sie eindeutige Farben .
Es erzeugt eine Palette von visuell verschiedenen Farben.
different-colors ist in hohem Maße konfigurierbar:
function get_random_color() {
return "#" + (Math.round(Math.random() * 0XFFFFFF)).toString(16);
}
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))
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.
/**
* 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);
}
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)
Versuchen Sie dies in der Konsole:
for(i = 0; i < 200; i++) {
console.log("#" + ("000" + (Math.random()*(1<<24)|0).toString(16)).substr(-6));
}
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);
}
Meine Version:
function RandomColor() {
var hex = (Math.round(Math.random()*0xffffff)).toString(16);
while (hex.length < 6) hex = "0" + hex;
return hex;
}
Sie können colorchain.js verwenden, um eine Folge von Farben mit unterschiedlichen Farbtönen zu erzeugen.
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:
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);
}
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.
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;
}
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]
);
};
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;
}
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;
}
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
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);
single-Line-Lösung (mit führenden Nullen):
var color="#"+"colors".split("").map(function(){return parseInt(Math.random()*0x10).toString(16);}).join("");
Ein wenig verbesserter Einliner, um den Ansatz lebendiger zu gestalten
'#' + Math.round((0x1000000 + 0xffffff * Math.random())).toString(16).slice(1)
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);
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).
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)
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.
Ich mag parseInt für diesen Fall:
parseInt(Math.random()*0xFFFFFFFF).toString(16)
mit Rekursion
var randomColor = (s='') => s.length === 6 ? '#' + s : randomColor(s + '0123456789ABCDEF'[Math.floor(Math.random() * 16)]);
randomColor();
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);
}
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})`;
}
}
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>
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