[javascript] Random color generator

Given this function, I want to replace the color with a random color generator.

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

How can I do it?

If you're a noob like me, clueless about hexadecimals and such, this might be more intuitive.

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

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

You just need to end up with a string such as 'rgb(255, 123, 220)'

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

Random color generation with brightness control:

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

There is no need for a hash of hexadecimal letters. JavaScript can do this by itself:

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

Here's a twist on the solution provided by @Anatoliy.

I needed to generate only light colours (for backgrounds), so I went with three letter (#AAA) format:

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

Try out this package - https://www.npmjs.com/package/gen-random-colors.

It also provides the ability to configure the color set from 0 to 5 (0 is the darkest).

Here are my two versions for a random 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))

Many answers make more calls than necessary to Math.random(). Or they hope that the hex representation of that number, will have six characters.

First multiply the random float to be in the range [0, 0xffffff + 1). Now our number has the form 0xRRRRRR and some change, which is a number with 24 significant bits. Read off four bits at a time, and use that random number [0, 15] and convert it to its matching hexadecimal character in 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]
    );
};

Almost all of the previous short hand methods are generating invalid hex codes (five digits). I came across a similar technique only without that issue here:

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

Test

Try this in the console:

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

You can also use HSL available on every good browser (http://caniuse.com/#feat=css3-colors)

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

This will give you only bright colors, you can play around with the brightness, saturation and alpha.

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

I wanted to create very distinctive and vibrant colors (for graphing). For anything serious, hsl is a better method than rgb. If necessary, you can convert hsl to rgb as already mentioned by others.

Simple way:

• Create a random Hue from 0 to 360
• Create a random Saturation from 0.5 to 1 (or 50 to 100) for vividness
• Fix Lightness to 50% for best visibility.

color_generator = () => hsl (360*Math.random(), 0.5 + Math.random()/2, 0.5)

modified way

It creates a very nice spectrum of bright and vivid colors but the problem is that in usual color spectrum red, green, blue shades are way more dominant than yellow, cyan, and purple. So, I transformed the hue through acos function. The technical reason is very boring, so I skip it but you can dig in wiki.

color_generator = () => {
    let color_section = Math.floor(Math.random()/0.33) // there are three section in full spectrum
    let transformed_hue = Math.acos(2*Math.random() - 1)/3.14 // transform so secondary colors would be as dominant as the primary colors
    let hue = 120*color_section + 120*transformed_hue
    return hsl(hue, 0.5 + Math.random()/2, 0.5)
}

The result is the best color spectrum I had after experimenting with many other methods.

References:

• https://observablehq.com/@d3/color-schemes
• https://en.wikipedia.org/wiki/HSL_and_HSV

So whilst all the answers here are good I wanted a bit more control over the output. For instance I'd like to prevent any near white shades, whilst ensuring I get bright vibrant colours not washed out shades.

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

So now I can specify 3 arbitrary ranges to pick rgb values from. You can call it with no arguments and get my default set which will usually generate a quite vibrant colour with once obvious dominant shade, or you can supply your own array of ranges.

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

A breakdown of how this works:

Math.random()*256 gets a random (floating point) number from 0 to 256 (0 to 255 inclusive)
Example result: 116.15200161933899

Adding the |0 strips off everything after the decimal point.
Ex: 116.15200161933899 -> 116

Using .toString(16) converts this number to hexadecimal (base 16).
Ex: 116 -> 74
Another ex: 228 -> e4

Adding "0" pads it with a zero. This will be important when we get the substring, since our final result must have two characters for each color.
Ex: 74 -> 074
Another ex: 8 -> 08

.substr(-2) gets just the last two characters.
Ex: 074 -> 74
Another ex: 08 -> 08 (if we hadn't added the "0", this would have produced "8" instead of "08")

The for loop runs this loop three times, adding each result to the color string, producing something like this:
#7408e4

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

You should use '#'+Math.floor(Math.random()*16777215).toString(16); for a random color code.

Your thinking, but why 16777215? Check this article: Generate a random color with a single line of 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

My version:

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

Use distinct-colors.

It generates a palette of visually distinct colors.

distinct-colors is highly configurable:

• Choose how many colors are in the palette
• Restrict the hue to a specific range
• Restrict the chroma (saturation) to a specific range
• Restrict the lightness to a specific range
• Configure general quality of the palette

You can try this. It's an absolutely random and comfortable color generator ))

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

Using ES6's Array.from() method, I created this solution:

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

The other implementations I've seen need to ensure that if the hexadecimal value has leading zeros, the number still contains six digits.

K._'s answer used ES6's padStart for this:

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

The other good single-line solution I've seen is

function randomColor() {
  return '#'+ ('000000' + (Math.random()*0xFFFFFF<<0).toString(16)).slice(-6);
}

Here is another take on this problem.

My goal was to create vibrant and distinct colors. To ensure the colors are distinct I avoid using a random generator and select "evenly spaced" colors from the rainbow.

This is perfect for creating pop-out markers in Google Maps that have optimal "uniqueness" (that is, no two markers will have similar colors).

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

If you wish to see what this looks like in action see Simple JavaScript Rainbow Color Generator for Google Map Markers.

There are so many ways you can accomplish this. Here's some I did:

Generates six random hex digits (0-F)

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

Extremely short one-liner

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

Generates individual HEX components (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 outputs together to form color)

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

map

always returns a valid RGB color:

`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

The article written by Paul Irish, Random Hex Color Code Generator in JavaScript, is absolutely amazing. Use:

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

Thanks to Haytam for sharing the padStart to solve the hexadecimal code length issue.

A bit enhanced one-liner to make the approach more vivid

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

Use this:

// RGBA()
function getRandomRGBA() {
    function numbers() {
        var x = Math.floor(Math.random() * 256);
        return x;
    }

    alpha = 1.0;
    return (
        "rgba(" +
        numbers() +
        ", " +
        numbers() +
        ", " +
        numbers() +
        ", " +
        alpha.toFixed(1) +
        ")"
    );
}

This method will get a random number, convert it to a hexidecimal string and then extract a part of it, giving you a random hex.

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

I like this one: '#' + (Math.random().toString(16) + "000000").substring(2,8)

Array.prototype.reduce makes it very clean.

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

It needs a shim for old browsers.

For decent randomness.

Random color

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

Random alpha, random color.

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

I have generated 100 different colors of different contrast, and you can increase values according to your need:

Example on Feedle: http://jsfiddle.net/zFbfE/29/ -

// CHANGE THE INITIAL SEED HERE
Math.seed = 23;

/**
 * Math.seededRandom()
 *
 */
Math.seededRandom = function(max, min) {
    max = max || 1;
    min = min || 0;

    Math.seed = (Math.seed * 9301 + 49297) % 233280;
    var rnd = Math.seed / 233280.0;

    return min + rnd * (max - min);
}

var c, r = 0,
    l = 100000,
    t,
    random = [],
    seededRandom = [];

for(var i=0; i<100; i++)
{
    random[i] = 0;
    seededRandom[i] = 0;
}

// Do some loops withouth benchmarking
// to have a "fair" comparison
/*for (c = 0; c < l; ++c) {
    r = 5+5;
}*/


// benchmark Math.random()
t = new Date().getTime();
s = '';


// benchmark Math.seededRandom()
t = new Date().getTime();
while(l--){
    r = Math.seededRandom();
    seededRandom[(r*100)|0] += 1;
}

var inc = 0;
for(c=0; c<seededRandom.length; c++) {
    //var inc=15;
    for(var i=0; i<seededRandom.length; i++)
    {
        if(i!==c) {
            if(seededRandom[c] == seededRandom[i]) {
            seededRandom[c] += inc;
            inc = inc + 10;
              //    console.log(seededRandom[c]);
            }
        }
    }
    inc = inc > 255 ? 0 : inc;
}

var a=[], b=[], d=[], inc=0, dec=255;
for(c=0; c<seededRandom.length; c++) {
    a[c] = (seededRandom[c] % 100) + inc;
    b[c] = dec - Math.floor(seededRandom[c]/100);
    if(b[c] < 0)
        b[c] = b[c]* - 1;
    if(a[c] > 255)
        a[c] -= 255;
    d[c] = Math.floor(b[c]/2);
    inc += 5;
    dec -= 5;
}


var app = angular.module("myAppp", []).controller('myCtrl',function($scope, $http) {
$scope.id = [];
for(var i=0; i<seededRandom.length; i++)
    $scope.id.push(i);

// Generate random number
$scope.Icon = [];$scope.Icon2 = [], $scope.Icon3 = [];

var ran = 0, inc = 5, dec = 255;
for(var i=0;i<seededRandom.length;i++)
{
    $scope.Icon.push(a[i]%100);
    $scope.Icon2.push(b[i]%100);
    $scope.Icon3.push(d[i]%100);
    console.log(a[i] + "|" + b[i] + "|" + d[i]);
}

});

It works for me and I think it would be helpful for you also.

One best thing in this example is, it will generate 100 random colors and colors would be same on every page load.

regexp

always returns a valid hex 6-digit color

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

I doubt anything will be faster or shorter than this one:

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

Challenge!

Use:

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

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

You can use colorchain.js to generate a sequence of colors with varying hues.

This line should randomly change the color for you:

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

This code (Mohsen's) can't generate colors like #fcfc80.

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

Nicolas Buduroi's one works unless Math.random() returns 0, reasonable.

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

This code generates lots of illegal colors (like #abcde).

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

And I keep using (+1 or anthing is also fine, but I'm used to +2 for no reason)

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

Possibly the simplest

'#' + Math.random().toString(16).substring(9)

A working single-line solution (with padding leading zeroes):

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

A short answer with padding to the exact size:

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

Review

A lot of the answers here are based on Math.random().toString(16). They sometimes multiply a random number by some number and assume that a conversion to a hexadecimal string will always produce a floating point hexadecimal representation which has at least six digits after the dot (and they use those digits as the color).

This is a wrong assumption

Because there is a lot of numbers which actually give less than six digits (after the dot). If Math.random() choose such a number, then the resulting hexadecimal color will be invalid (unless someone handles this case). Here is an example generator (which I write based on this converter) for such values.

function calc() {
  let n = hex2dec(hexInput.value)
  console.log(`${n} -> ${n.toString(16)}` );
}

// Source: https://stackoverflow.com/questions/5055723/converting-hexadecimal-to-float-in-javascript/5055821#5055821
function hex2dec(hex) {
    hex = hex.split(/\./);
    var len = hex[1].length;
    hex[1] = parseInt(hex[1], 16);
    hex[1] *= Math.pow(16, -len);
    return parseInt(hex[0], 16) + hex[1];
}

Put some 5-digit (or less) hexdecimal number in range 0-1<br>
<input id="hexInput" value="0.2D4EE">
<button onclick="calc()">Calc</button>

I already gave two answers to your question without this assumption: RGB and hexadecimal so in this answer I will not put in another solution.

I think the first response is the most succinct/useful, but I just wrote one that would probably be easier for a beginner to understand.

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 get_random_color() {
    return "#" + (Math.round(Math.random() * 0XFFFFFF)).toString(16);
}

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

Who can beat it?

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

It is guaranteed to work all the time: http://jsbin.com/OjELIfo/2/edit

Based on eterps's comment, the code above can still generate shorter strings if the hexadecimal representation of the random color is very short (0.730224609375 => 0.baf).

This code should work in all cases:

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

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

Yet another random color generator:

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

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

You could use this simple function

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

I like parseInt for this case:

parseInt(Math.random()*0xFFFFFFFF).toString(16)

With recursion:

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

The top voted comment of the top answer suggests that Martin Ankerl's approach is better than random hex numbers, and although I haven't improved on Ankerl's methodology, I have successfully translated it to JavaScript.

I figured I'd post an additional answer to this already mega-sized Stack Overflow question because the top answer has another comment linking to a Gist with the JavaScript implementation of Ankerl's logic and that link is broken (404). If I had the reputation, I would have simply commented the jsbin link I created.

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

This function goes above and beyond other answers in two ways:

It attempts to generate colors as distinct as possible by finding which color out of 20 tries has the farthest Euclidean distance from the others in the HSV cone.

It allows you to restrict the hue, saturation, or value range, but it still attempts to pick colors as distinct as possible within that range.

It's not super efficient, but for reasonable values (who could even pick apart 100 colors easily?) It's fast enough.

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

Just because I can, I created an unreadable snippet that randomizes between min and max hex codes...:

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") ? might randomize ? b5009e

It does it in pairs, so a("12","f2") ? might randomize ? 8f. But it won't go above 'f2'.

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

It is the same as:

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

But slower.

Use:

function randomColor(){
  var num = Math.round(Math.random() * Math.pow(10,7));
  // Converting number to hex string to be read as RGB
  var hexString = '#' + num.toString(16);

  return hexString;
}