Color Clock - Representing Time As A Hexadecimal Color Value

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 what I have: Can you spot the original?

Will the real Color Clock please stand up?
It's the one on the left.

I've tried to stay true to the original but among other things, my colors are just a little off, most likely because I'm calculating them differently. You can find project details on my site.

 Cross-posted from No Good Tips & Tricks


James Khoury said...

I found that it didn't scale well when using the minus button. The underline moved to the right (or maybe the time moved to the left... who knows.) at leaset in chrome.

if you change your css rule
#font-controls {
float: right;

#font-controls {
position: absolute;
right: 0px;
padding-right: 10px;

It should work better.

vijaygupta said...

great article, nice idea. I will definately gonna use in my web blogs.

Mona said...

The clock is ticking and again, its your birthday! :)

Many many Happy Returns of the day!