How To Generate a Random Color in JavaScript

Vladimir Sobolev

# December 21, 2009

Sometimes script make wrong string, 5 chars only.

Reply

Eliazer

Permalink to comment# December 21, 2009

This should fix this problem, (it is also more readable).

‘#’+(Math.random()*0xFFFFFF<<0).toString(16);
Ken

Permalink to comment# October 3, 2010

The formula is incorrect. here is a corrected version:

var x=Math.round(0xffffff * Math.random()).toString(16);
var y=(6-x.length);
var z=”000000″;
var z1 = z.substring(0,y);
var color= “#” + z1 + x;

This way if the length of the Hex number is too short, the appropriate number of zeros are added to the beginning and you don’t get any illegal values for color.
Artem Kh

Permalink to comment# April 27, 2020

‘#’ + (Math.floor(Math.random() * 2 ** 24)).toString(16).padStart(0, 6)
km

Permalink to comment# September 23, 2020

const randomColor = Math.floor(Math.random() * 2 ** 24).toString(16).padStart(6, “0”);

splitDecision

# October 9, 2021

Here is how I solved it ;> Cheers!

const arrayOfColorFunctions = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f']

let randomColorString = '#';
function newColorFind(){

for (let x = 0; x < 6; x++){

    let index = Math.floor(Math.random() * 16)
    let value = arrayOfColorFunctions[index]

    randomColorString += value
}
 console.log(randomColorString)


}

Andrew

# April 3, 2012

Hi all sorry to be dense but how do I integrate this into CSS code as the example has done?

Many thanks,

Andrew.

Reply

Khayri R.R. Woulfe

Permalink to comment# December 17, 2019

Just randomize a character from the arrayed string “0123456789ABCDEF” three or six times then join the resulting string to create a valid hex color code all the time.

Dennis

# August 24, 2012

felt inspired for something small but fun.

var ds = [];
function addtods(nodes) {
	for (var i in nodes) {
		ds.push(nodes[i]);
	}
}
setInterval(function () {
	ds = [];
	addtods(document.getElementsByTagName('div'));
	addtods(document.getElementsByTagName('span'));
	addtods(document.getElementsByTagName('a'));
	addtods(document.getElementsByTagName('li'));
	addtods(document.getElementsByTagName('ul'));
	addtods(document.getElementsByTagName('textarea'));
	addtods(document.getElementsByTagName('input'));
	document.body.style.backgroundColor = '#' + (Math.random() * 0xFFFFFF &lt&lt 0).toString(16);
	document.body.style.color = '#' + (Math.random() * 0xFFFFFF &lt&lt 0).toString(16);
	for (var i in ds) {
		if (ds[i] && ds[i].style) {
			ds[i].style.backgroundColor = '#' + (Math.random() * 0xFFFFFF &lt&lt 0).toString(16);
			ds[i].style.color = '#' + (Math.random() * 0xFFFFFF &lt&lt 0).toString(16);
			ds[i].style.borderColor = '#' + (Math.random() * 0xFFFFFF &lt&lt 0).toString(16);
		}
	}
}, 10);

Reply

Michael

# June 25, 2014

Your code didn’t work for me so I rewrote it for fun

var elements = Array.prototype.slice.call(document.querySelectorAll("*"))
  , styleElements = ["h1", "a", "div", "section", "p", "ul", "li", "h2", "h3", "h4", "h5", "h6", "article", "aside", "footer", "span"]

elements = elements.filter(function(element){
  if ( styleElements.indexOf(element.nodeName.toLowerCase()) &gt; -1 ) return true
})

var colors = function() {
  elements.forEach(function(element) {
    element.style.backgroundColor = '#'+(Math.random()*0xFFFFFF&lt;&lt;0).toString(16)
    element.style.color = '#'+(Math.random()*0xFFFFFF&lt;&lt;0).toString(16)
    element.style.borderColor = '#'+(Math.random()*0xFFFFFF&lt;&lt;0).toString(16)
  })

  window.setTimeout(colors, 1000)
}

colors()

Michael

Permalink to comment# June 25, 2014

and then I realized it didnt work because the preview escapes less than signs :/

Oh well. Awesome Idea :)

Brenden

# September 21, 2012

A function you could use is this:

function getRandomColor() {
        var letters = '0123456789ABCDEF'.split('');
        var color = '#';
        for (var i = 0; i < 6; i++ ) {
            color += letters[Math.round(Math.random() * 15)];
        }
        return color;
    }

There is a preview of it here, just click the button:
http://sweb1.dmit.nait.ca/~bkoepke1/Random%20Colour%20Generator/

Reply

Malcolm

Permalink to comment# June 20, 2022

Hey man, just leaving a thanks for leaving this for us to find. Worked like a charm for me!

royi

# January 18, 2013

because you using floor , you will never get the last value of FFFFFF

Math.random()*16777215

Reply

Basil

# February 9, 2013

How could I use this function to set a value in my CSS file?

I created a a file called randomcolor.js
var @randomColor = Math.floor(Math.random()*16777215).toString(16);

and then in my variables.less file I tried
@adjacent-color: ‘#’ + @randomColor

I also just tried doing
@adjacent-color: ‘#’+(Math.random()*0xFFFFFF<<0).toString(16);

Reply

Owen

# April 16, 2013

But you’re doing it with script. This is “CSS-tricks.com”, right? Not Javascript tricks or PHP tricks!

What I want to know is, how can you put the random number into the CSS file?

eg:

{
font-family:sans-serif;
font-size:2em;
color: white;
background-color: (random number generator here);
}

Even better would be to incorporate transitions/transforms and you could have constantly changing background colours purely done within CSS – no script necessary!

Reply

Subin

# May 16, 2014

Please update the code with https://css-tricks.com/snippets/javascript/random-hex-color/#comment-192864

That works in the all cases

Reply

Simon

# June 28, 2014

can somebody help to get the code into joomla application? i have no idea of javascript :-)
thanks

Reply

Chris

# September 13, 2014

Oh! Please! I stumbled upon this and I need it!

I want to make the menu items automatically change color so they draw the visitor’s attention.

Ideally I could set hex values, transition speed and intervals. An added bonus would be having each menu item change color sequentially.

E.g.: speed: 15ms, fff=5000ms, ff0=250ms, fcf=250ms, f90=250ms

Wow! Please help?

Reply

Vibhor Sharma

# May 22, 2018

‘#’ + Math.random().toString(16).slice(2, 8).toUpperCase();

Reply

Sebastian "Kuchen" Kucharczyk

# July 28, 2018

It is enough to use the following limits for random numbers,
so that the hexa result will always be 6 characters long: …

const min = Math.pow(2, 20);
const max = Math.pow(2, 24) – 1;

const color = Math.floor(Math.random() * ( max – min + 1 )) + min;

The last used random() routine is “Math.random.integer()” in my codes. ;-)

Reply

Sebastian Kucharczyk

Permalink to comment# October 20, 2018

My mistake … min = 0; and color.padStart(6, ‘0’); ..

Wanderson

# February 6, 2019

function generateColor () {
return #${Array.from({ length: 6 }, () => randomItem(colorValues)).join('')};
}

Reply

LeetCodes

# June 17, 2019

thanks for this, i simplified it a bit using 8⁸, which is easier for me to remember than the set of digits:

Math.floor(Math.random()*8**8).toString(16);

Reply

Fred

# August 21, 2020

This is awesome!

Reply

RainCode

# April 6, 2021

Is it possible to edit this so the 7 colors of the rainbow are shown at the same time(7 blocks on the screen) but generated in different positions on the screen every time the code is run?

Reply

Rayan Jaberi

# July 8, 2021

ٌwhy you used 16777215 in your code?

Reply

jeffreyram

Permalink to comment# September 3, 2021

16777215 is the decimal number of the highest hexadecimal in colors:

rgb(255, 255, 255) in hexadecimal is “FFFFFF” which is 16777215 when converted to decimal number.

Basically they’re choosing a random number between 000000-FFFFFF

Mnilionic

# May 1, 2022

functions for generation colors

function ChanelRand(){
    return Math.floor(Math.random() * (256 + 1));
}
function rgbRand(){
    return [ChanelRand(), ChanelRand(), ChanelRand()];
}
function rgbToHex(rgb) {
    return ((1 << 24) + (rgb[0] << 16) + (rgb[1] << 8) + rgb[2]).toString(16).slice(1);
}
function colorRand(){
    return rgbToHex(rgbRand());
}

var my_hex = '#' + colorRand();
var my_rgb = 'rgb('+ ChanelRand() +','+ ChanelRand() +','+ ChanelRand() +')';

Reply

samiullah khan

# December 22, 2022

const items = [‘A’,’B’,’C’,’D’,’E’,’F’,’1′,’2′,’3′,’4′,’5′,’a’,’b’,’c’,’d’,’e’,’f’]
let x = ”
for(var i = 0; i < 6; i++){
const random = Math.floor(Math.random() * items.length)
x += items[random]
}
console.log(#${x})

Reply

Daniel Niederberger

# January 19, 2023

I can’t believe in this over 10 year old post ranking on top of google I can’t find the term HSL even once.

Since HSL is fully browser supported (https://caniuse.com/?search=hsl) it’s very easy AND controllable to use HSL to generate random colors.

Fully random would be:

const hue = Math.random() * 360;
const saturation = Math.random() * 100;
const lightness = Math.random() * 100;
const randomColor = `hsl(${hue}, ${saturation}%, ${lightness}%)`

Admittedly a bit more verbose than the original oneliner, but also much more readable and interpretable.

But the really cool thing is what you can do with it. Want to omit the dark tones? Simply omit lightness 0-25%. Want to have full saturation? Set it that way. So you can have “random but with some constraints”. For example:

const hue = Math.random() * 360;
const lightness = Math.random() * 75;
const randomColor = `hsl(${hue}, 100%, ${25+lightness}%)`

would do what I just described. Or do the opposite and put saturation on 0% for a greyscale. The options are endless.

I have compiled a couple of examples including svgs here bit.ly/3kwhYNL .

Reply

Comments

Leave a Reply Cancel reply