🌈 Hexcodle
Hexcodle is a game where the player is challenged with guessing the hex colour for a shade shown on the screen.
You enter your guess, as a 6 character hexadecimal code, and the game will tell you how close you were to the actual colour.
This game was developed after the hype of Wordle. It shares some features like the sharing capability leveraging emojis and presents a good challenge for anyone familiar with the concept of hexadecimal colours.
🤖 Base 16
Base 16 is something that I was immersed in many years ago as I began to be interested in digital design. The concept of representing a colour value as a 6 character string was novel at first but soon became more intriguing as my brain wasn't very good as understanding a "number" that was wider than base 10.
For those that aren't familiar, and I presume most are, a base 16 digit can represent values from 0 to 15 using the digits 0-9 and the letters A-F. The number series is as follows:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
If you combine 2 of these base 16 digits, you can represent a number between 0 and 255.
A single digit can be represented in memory as 4 bits. A pair of these digits (8 bits) can be represented as 1 byte.
Each channel (R, G, B) needed a way to represent an intensity value numerically. In most early systems (1970s-80s), intensities were stored in bytes (8 bits per channel). That gave 256 possible levels per channel.
Once this logic landed in CSS, it became ubiquitous.
🖌️ A Time with Colour
What if you could take something else numerical and represent it as a colour?
Initially I thought perhaps I could represent a form of time, perhaps millis since the epoch as a hex value, but I didn't want something as simple and that would just gradually increase slowly.
What if I wanted to represent hours, minutes and seconds as a hex value?
Well hours are out of 24 (0 - 23). Minutes are out of 60 (0 - 59) and the same for Seconds.
If I could map the fraction of each of those to a 2 digit hex value, perhaps I could map each of those hex values into an RGB space.
🗾 Mapping
Midnight, on the morning of January 1st would represent as follows:
#000000
The first pair would represent the month, 0/11...
It's worth noting at this point, if I want to experience the full range for each channel, it has to be 0-11 and divide the value as such.
The same calculation for minutes and seconds.
Right now, as I'm writing this #D2BE81 is what this would look like.
Not a super pleasant colour to be honest, but it is what it is.
📅 What about a date with colour?
The thing with the date is that it doesn't change very often.
Secondly, I could use Month (0-11) and Day (0-30), but if I want 3 channels, I would presume I could use year.
The thing with year, other than the fact that it doesn't change very often, is that the number 2025 doesn't inherently fit into a 2 digit hex. Let me explain:
A pair of base-16 hex digits can represent 0-255. The year 2025 doesn't fit into that.
2025 ÷ 16 = 126 remainder 9
126 ÷ 16 = 7 remainder 14(E) - E being the 14th value of base-16
So, 202510 = 7E916
Note that i'm using subscript to represent the base of a number, to add further clarity.
Anyway, that's 3 hex digits, not 2. That won't fit into my colour gamut.
📅 Other year representations
As we've already shown, 202510 doesn't play well in base-16, so what other alternative ways can I represent the year?
I could use the epoch, which is defined as 1st January 1970. Then the number of years since then.
That would be a linear number, not a percentage, or fraction, perhaps I that could be an avenue.
I could use the percentage of my life... I was born in the 90s, so I could say that I'm a 3rd of the way through my life... Perhaps not.
⇧ Shift the month.
I suppose as the month is only 0-11, I could represent that with a single hex value and then leverage the 3 digits for the year?
That would look something like this: #YYYMDD
To convert the month into a full range base-16 value, I would simply do the following:
Math.floor((month / 12) * 16).toString(16);
In the case if today that would be: #7E99E6
🖍️ Result
Date
Time
I've compiled the result into a mini-experiment. Check it out in the experiments list.