Générateur de couleur aléatoire
Étant donné cette fonction, je souhaite remplacer le color par un générateur de couleurs aléatoires.
document.overlay = GPolyline.fromEncoded({
color: "#0000FF",
weight: 10,
points: encoded_points,
zoomFactor: 32,
levels: encoded_levels,
numLevels: 4
});
Comment puis-je le faire?
Utilisez getRandomColor() à la place de "#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>Je doute que quelque chose soit plus rapide ou plus court que celui-ci:
"#"+((1<<24)*Math.random()|0).toString(16)
Défi!
Voici une autre prise sur ce problème.
Mon objectif était de créer des couleurs vives et distinctes. Pour éviter que les couleurs ne se distinguent, j’évite d’utiliser un générateur aléatoire et sélectionne les couleurs "à espacement régulier" dans Rainbow.
Cette fonctionnalité est idéale pour créer des repères instantanés dans Google Maps qui présentent une "unicité" optimale (en d’autres termes, aucun marqueur n’aura une couleur similaire).
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);
}
Si vous souhaitez voir à quoi cela ressemble en action, voir http://blog.adamcole.ca/2011/11/simple-javascript-Rainbow-color.html .
Qui peut le battre?
'#'+Math.random().toString(16).substr(-6);
Garanti de travailler tout le temps: http://jsbin.com/OjELIfo/2/edit
D'après le commentaire @eterps, le code ci-dessus peut toujours générer des chaînes plus courtes si la représentation hexadécimale de la couleur aléatoire est très courte (0.730224609375 => 0.baf).
Ce code devrait fonctionner dans tous les cas:
function makeRandomColor(){
var c = '';
while (c.length < 7) {
c += (Math.random()).toString(16).substr(-6).substr(-1)
}
return '#'+c;
}
Il n'est pas nécessaire d'utiliser un hachage de lettres hexadécimales. JavaScript peut faire cela tout seul:
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();
}
Génération aléatoire de couleurs avec contrôle de la luminosité:
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(",") + ")";
}
J'aime celui-ci: '#' + (Math.random().toString(16) + "000000").substring(2,8)
Vous pouvez également utiliser HSL disponible sur tout bon navigateur ( http://caniuse.com/#feat=css3-colors )
function randomHsl() {
return 'hsla(' + (Math.random() * 360) + ', 100%, 50%, 1)';
}
Cela ne vous donnera que des couleurs vives, vous pouvez jouer avec la luminosité, la saturation et l'alpha.
// 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
L'article écrit par Paul Irish sur Random Hex Color Code Generator en JavaScript est absolument incroyable. Utilisation:
'#'+Math.floor(Math.random()*16777215).toString(16);
Voici le lien source:
http://www.paulirish.com/2009/random-hex-color-code-snippets/
Voici une version de la solution fournie par @Anatoliy.
Je n'avais besoin que de générer des couleurs claires (pour les arrière-plans), je suis donc allé au format trois lettres (#AAA):
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;
}
Ceci peut être très facilement trouvé en utilisant Google Search:
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;
}
}
Version mise à jour:
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);
}
Voici comment cela fonctionne:
Math.random()*256 obtient un nombre aléatoire (à virgule flottante) compris entre 0 et 256 (0 à 255 inclus)
Exemple de résultat: 116.15200161933899
Ajouter le |0 supprime tout ce qui suit le point décimal.
Ex: 116.15200161933899 -> 116
Utiliser .toString(16) convertit ce nombre en hexadécimal (base 16).
Ex: 116 -> 74
Un autre ex: 228 -> e4
Ajouter "0" le compresse avec un zéro. Ce sera important lorsque nous aurons la sous-chaîne, car notre résultat final doit avoir deux caractères pour chaque couleur.
Ex: 74 -> 074
Un autre ex: 8 -> 08
.substr(-2) obtient uniquement les deux derniers caractères.
Ex: 074 -> 74
Un autre ex: 08 -> 08 (si nous n'avions pas ajouté le "0", cela aurait produit "8" au lieu de "08")
La boucle for exécute cette boucle trois fois, ajoutant chaque résultat à la chaîne de couleur, produisant quelque chose comme ceci:#7408e4
Si vous êtes un noob comme moi, ignorant tout des hexadécimaux et autres, cela pourrait être plus intuitif.
function r() { return Math.floor(Math.random() * 255) }
var color = 'rgb(' + r() + "," + r() + "," + r() + ')';
Vous devez juste vous retrouver avec une chaîne telle que 'rgb(255, 123, 220)'
Réponse courte avec un tampon à la taille exacte
'#'+((1<<24)*(Math.random()+1)|0).toString(16).substr(1)
Donc, même si toutes les réponses sont bonnes, je souhaitais un peu plus de contrôle sur la sortie. Par exemple, j'aimerais éviter les teintes proches du blanc, tout en m'assurant d'obtenir des couleurs vives et éclatantes, non délavées.
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() +")";
};
Alors maintenant, je peux spécifier 3 plages arbitraires dans lesquelles choisir les valeurs rgb. Vous pouvez l'appeler sans argument et obtenir mon jeu par défaut qui générera généralement une couleur assez vive avec une nuance dominante évidente, ou vous pouvez fournir votre propre gamme de plages.
Le commentaire le plus voté de la réponse la plus élevée suggère que l'approche de Martin Ankerl est meilleure que les nombres hexadécimaux aléatoires, et bien que je n'aie pas amélioré la méthodologie d'Ankerl, je l'ai traduite avec succès en JavaScript. J'ai pensé poster une réponse supplémentaire à ce fil SO déjà de taille considérable, car la réponse la plus élevée comporte un autre commentaire lié à un Gist avec l'implémentation JS de la logique d'Ankerl et ce lien est rompu (404). Si j'avais la réputation, j'aurais simplement commenté le lien jsbin que j'ai créé.
// 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 le rend très propre.
["r","g","b"].reduce(function(res) {
return res + ("0"+~~(Math.random()*256).toString(16)).slice(-2)
}, "#")
Besoin d'une cale pour les anciens navigateurs.
Encore un autre générateur de couleur aléatoire:
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
Version ES6.
Couleur aléatoire
`#${Math.floor(Math.random() * 0x1000000).toString(16).padStart(6, 0)}`
Alpha aléatoire, couleur aléatoire.
`#${Math.floor(Math.random() * 0x100000000).toString(16).padStart(8, 0)}`
Vous pouvez utiliser cette fonction simple
function getRandomColor(){
var color = "#" + (Math.random() * 0xFFFFFF << 0).toString(16);
return color;
}
Utilisez couleurs distinctes .
Il génère une palette de visuellement couleurs distinctes.
couleurs distinctes est hautement configurable:
- Choisissez combien de couleurs sont dans la palette
- Limiter la teinte à une plage spécifique
- Limiter la chrominance (saturation) à une plage spécifique
- Limiter la légèreté à une plage spécifique
- Configurer la qualité générale de la palette
function get_random_color() {
return "#" + (Math.round(Math.random() * 0XFFFFFF)).toString(16);
}
Voici mes deux versions pour un générateur de code hexadécimal aléatoire.
/* 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))
Cette fonction va au-delà des autres réponses de deux manières:
Il tente de générer des couleurs aussi distinctes que possible en recherchant quelle couleur sur 20 essais a la plus grande distance euclidienne de les autres dans le cône HSV
Cela vous permet de limiter la teinte, saturation ou plage de valeurs, mais tente toujours de sélectionner les couleurs comme aussi distincts que possible dans cette plage.
Ce n'est pas très efficace, mais pour des valeurs raisonnables (qui pourrait même distinguer facilement 100 couleurs?), C'est assez rapide.
/**
* 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);
}
Presque toutes les méthodes précédentes réduisent des codes hexadécimaux invalides (cinq chiffres). Je suis tombé sur une technique similaire seulement sans ce problème ici :
"#"+("000"+(Math.random()*(1<<24)|0).toString(16)).substr(-6)
Tester
Essayez ceci dans la console:
for(i = 0; i < 200; i++) {
console.log("#" + ("000" + (Math.random()*(1<<24)|0).toString(16)).substr(-6));
}
Il y a tellement de façons d'accomplir cela. En voici quelques unes:
Génère six chiffres hexadécimaux aléatoires (0-F)
function randColor() {
for (var i=0, col=''; i<6; i++) {
col += (Math.random()*16|0).toString(16);
}
return '#'+col;
}
One-Liner extrêmement court
'#'+Math.random().toString(16).slice(-6)
Génère des composants RVB individuels (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;
}
Chaîne hexagonale sur-conçue (XOR 3 sorties ensemble pour former la couleur)
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);
}
Ma version:
function RandomColor() {
var hex = (Math.round(Math.random()*0xffffff)).toString(16);
while (hex.length < 6) hex = "0" + hex;
return hex;
}
Vous pouvez utiliser colorchain.js pour générer une séquence de couleurs avec différentes nuances.
Je n'ai pas encore vu la réponse la plus simple.
C'est le moyen le plus efficace de générer une couleur aléatoire:
var color = "#" + Math.floor(Math.random() * 16777215).toString(16);
A expliqué ce qu'il fait:
- Il n'y a que 16777216 variantes de couleur RVB (256 * 256 * 256)
- Choisissez un nombre aléatoire compris entre 0 et 16777216
- Number.toString (16) vous donnera une chaîne hexagonale.
Cette méthode va obtenir un nombre aléatoire, la convertir en chaîne hexadécimale, puis en extraire une partie, ce qui vous donnera un hex aléatoire.
function randomColor() {
return "#" + Math.random().toString(16).slice(2,8);
}
Juste parce que je le pouvais, j'ai créé un extrait illisible aléatoire entre les codes hexadécimaux min et max ...:
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") → peut être aléatoire → b5009e
Il le fait par paires, donc a("12","f2") → → peut aléatoire → 8f. Mais il ne dépassera pas 'f2'.
var color = "#" + a("11","22") + a("33","44") + a("55","66");
C'est la même chose que:
var color = "#" + a("113355","224466")
Mais plus lentement.
Vous pouvez essayer ça. C'est un générateur de couleur absolument aléatoire et confortable))
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;
}
De nombreuses réponses font plus que des appels nécessaires à Math.random(). Ou ils espèrent que la représentation hexadécimale de ce nombre aura 6 caractères.
D'abord, multipliez le nombre aléatoire flottant pour qu'il soit dans la plage [0, 0xffffff + 1). Notre numéro a maintenant la forme 0xRRRRRR et un changement, qui est un nombre avec 24 bits significatifs. Lisez 4 bits à la fois, utilisez ce nombre aléatoire [0, 15] et convertissez-le en son caractère hexadécimal correspondant dans lookup.
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]
);
};
Je pense que la première réponse est la plus succincte/utile, mais je viens d’en écrire une qui serait probablement plus facile à comprendre pour un débutant.
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 (retourne toujours une couleur hexadécimale valide à 6 chiffres)
"#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=cCette ligne devrait changer la couleur de façon aléatoire pour vous:
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);
solution de travail sur une seule ligne (avec un remplissage composé de zéros):
var color="#"+"colors".split("").map(function(){return parseInt(Math.random()*0x10).toString(16);}).join("");
One-Liner un peu amélioré pour rendre l'approche plus vivante
'#' + 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);
Essayez ce paquet - https://www.npmjs.com/package/gen-random-colors Il vous permet également de configurer le jeu de couleurs de 0 à 5 (0 étant le plus sombre).
Ce code (Mohsen) ne peut pas générer de couleurs telles que # fcfc80.
'#'+Math.random().toString(16).substr(-6);
Celui de Nicolas Buduroi ne peut générer le # 008a80.
'#' + (Math.random().toString(16) + "000000").substring(2,8)
Ce code génère beaucoup de couleurs illégales (comme #abcde).
'#'+Math.floor(Math.random()*16777215).toString(16);
Et je continue à utiliser
"#"+((Math.random()+2)*16777216|0).toString(16).slice(1)
J'ai généré 100 couleurs différentes de contraste différent, vous pouvez augmenter les valeurs en fonction de vos besoins:
Feedle Par exemple: http://jsfiddle.net/zFbfE/29/
Cela fonctionne pour moi et je pense que ce serait utile pour vous aussi
Une des meilleures choses dans cet exemple est qu'il générera 100 couleurs aléatoires et que les couleurs seront les mêmes à chaque chargement de page.
J'aime parseInt pour ce cas:
parseInt(Math.random()*0xFFFFFFFF).toString(16)
avec récursion
var randomColor = (s='') => s.length === 6 ? '#' + s : randomColor(s + '0123456789ABCDEF'[Math.floor(Math.random() * 16)]);
randomColor();
en utilisant la méthode Array.from () d'ES6, j'ai créé cette solution:
function randomColor() {
return "#"+ Array.from({length: 6},()=> Math.floor(Math.random()*16).toString(16)).join("");
}
les autres implémentations que j'ai vues doivent s'assurer que si la valeur hexadécimale est précédée de zéros, le nombre contient toujours 6 chiffres.
La réponse de K ._ a utilisé le padStart de ES6 pour cela
function randomColor() {
return `#${Math.floor(Math.random() * 0x1000000).toString(16).padStart(6, 0)}`
}
L’autre bonne solution monoligne que j’ai vue est
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 (retourne toujours la couleur RGB valide)
`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