Hexadecimal color clock. It tells both what time and color it is. (jacopocolo.com)
over 9 years ago from William Hutter, Azuweb
over 9 years ago from William Hutter, Azuweb
I added
transition: background 1s linear;
for an eternal color fade.
I don't think that makes much sense, even if the browser is smart enough to render a color between #000001 and #000002 during the transition, we certainly won't notice it.
There's a lot of colors left out of this clock (when it skips the alpha values, or when it skips values 60-99 while incrementing the next place value). But yes, some changes will be too minute to notice.
This is for those that are not.
Very clever! Would love to see this as a screensaver for Mac.
Looks like this similar site they link to has a screensaver! -- http://thecolourclock.co.uk/
I do not understand how the time maps to colors. Supposedly, hours = red, minutes = green, and seconds = blue, but that does not explain this at all:
http://i.imgur.com/0N4166b.png
I think the algorithm is mixed up, mapping hours to green and minutes to red?
The linked site is straight-mapping the time to hex. So 15:52:04 becomes #155204. So the r will never go above 23, and the g/b will max at 59 (because it starts at 0). That excludes quite a bit of the 16.7 million possible colors.
Another way to do it, which the Flash version might be doing, is taking the h, m, or s, getting a percentage of that value based on its max value, like 15 / 23 = 0.652, then multiplying that by 255 (the total number of color values per r, g, or b), which, if you did it for all three, would be rgb(166,225,17), or #A6E111.
Or maybe they’re not mapping to rgb, but rather something like HSL?
You can download websaver and use the webpage as your screen saver. It's working great for me!
Sweet! Thanks!
Simple but so clever. Incredible idea.
Clever!
Incredible idea. Now I'm just staring at the clock.
Cool idea.
The html source is cool too. Using ascii art the author declares that their coding philosophy is "whatever works". It also gives a link to another project, http://www.jacopocolo.com/hottercolder/ (be sure to allow geolocation).
Maybe some spaces between the numbers. Like:
So it can be read easier.
Spaces in a hexadecimal code wouldn't render though. Given the nature of this clock I think it's best to err on the side of nerdom.
You could always remove the spaces with Javascript.
.replace(" ","");
Wow. How do people think of these things.
Designer News
Where the design community meets.
Designer News is a large, global community of people working or interested in design and technology.
Have feedback?
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now