I've tried to create a local page with the html on, we'll see how it goes. You can see the demo here: click for the demo page (note you can use fullscreen F11 to see more, and also Ctrl+Minus or Ctrl+Plus to zoom in and out)
I'll put the html below so that it's easy to copy and paste, I'll just make it super small. If you want to personalize it feel free, just look for the text "NumberOfBoxes" and you'll see that you can personalize the colours and the probabilities. Lazily I've not set it up for more than 4 colours, if you want to change it then you'll have to modify the counter and output.
<html>
<head>
<style type="text/css">
.randomcolourbox {display:inline-block;margin:10px; padding:25px 30px;}
p {display:block;padding:0px;}
</style>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript'>
function addElements(Num)
{
var NumberOfBoxes=225;
var probabilities = [0.25,0.25,0.25,0.25];
var colors = ["red","yellow","green","blue"];
for(i=0;i<NumberOfBoxes;i ){
var divTag = document.createElement("div");
divTag.className = "randomcolourbox";
divTag.innerHTML = " ";
document.body.insertBefore(divTag,document.body.firstChild);
}
var cls = [0,0,0,0];
$(".randomcolourbox").each(function() {
var rand2 = Math.random();
var i=0;
while(rand2>0){rand2-=probabilities[i];i ;}i--;rand=i;
cls[rand]=cls[rand] 1;
$(this).css("background-color", colors[rand]);
});
$('#cols').text(colors[0] " " colors[1] " " colors[2] " " colors[3]);
$('#nums').text(cls[0] " " cls[1] " " cls[2] " " cls[3]);
}
</script>
</head>
<body onload="addElements()">
<br/>
<p id="cols"/>
<br/>
<p id="nums"/>
</body>
</html>
