Javascript Colour Clock

This experiment looked at how colour could be used to communicate time, fading and animating between hues as time progresses.

Breaking the colour spectrum into its red, green and blue parts, each colour can be assigned a time unit and the amount of each colour present can be determined by how much of that unit exists in the current time.

  R value G value B value
00:00:00 0% 0% 0%
12:15:00 50% 25% 0%
23:59:59 100% 100% 100%
06:30:30 25% 50% 50%

00:00:00

#000000rgba(0,0,0)

 
 
 
 

 

HTML

<div id="clock">
  <div class="block">
    <h1 id="txt">00<span>:</span>00<span>:</span>00</h1>
    <h2 id="hex">#000000<span>rgba(0,0,0)</span></h2>
    <h3 id="tmp"></h3>
  </div>
  <div class="bars">
    <div id="hbar" class="bar">&nbsp;</div>
    <div id="mbar" class="bar">&nbsp;</div>
    <div id="sbar" class="bar">&nbsp;</div>
    <div id="dbar" class="bar">&nbsp;</div>
  </div>
</div>

CSS

<style>
  #clock{
    background-color:#000;
    transition: all .9s ease-in-out;
    -moz-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    width: 100%;
    text-align: center;
    padding-bottom: 10px;
  }
  .block h1{
    padding-top:50px;
    font-family: 'Trebuchet MS', sans-serif;
    font-size: 64px;
    letter-spacing: 4px;
    color: #fff;
    text-shadow: 0px 1px 6px rgba(0,0,0,1);
    opacity: 0.25;
    transition: all .9s ease-in-out;
    -moz-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
  }
  .block h1 span{
    font-size: 45px;
  }
  .block h2{
    font-family: 'Trebuchet MS', sans-serif;
    font-size: 22px;
    letter-spacing: 2px;
    color: #fff;
    opacity: 0.25;
    text-shadow: 0px 1px 3px #000;
    transition: all .9s ease-in-out;
    -moz-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
  }
  .block h2 span{
    display: block;
    font-size: 12px;
    padding-top:6px;
  }
  .bars{
    clear:both;
    display:block;
    width:60%;
    margin:20px auto 60px auto;
    background: rgba(0,0,0,0.3);
    padding:1px;
    border:1px solid rgba(255,255,255,0.6);
  }
  .bar{
    height:6px;
    background:#fff;
    width:0%;
    margin-bottom:1px;
    transition: all 1s;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
  }
  #dbar{
    margin-bottom: 0px;
  }
</style>

JavaScript

// Main function to interpret date and set colours
function startTime(){

  // Get the current time and create hour, minute and second values
  var today = new Date();
  var ho = today.getHours();
  var mi = today.getMinutes();
  var se = today.getSeconds();
  
  // Format hours, minutes and seconds with a leading 0 if they are less than 10
  h = checkTime(ho);
  m = checkTime(mi);
  s = checkTime(se);
  
  // Calculate a colour value for hours, minutes and seconds based on how far through each value is
  hh = Math.floor((ho/24)*255); // Based on 24 hours per day and a range of 0-255
  hm = Math.floor((mi/60)*255); // Based on 60 minutes per hour and a range of 0-255
  hs = Math.floor((se/60)*255); // Based on 60 seconds per minute and a range of 0-255

  // Fine tune so the hour colour changes as minutes progress
  temp = (ho*60)+mi;
  ht = Math.floor((temp/(24*60))*255);
  
  // Fine tune so the minutes colour changes as seconds progress
  temp = (mi*60)+se;
  htm = Math.floor((temp/(60*60))*255);

  // Generate the colour as a HEX
  hex = "#"+checkHex(ht.toString(16))+checkHex(htm.toString(16))+checkHex(hs.toString(16));

  // Update onscreen elements
  document.getElementById('txt').innerHTML = h+"<span>:</span>"+m+"<span>:</span>"+s;
  document.getElementById('hex').innerHTML = hex.toUpperCase()+"<span>rgb("+ht+","+htm+","+hs+")</span>";
  document.getElementById('clock').style.backgroundColor = hex;
  document.getElementById('hbar').style.width = Math.floor((((ho*60)+mi)/(24*60))*100)+"%";
  document.getElementById('mbar').style.width = Math.floor((((mi*60)+mi)/(60*60))*100)+"%";
  document.getElementById('sbar').style.width = Math.floor((se/60)*100)+"%";
  document.getElementById('dbar').style.width = Math.floor((((ho*60*60)+(mi*60)+se)/86400)*100)+"%";
  document.getElementById('hbar').style.backgroundColor = "#"+checkHex(ht.toString(16))+"0000";
  document.getElementById('mbar').style.backgroundColor = "#00"+checkHex(htm.toString(16))+"00";
  document.getElementById('sbar').style.backgroundColor = "#0000"+checkHex(hs.toString(16));
  document.getElementById('dbar').style.backgroundColor = hex;

  // Set everything to run every second
  t = setTimeout(function(){startTime()},1000);
}

// Simple function to add a leading 0 to numbers less than 10
function checkTime(i){
  if(i<10){ i="0"+i; }
  return i;
}

// Simple function to add a leading 0 to hex colours less than 10
function checkHex(i){
  if(i.length==1){ i="0"+i; }
  return i;
}