As the hour represent the Red color channel, the minutes the Green color channel, and the seconds the Blue color channel it could be illustrative to actually use the RGB values for each channel in the clock. The colon between the hour and the minutes could then be colored by both the Red and the Green channel, while the colon between the minutes and the seconds would then be colored by the Green and the Blue color channel.
This means that we need to rewrite one line of the JavaScript, where we add strings and variables for the HTML element. We want to combine strings where we specify that we want to change font color to what RGB value, for what text (hour, minute, second, or colons).
To edit the Red channel we take the value (it is actually a string) in hourHexDec and add the string "0000", since the Green and the Blue value should be 0. For the first colon we take the string in hourHexDec and add the string in minuteHexDec and followed by the string "00". For the minutes, or the Green channel, we take the string "00", add the string in minuteHexDec, and another string "00". And so on for the rest of the parts in the clock.
This is done in a rather tedious way by alterning strings, i.e. HTML code snippets, with JavaScript variables, and using the + to combine all elements to one long string with HTML code that is then used as the content in the paragraph with id "clock".
We now have a nice working color clock, but there is still room for improvements and enhancements.
In step 6 we will add some HTML elements as well as JavaScript to display in text, the current background color in hexadecimal as well as RGB value.