What Colour Is It in 466 bytes!

README.md

'What Colour Is It' in 466 bytes

annotated.html have comments to explain what is happening in that script;

• Responsive;
• Font resize based on the size of the window;
• Should take care of retina displays (i can't test)!
• Should support all recent browsers. (but i can't test all of then, would be nice some help).

You can see it working here, or download the index.html in this gist and open in your browser!

annotated.html

.<script>

/*

'What Colour Is It' in 466 bytes

check http://whatcolourisit.scn9a.org/ if you don't know what it is

This is the commented version, check index.html file to see the minified (by hand) version;

*/

var w = window,
    n = Math,
    b = document.body,
    c = b.style,
    t = 10, //use this var to save some bytes
    z = '0', //use this var to save some bytes
    d,
    j;

c.textAlign = 'center';
c.color = '#fff';

//update function
function u(
  h, //hour
  m, //minute
  s  //second
 ){
  //place this here, so doesn't show 'undefined' at the start on firefox
  c.transition = '0.8s';
  //line height based on the height of the window
  c.lineHeight = (w.innerHeight / 2.3)+'px';
  //font size based on the size of the window
  c.fontSize = ( n.max(n.min(w.innerWidth / t, 150 /*max font size*/),50 /*min font size*/) * w.devicePixelRatio /*should take care of retina displays*/ )+'px';

  d = new Date;

  h<t&&(h=z+h); //if hour is less than 10 add a 0
  m<t&&(m=z+m); //if minute is less than 10 add a 0
  s<t&&(s=z+s); //if second is less than 10 add a 0

  j = "#" + h + m + s;

  //add time to the body
  b.innerHTML = h +' : '+ m +' : '+ s +'<br/>' + j;

  //change color background
  c.background = j;

  //update every second
  setTimeout(function(){ u(d.getHours(), d.getMinutes(), d.getSeconds()); }, 1E3 );// 1E3 means ten to the power of three (1000) and saves one byte

};

w.onload = u;

</script>

index.html

.<script>var w=window,n=Math,b=document.body,c=b.style,t=10,z='0',d,j;c.textAlign='center';c.color='#fff';function u(h,m,s){c.transition='0.8s';c.lineHeight=(w.innerHeight/2.3)+'px';c.fontSize=(n.max(n.min(w.innerWidth/t,150),50)*w.devicePixelRatio)+'px';d=new Date;h<t&&(h=z+h);m<t&&(m=z+m);s<t&&(s=z+s);j="#"+h+m+s;b.innerHTML=h+':'+m+':'+s+'<br/>'+j;c.background=j;setTimeout(function(){u(d.getHours(),d.getMinutes(),d.getSeconds());},1E3);};w.onload=u;</script>