About

I came across a post in my Facebook feed today that linked to The Colour Clock by Jack Hughes. It's a pretty neat idea - the current time is translated into a hexadecimal color value and applied to the background of the page. So as the time changes, the background color of the page changes as well.

The only thing is, it's in Flash so if you're on an iOS device, you won't be able to see it. Or if you'd like to pull it up on your web-enabled TV or other device that doesn't have Flash. So I spent my Sunday afternoon porting it over to JavaScript and this is is the result - The Color Clock.

---

Download

You don't really need to download anything to try this out - it's hosted at http://colorclock.nogoodatcoding.com. But if you'd like to check the source or fork your own repository, the project is hosted on GitHub.

---

How It Works

The project isn't too complicated - the basic idea is to map each of hours, minutes and seconds to R, G and B values to get a hex color string for the page background.

• I'm using jQuery.
  
• To convert the current time into a hex color value, I'm taking each component of the time (hours, minutes and seconds), multiplying with an appropriate factor and converting to hex values with leading 0s. The factor is required because hour values only go from 0 to 23 while minutes and seconds will range from 0 to 59. But each component of the color (R, G, B) can range from 0 to 255. Thus hours are multiplied by 256/60 and minutes and seconds by 256/24 to get the right mapping.
• With the jQuery Color Plugin, it's really easy to animate color transitions.
• I read up on CSS 3 radial gradients here.
• The script for the (kinda pointless) option to increase and decrease font size is from here.
  

---

Credits

The credit for the idea and the Flash implementation rests with Jack Hughes. I've only taken his idea and ported it to JavaScript because I thought it'd be a fun way to spend a Sunday afternoon!