What colour is it, really?

I’ve seen the ‘What colour is it?’ site popping up on social media in order of inverted geekiness over the last few days (design blog -> nerds on twitter -> random dude from high school), with people fawning in equal proportions.

I happened to click a few times to see the ‘current’ colour, and it was always a bit blueish / darkish… So I investigated a bit more, and as it turns out the conversion from time to colour is spurious.

Hex to RGB

The site is copying (not converting) the Hours / Minutes / Seconds into an hexadecimal value. According to Wikipedia:

In mathematics and computing, hexadecimal (also base 16, or hex) is a positional numeral system with a radix, or base, of 16. It uses sixteen distinct symbols, most often the symbols 0–9 to represent values zero to nine, and A, B, C, D, E, F (or alternatively a–f) to represent values ten to fifteen.

A hexadecimal color code looks like this: #E3055F

The first two characters are a value of Red, the next two Green, and the last two Blue. The ‘beauty’ of hexadecimal is that you can count from 0 to 255 with only 2 characters. Indeed, since each character can take 16 values, you get 16*16 = 256 combinations possible.

It’s a more concise way of expressing a RGB colour code.

RGB assigns a base 10 (the ‘normal’ base) value between 0 and 255 for each value of red, green, or blue. So for example:

  • pure black is 0,0,0 (none of red, green, or blue)
  • pure red is 255,0,0 (full red, no red or blue)
  • pure white is 255,255,255 (full blast of each mixed together, we get white)

And going back to hexadecimal:

  • pure black is #000000
  • pure red is #FF0000
  • pure white is #FFFFFF

The way the site What Colour Is It? works is that it plainly copies the time value into an hex code. The hours represent the amount of red, the minutes the amount of green, and the seconds the amount of blue. But it doesn’t account for the full length of the scale.

So with their system, the possible red values (out of a RGB scale that goes to 255) are the ones in grey:

And that’s it. So not only do you go to 35 out of 255, but you also skip a good amount in between. And you skip more than you should. There is only 1 increment between 19h and 20h but you skip over 6 red value. With this system, you’ll never get to the higher range, and you’ll never see a ‘red’ time.

For green and blue, the scale goes a bit higher: 59 minutes or seconds -> 89 but it’s still not reaching half the scale.

So what does time look like in this case? Like this:

The purple rectangle throughout the video is the range we’re seeing.

A better representation


There are several ways to go about it, but let’s improve on the current system and keep the Hours -> Red, Minutes -> Blue, Seconds -> Green, but this time spanning the whole scale. So 0 hours = 0 red, and 23 hours = 255 red, etc.

This is what we get: http://bleepsandblops.github.io/whatcolourisitreally

Other representations

How do you most faithfully map a day to colours? I believe the answer is different for each of us: you could be a blue night / yellow morning kind of person, or a bright red night and deep black morning.

The HSB model might provide a more realistic model than the RGB:

Range of hue and brightness for a fixed saturation of 32%

The trick is to decide where we start and stop (and ideally it would loop…), and how we travel in between.