Last Updated: February 25, 2016
·
1.073K
· smit2013

Randomly assign colors to different sections of your layout

Have you ever got stuck while assigning colors quickly to your layout elements for testing purpose?

What I mean is, its not to your final output, you just need to color different boxes of your layout so that you can quickly be assured that your layout is actually functioning. Until sometime before I did color my layout boxes manually one by one....it was ugly. really. Also when I ran out of common colors and start to assign hex color codes, most of the time adjacent boxes gets almost same color ruining the look (Yeah I do care about the look of my wire-frame too).

Now that the problem is clear here is what I came up with...

$('*').each(function(){
    var color = '#'+Math.floor(Math.random()*16777215).toString(16);
    $(this).css({backgroundColor:color}); });

I am pretty happy with the results :) and if sometime it doesn't work I just have to press F5 once or twice.

Picture

Picture

Picture

Off-course the key here is the quick random color generator line
'#'+Math.floor(Math.random()*16777215).toString(16);

Thanks to Paul Irish for sharing this article
http://www.paulirish.com/2009/random-hex-color-code-snippets/

1 Response
Add your response

Really neat :)

over 1 year ago ·