A clock that represents the time as hex color values

I saw a project a little while ago, where I discovered that the time (in format 00:00:00) works perfectly for hexadecimal codes. I decided to create a very small project using vanilla JS, to represent the live time as a color.

setInterval(function() {
  today = new Date();
  hex = "#" + (today.getHours() < 10 ? '0' : '') + today.getHours() + "" 
      + (today.getMinutes() < 10 ? '0' : '') + today.getMinutes() + "" 
      + (today.getSeconds() < 10 ? '0' : '') + today.getSeconds();
  document.querySelector("#clock").innerHTML = hex;
  document.body.style.backgroundColor = hex;
}, 1)

This small codeblock gets the current time, formats it (placing a zero before the number if it is less than ten) and then appends an # before it. That newly created hex code is then placed within the #clock element, and is set as the backgroundColor of the body. Changing the color of the background with the hex color gives the site an almost meditative feel.

Feel free to play around with the code!

See it live Here.

JamelHammoud/hextime

A clock that represents the time as hex color values