There have been a few occasions over the last few months when I’ve been standing at one end of my office and needed to keep an eye on the time. Each time I’ve pulled up What colour is it? on my browser. Because it’s fun.
What colour is it? is one of those really simple why didn’t I think of it ideas: use the time to specify RGB values.
How does it work?
RGB is a system for representing colours on a computer display. Red, green, and blue can be mixed in different proportions (on a scale of 0 to 255) to display any color in the visible spectrum.
A few examples:
- rgb (0, 0, 0) represents black: no red, no green, no blue.
- rgb (255, 0, 0) represents bright red.
- rgb (0, 83, 155) represents the dark blue used on the University of St Andrews website.
As well as decimal values, CSS also accepts hexadecimal values. Hex is useful for computers because you can count up to 255 using only two characters. Decimal 255 equals hex FF.
The same examples, but in hex:
- #000000 black
- #FF0000 red
- #00539b St Andrews blue
Which brings us back to the clock.
Take the time in 24 hour format, HH:MM:SS and map hours to red, minutes to green, and seconds to blue.
- 19:06:46 = #190646 = rgb (25, 06, 70) = dark blue/violet
- 23:58:00 = #235800 = rgb (35, 88, 00) = dark green
Another example of a hex clock can be found on Jaco Pocolo’s website: Hex clock.