Since there are 140 color names specified in the HTML5 standard, I thought it would be fun to display the HTML color name that is closest to the actual background color. To do that we first need to add another paragraph <p> on the web page. Then we add two span, one will display the color name, the second will contain a rectangle that will display the color. In between these we add an arrow, ⇒, and this arrow is written as: ⇒. Then we add three radio buttons named colorWeighting with the labels: Manhattan distance (make this default = checked), Euclidean distance, and Weighted Euclidean distance.
Finally we need to define the span with the id "colorRectangle" in the CSS. We create the rectangle by setting the span's width and height, we make the corners a bit rounded, add some shadow, as well as a black background color. Later we will change the background color to display the correct HTML color. As we want the rectangle to look nice next to the text and the arrow we align it vertically. The display property specifies the type of box used for an HTML element. We will use it as an inline-block. That means the inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box.
We use three methods to measure the shortest distance between the RGB values given by the time as well as by the HTML color names. The Manhattan distance is the distance between two points measured along axes at right angles.
In a plane with p1 at (x1, y1) and p2 at (x2, y2), it is |x1 - x2| + |y1 - y2|.
This method of measuring the distance works well when measuring square corners or parallel lines. However, the color space used in HTML5 is not necessarily squarish. Another way of measuring the distance between two points is by using Euclidean distance.
In a plane with p1 at (x1, y1) and p2 at (x2, y2), it is √((x1 - x2)2 + (y1 - y2)2).
Euclidean distance still measures a straight line distance between two points. The third way of measuring the distance between the values that we use is Weighted Euclidean distance. When the colors are weighted it gives twice as much weight to the Green channel compared to the Red channel, and half as much weight to the Blue channel compared to the Red channel.
All the HTML elements for the color clock are now in place.
In step 8b we will implement the ways of measuring distances in JavaScript, as well as updating the color name and the background color of the rectangle accordingly.