How To Generate a Random Color in JavaScript

Home Code Snippets JavaScript How To Generate a Random Color in JavaScript

Author

Chris Coyier

23 Comments

Join Conversation

Last Updated

Feb 19, 2020

Here’s a quicky (there is a PHP version too):

var randomColor = Math.floor(Math.random()*16777215).toString(16);

See the Pen
Generate New Random Hex Color with JavaScript by Chris Coyier (@chriscoyier)
on CodePen.

If you’d prefer they are a bit more pleasing or need to generator colors that work together, we have an article about that.

Comments

Vladimir Sobolev

Permalink to comment# 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”);
Andrew

Permalink to comment# 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);

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/

royi

Permalink to comment# January 18, 2013

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

Math.random()*16777215

Reply
Basil

Permalink to comment# 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

Permalink to comment# 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

Permalink to comment# 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

Permalink to comment# June 28, 2014

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

Reply
Chris

Permalink to comment# 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

Permalink to comment# May 22, 2018

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

Reply
Sebastian "Kuchen" Kucharczyk

Permalink to comment# 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

Permalink to comment# February 6, 2019

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

Reply
LeetCodes

Permalink to comment# 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

Permalink to comment# August 21, 2020

This is awesome!

Reply

Need some front-end development training?

Comments

Leave a Reply Cancel reply