Random Hex Color

Comments

  1. User Avatar
    Vladimir Sobolev
    Permalink to comment#

    Sometimes script make wrong string, 5 chars only.

    • User Avatar
      Eliazer
      Permalink to comment#

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

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

  2. User Avatar
    Andrew
    Permalink to comment#

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

    Many thanks,

    Andrew.

  3. User Avatar
    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);
    • User Avatar
      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()
      
    • User Avatar
      Michael
      Permalink to comment#

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

      Oh well. Awesome Idea :)

  4. User Avatar
    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. User Avatar
    royi
    Permalink to comment#

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

    Math.random()*16777215

  6. User Avatar
    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. User Avatar
    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. User Avatar
    Subin

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

    That works in the all cases

  9. User Avatar
    Simon
    Permalink to comment#

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

  10. User Avatar
    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?

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag