Random Hex Color

Comments

Show Comments

1. 

   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.
2. 

   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 ↓
3. 

   Dennis

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

     Permalink to comment# 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()) > -1 ) return true
     })
     
     var colors = function() {
       elements.forEach(function(element) {
         element.style.backgroundColor = '#'+(Math.random()*0xFFFFFF<<0).toString(16)
         element.style.color = '#'+(Math.random()*0xFFFFFF<<0).toString(16)
         element.style.borderColor = '#'+(Math.random()*0xFFFFFF<<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 :)
4. 

   Brenden

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

   royi

   Permalink to comment# January 18, 2013

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

   Math.random()*16777215

   Reply ↓
6. 

   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 ↓
7. 

   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 ↓
8. 

   Subin

   Permalink to comment# May 16, 2014

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

   That works in the all cases

   Reply ↓
9. 

   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 ↓
10. 

    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 ↓