Random Hex Color | CSS-Tricks

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

View Demo

There is also a PHP version.

Comments

Vladimir Sobolev

# December 21, 2009

Sometimes script make wrong string, 5 chars only.

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.

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.

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

# January 18, 2013

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

Math.random()*16777215

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

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!