# What colour is it? Hex clock

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.

### Gareth Saunders

I’m Gareth J M Saunders, 49 years old, 6′ 4″, father of 3 boys (including twins). Enneagram type FOUR and introvert (INFP), I am a non-stipendiary priest in the Scottish Episcopal Church, I sing with the NYCGB alumni choir, play guitar, play mahjong, write, draw and laugh… Scrum master. Latterly, web architect and agile project manager at the University of St Andrews and former warden at Agnes Blackadder Hall.

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

1. Luke James Taylor says:

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.