Gebaseerd op eterps’s commentaar , de bovenstaande code kan nog steeds kortere snaren genereren als de Hexadecimale weergave van de willekeurige kleur is erg kort (0.730224609375= & gt; 0.baf).

Deze code moet in alle gevallen werken:

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

Antwoord 5, Autoriteit 4%

U kunt ook HSL gebruiken die beschikbaar is op elke goede browser (http://caniuse.com/#Feat = CSS3-kleuren )

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

Hiermee geeft u alleen felle kleuren, u kunt spelen met de helderheid, verzadiging en alfa.

// es6
const randomHsl = () => `hsla(${Math.random() * 360}, 100%, 50%, 1)`

Antwoord 6, Autoriteit 2%

Er is geen hash van hexadecimale letters nodig. Javascript kan dit zelf doen:

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

Antwoord 7, Autoriteit 2%

Ik vind deze leuk: '#' + (Math.random().toString(16) + "000000").substring(2,8)

Antwoord 8, autoriteit 2%

Willekeurige kleurgeneratie met helderheidsregeling:

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

Antwoord 9, autoriteit 2%

Het artikel geschreven door Paul Irish, Random Hex Color Code Generator in JavaScript, is absoluut geweldig. Gebruik:

'#' + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0');

Dank aan Haytam voor het delenvan de padStartom het probleem met de lengte van de hexadecimale code op te lossen.

Antwoord 10, autoriteit 2%

'#'+Math.random().toString(16).slice(-3) // three-numbers format aka #f3c
'#'+Math.random().toString(16).slice(-6) // six-number format aka #abc123

Antwoord 11, autoriteit 2%

Als je een noob bent zoals ik, geen idee hebt van hexadecimalen en dergelijke, is dit misschien meer intuïtief.

function r() { return Math.floor(Math.random() * 255) }
var color = 'rgb(' + r() + "," + r() + "," + r() + ')';

U hoeft alleen maar te eindigen met een string zoals 'rgb(255, 123, 220)'

Antwoord 12

Hier is een draai aan de oplossing van @anatoliy.

Ik moest alleen lichte kleuren (voor achtergronden) genereren, dus ik ging met drie letter (#aaa) formaat:

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

Antwoord 13

Gebruik:

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

Bijgewerkte versie:

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

Antwoord 14

var color = "#";
for (k = 0; k < 3; k++) {
    color += ("0" + (Math.random()*256|0).toString(16)).substr(-2);
}

Een overzicht van hoe dit werkt:

Math.random()*256krijgt een willekeurig (zwevende komma) getal van 0 tot 256 (inclusief 0 tot 255)
Voorbeeld resultaat: 116.15200161933899

Door de |0toe te voegen, wordt alles na de komma verwijderd.
Vb: 116.15200161933899 -> 116

Door .toString(16)te gebruiken, wordt dit getal geconverteerd naar hexadecimaal (grondtal 16).
Vb: 116 -> 74
Een ander voorbeeld: 228 -> e4

Door "0"toe te voegen, wordt het aangevuld met een nul. Dit is belangrijk wanneer we de subtekenreeks krijgen, omdat ons eindresultaat twee tekens voor elke kleur moet hebben.
Vb: 74 -> 074
Een ander voorbeeld: 8 -> 08

.substr(-2)krijgt alleen de laatste twee tekens.
Vb: 074 -> 74
Een ander voorbeeld: 08 -> 08 (als we de "0"niet hadden toegevoegd, zou dit “8” hebben opgeleverd in plaats van “08”)

De forlus voert deze lus drie keer uit, waarbij elk resultaat aan de kleurreeks wordt toegevoegd, wat zoiets als dit oplevert:
#7408e4

Antwoord 15

Een kort antwoord met opvulling op de exacte maat:

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

Antwoord 16

De bovenste opmerking van het bovenste antwoord suggereert dat de aanpak van Martin Ankerl beter is dan willekeurige hex-nummers, en hoewel ik niet ben verbeterd op de methodologie van Ankerl, heb ik het met succes vertaald naar JavaScript.

Ik dacht dat ik een extra antwoord op deze reeds mega-sized Stack & NBSP zou plaatsen; overloopvraag omdat het bovenste antwoord een andere opmerking heeft met een gist met de JavaScript-implementatie van de logica van Ankerl en die link is verbroken (404). Als ik de reputatie had, zou ik gewoon de JSBIN-link hebben gemaakt die ik heb gemaakt.

// 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) : '';
}
// The next two methods are converted from Ruby to JavaScript.
// It is sourced 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 the golden ratio
const golden_ratio_conjugate = 0.618033988749895
let h = Math.random() // # Use a 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

Antwoord 17

kaart

retourneert altijd een geldigeRGB-kleur:

`rgb(${[1,2,3].map(x=>Math.random()*256|0)})`

Antwoord 18

regexp

retourneert altijd een geldige hexadecimale kleur van 6 cijfers

"#xxxxxx".replace(/x/g, y=>(Math.random()*16|0).toString(16))

Antwoord 19

Dus hoewel alle antwoorden hier goed zijn, wilde ik wat meer controle over de uitvoer. Ik wil bijvoorbeeld bijna witte tinten voorkomen, en er tegelijkertijd voor zorgen dat ik heldere, levendige kleuren krijg en geen vervaagde tinten.

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

Dus nu kan ik 3 willekeurige bereiken specificeren om rgb-waarden uit te kiezen. Je kunt het zonder argumenten aanroepen en mijn standaardset krijgen die meestal een behoorlijk levendige kleur genereert met een ooit voor de hand liggende dominante tint, of je kunt je eigen reeks reeksen leveren.

Antwoord 20

Er zijn zoveel manieren waarop u dit kunt bereiken. Hier is wat ik heb gedaan:

Genereert zes willekeurige hexadecimale cijfers (0-F)

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

Extreem korte oneliner

'#'+(Math.random().toString(16)+'00000').slice(2,8)

Genereert individuele HEX-componenten (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;
}

Over-engineered hex string (XORs 3 uitgangen samen om kleur te vormen)

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

Antwoord 21

Je zou deze eenvoudige functie kunnen gebruiken

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

Antwoord 22

Voor behoorlijke willekeur.

Willekeurige kleur

`#${crypto.getRandomValues(new Uint32Array(1))[0].toString(16).padStart(8, 0).slice(-6)}`

Willekeurige alfa, willekeurige kleur.

`#${crypto.getRandomValues(new Uint32Array(1))[0].toString(16).padStart(8, 0)}`

Antwoord 23

Nog een willekeurige kleurengenerator:

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

Antwoord 24

Gebruik verschillende kleuren.

Het genereert een palet van visueelverschillende kleuren.

distinct-colors is zeer configureerbaar:

• Kies hoeveel kleuren er in het palet zitten
• Beperk de tint tot een specifiek bereik
• Beperk de chroma (verzadiging) tot een specifiek bereik
• Beperk de lichtheid tot een specifiek bereik
• Algemene kwaliteit van het palet configureren

Antwoord 25

Array.prototype.reducemaakt het erg schoon.

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

Het heeft een shim nodig voor oude browsers.

Antwoord 26

function get_random_color() {
    return "#" + (Math.round(Math.random() * 0XFFFFFF)).toString(16);
}

http://jsfiddle.net/xmqdz/1/

Antwoord 27

Mijn versie:

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

Antwoord 28

Een beetje verbeterde one-liner om de aanpak meer levendig te maken

'#' + Math.round((0x1000000 + 0xffffff * Math.random())).toString(16).slice(1)

Antwoord 29

Bijna alle vorige korte handmethoden genereren ongeldige HEX-codes (vijf cijfers). Ik kwam alleen een vergelijkbare techniek tegen zonder dat probleem hier :

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

Test

Probeer dit in de console:

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

Antwoord 30

U moet '#'+Math.floor(Math.random()*16777215).toString(16);gebruiken voor een willekeurige kleurcode.

Je denkt, maar waarom 16777215? Bekijk dit artikel: Genereren een willekeurige kleur met een enkele regel JavaScript-code

function generateRandomColor()
{
    var randomColor = '#'+Math.floor(Math.random()*16777215).toString(16);
    if(randomColor.length != 7){ // In any case, the color code is invalid
        randomColor = generateRandomColor();
    }
    return randomColor;
    // The random color will be freshly served
}
document.body.style.backgroundColor = generateRandomColor() // -> #E1AC94