Grow your CSS skills. Land your dream job.

Comments

  1. Sometimes script make wrong string, 5 chars only.

    • Eliazer
      Permalink to comment#

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

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

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

    Many thanks,

    Andrew.

  3. Dennis
    Permalink to comment#

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

      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#

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

      Oh well. Awesome Idea :)

  4. Brenden
    Permalink to comment#

    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/

  5. royi
    Permalink to comment#

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

    Math.random()*16777215

  6. Basil
    Permalink to comment#

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

  7. Owen
    Permalink to comment#

    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!

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

    That works in the all cases

  9. Simon
    Permalink to comment#

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

  10. Chris
    Permalink to comment#

    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?

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".