HTML color clock



It’s a quarter past murky-green o’clock. Time to get the kids ready for bed.


Incredibly calming. I’d buy a smartwatch just to build and/or use this face for it. Without any numbers of course: I’m sure the subtle hues give away the time once you use it enough.


I believe you could achieve the same with a RGB LED.
But I’d suggest having some color strips on the edge as a visual reference; eyes are rather poor colorimeters. Cf. how eyes react to different ambient light, vs how digital cameras need to do white balance. The time reading then could drift quite a lot between e.g. indoor and outdoor.

The same idea could be realized even as an ambient light.

If you want the numbers too, use a LCD display with a white LED backlight, and replace the white with RGB. There possibly even are RGB-backlit displays, too.

Or you could use RGB 7seg displays. E.g. this one:

Paging @nixiebunny…?

1 Like

Note: The clock is not an example of “web safe” colors. “Web safe” colors use 1 of 6 possible values – in hex 00, 33, 66, 99, CC, or FF – for each red, green, or blue component.


I am not so sure you’d get to be able to tell the time by color. The hours have no more differentiation between them than the seconds - 1/256 change in red rather than 1/256 change in blue.

I still prefer the Industrious Clock…


Not to mention that it’s not actually converting the time to a hex value, but instead treatin the decimal digits as hex digits.


The web safe palette isn’t a thing anybody has bothered with in web design for quite a few years, FYI.

1 Like

Yeah, I was thinking it’d do a much better job by compressing the 256 value per channel color gamut into 60 chunk segments. I don’t know whether it’d be good or not to just do simple division there, or if the effect would look better going through and tweaking it a little bit.

Also would be nice if we just split the whole colorspace into 86400 increments, and just +1 every second to the end so that the color doesn’t jump once a minute.


I use it quite often, you insensitive clod! :stuck_out_tongue:

That lends itself to mapping the time to a color continuum, e.g. some sort of a heat palette, or, maybe, mapping the time-of-day to the hue in the HSV colorspace.


That second one, mapping time to hue, seems more elegant to me. I was thinking, it could be mapped out on HSL in a sine wave, so that noon is white, Midnight is black, and moving forward from midnight, the colors get lighter as well as moving across the spectrum until noon, which is white, then after noon, it moves back down towards the dark end of L-values while still moving hue across the spectrum until midnight is black. You could also vary it by the day of the year so that it offsets by and additional 1/365th of the hue spectrum every day so that the color right before/after noon/midnight also corresponds to the day of the year.


Some time ago I played with PWM RGB LEDs. Part of the software was a function that was mapping a 8-bit variable value to a triplet of 8-bit values. Splitting the continuum to a few intervals can yield maps easily.
e.g. three intervals, first r=0…255,g=0,b=0; second r=255,g=0…255,b=0; third r=255,g=255,b=0…255 - this will yield a black-red-yellow-white heatmap.
graymap is one interval, with r=0…255,g=0…255,b=0…255
and US political spectrum would go as one interval of r=255…0,g=0,b=0…255, from red through purple to blue. (or as two intervals if it’d show a better brightness profile, r=255,g=0.b=0…255, and r=255…0,g=0,b=255).
similar can be done with rainbow, and all sorts of other such mappings can be done with just a few comparisons and linear interpolations.


Aww, but I don’t want to go to bed! :frowning:

Thank you, this has nothing to do with “web safe.”

I assume that there is a (not-unreasonable) connection in many people’s minds between “weird hex colors” and “web page colors” and “web-safe colors.”

Here you go, the clock mapped onto HSL instead of RGB:

It’s still green-o’clock, apparently.

(I wanted to keep the direct mapping of the time to the code, so it would be completely obvious what was happening – though I took the liberty of multiplying the hours by 10, so you go from brown to green through the day – so it’s hardly optimal for telling the time. You can only check the clock near the end of the hour, and near the end of the minute. But you know what? No one cares what time it is at the start of the hour.)


This topic was automatically closed after 5 days. New replies are no longer allowed.