What colour is it? Hex clock

Who knew that 7.06 PM looked dark blue?
Who knew that 7.06 PM looked dark blue?

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 Luke James Taylor’s website: THE HEX CLOCK.

2 thoughts on “What colour is it? Hex clock”

  1. Hi Gareth.

    Nice article, really well explained, and thanks for the mention.

    The issue with representing colours using the time is that due to how HEX works, the colour will mostly be dark. This is why I added the Toggle Colour option to take the time and distribute this over the entire colour spectrum, from #000000 to #ffffff, including all the colours in-between.

    Thanks
    Luke James Taylor

Leave a Reply

Your email address will not be published. Required fields are marked *