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
this is is the result - The Color Clock
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
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
factor is required because hour values only go from
23 while minutes and seconds will range from
59. But each component of the color (
R, G, B) can range from
255. Thus hours are multiplied by
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.
The credit for the idea and the Flash implementation rests with Jack Hughes