Here is the code I am currently using, but it doesn't seem to work. It only displays: "New color:#Random ColorOld color: red", it doesn't render it in a table and it doesn't render the rest of the page.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><html><body>
<style>table,body{background-color:white;}</style><script>if(window.name==""){window.name="red";}var color = "#";
for (k = 0; k < 3; k++) {
color += ("0" + (Math.random()*256|0).toString(16)).substr(-2);
}</script><script>document.write('<style>body{/* IE10 Consumer Preview */ background-image: -ms-linear-gradient(top, '+ color+' 0%, '+ window.name +' 100%); /* Mozilla Firefox */ background-image: -moz-linear-gradient(top, '+ color +' 0%, '+ window.name +' 100%); /* Opera */ background-image: -o-linear-gradient(top, '+ color +' 0%, '+ window.name +' 100%); /* Webkit (Safari/Chrome 10) */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, '+ color +'), color-stop(1, '+ window.name +')); /* Webkit (Chrome 11+) */ background-image: -webkit-linear-gradient(top, '+ color +' 0%, '+ window.name +' 100%); /* W3C Markup, IE10 Release Preview */ background-image: linear-gradient(to bottom, '+ color +' 0%, '+ window.name +' 100%);}</style>');</script><script>document.write('<table border="2" valign="center"><tr><td>New color:</td><td><font color="'+ color +'">'+ color +'</font></td></tr><td>Old color:</td><td><font color='+ window.name +'>'+ window.name +'</font></td></tr></table>');</script><script>function myfunction(){window.name=color;javascript:history.go(0);}</script><input type="submit" value="Change Color" onclick="myfunction()"></body></html>