Build a Hexadecimal Color Clock in JavaScript
A fun way to progress while learning JavaScript
Learning a new programming language is not always a piece of cake. Studying the basics of a language is often quite daunting. It’s a necessary evil, but from time to time, in the course of your learning, I think you can give it a little fun break.
This story offers you just that little bit of fun in your learning of the JavaScript programming language. Thus, I will teach you how to create a hexadecimal color clock.
This will be an opportunity to put into practice the basics of the JavaScript language as you have already learned to make a fun application.
What Is a Hexadecimal Color Clock?
A hexadecimal color clock represents the time as a hexadecimal color and applies this color to the background. Note also that a hexadecimal color is a six digit representation of a color.
It is well-known to web developers who use this representation every day in HTML pages with CSS.
Concretely, you will retrieve the time in hour:minute:second format and then convert each of the components of the time into a component of the RGB hexadecimal color format.
In order to have a greater diversity of colors, we will put the hours, minutes, and seconds back into the value set [0;255].
Currently it is 12:06:56. Applying the calculation I have just detailed to this time, we will obtain the following hexadecimal color: #851AF2.
I will come back in detail about this calculation when I will implement it in JavaScript later in this piece.
Building the HTML Page
The first step is to create an HTML page to represent our hexadecimal color clock. The background of the HTML page will take the hexadecimal color returned by our hexadecimal color clock.
I will also display the hexadecimal value returned by the hexadecimal color clock on the page by adapting the color of the text depending on whether the hexadecimal hour is dark or light.
The content of the basic HTML page for our hexadecimal color clock is as follows:
Hexadecimal Color Time Conversion
As I explained earlier, our hexadecimal color clock will represent the time as an RGB color in hexadecimal format.
You must, therefore, write a function capable of transforming the time to RGB color in hexadecimal format.
The prerequisite for this function is to be able to transform a decimal value into a hexadecimal value. To do this, I create a toHex function that takes an integer variable as input and returns its hexadecimal value.
In order to be sure that the hexadecimal value is returned on two digits, I add an initial zero :
I will then create a hexaTime function returning the current time in the format expected by our hexadecimal color clock.
I retrieve the current date using the Date object in JavaScript. I then call the functions getSeconds, getMinutes, and getHours to get respectively the seconds, minutes, and hours of the current date.
I then put these values back into the value set [0;255] with a simple rule of three.
Then, for each decimal value obtained, I call the toHex function so that I can output the time as an RGB color in hexadecimal format.
All this gives the following code:
Changing the Color of the Text According to the Darkness
In order to be able to visualize the time well in the hexadecimal format of our clock, it would be good to be able to change its color according to whether the background color is more or less dark.
If the color is dark, we write the text in white, and if it is light, we write the text in black.
To do this, I will create a hexislight function that will return true if the input color is light and false if the input color is dark.
After retrieving the R, G, and B components of the input RGB color, I will apply the following formula to calculate the brightness of the color:
brightness = ((red * 299) + (green * 587) + (blue * 114)) / 1000;From this brightness value, it can be deduced that the color is light if the value is higher than 155. Otherwise, it is dark.
All this gives the following code for the hexislight function:
Continuous Application of Hexadecimal Color in the Background
The last part of the construction of our hexadecimal color clock will consist of applying the obtained RGB color continuously in the background of the previously detailed HTML page.
The time value in hexadecimal format will be updated second by second, as well as the display color of this time.
So, I create a bgColor function that first retrieves the current time in hexadecimal format. I apply this color in the background of the HTML page body.
Then, I display the hexadecimal color within the hexatime div while taking care to change its color depending on whether the hexadecimal color is dark or light.
It then remains to ensure that this function is constantly called-up so that the background color is continuously updated.
This last feature is implemented via the standard JavaScript setTimeout function in which it is specified that the bgColor function must be called in 100ms.
Finally, we finish the development of our hexadecimal color clock by making a first call to the bgColor function once the DOM of the page has been successfully loaded.
All this gives the following complete code for the hexadecimal color clock we just developed:
Hexadecimal Color Clock in Action
The test of the hexadecimal color clock requires loading its HTML page in a modern browser such as Brave browser.
Once the HTML page is launched, you should get the following result:
As time goes by, you should then see the displayed color change:
The hexadecimal color clock that we have just developed is therefore perfectly functional.
To Go Further
You can get inspiration from the code written for this hexadecimal color clock to make a desktop application that displays this clock in the desktop background.
In order to reuse the JavaScript code used in this piece as much as possible, I recommend you use the Electron framework that allows you to develop multi-platform desktop applications with JavaScript, HTML, and CSS.
Finally, you can discover this tutorial in video on YouTube:
