Using Time as a Color Generator#

20 December 2014

JavaScript, CSS, Codepen, Fiddle, Experimental

The idea#

I saw the site What colour is it? and thought the concept was really cool. For whatever reason, visualization generators pique my interest. I wanted to alter the original to see a wider range of colors, and to play with the attr() function in CSS’ ::after psuedo-element. I also wanted to add a slider just to allow the user to tweak the generated color.

See the Pen Time color by Aaron Holmes (@aholmes) on CodePen.

The HTML and CSS#

First set the attribute on your element. I decided to call it data-text.

<h1 id="time" data-text="00 : 00 : 00"></h1>

We only need two lines of CSS to get the attribute function to display.

h1::after
{
  display:block;
  content:attr(data-text);
}

Normally the content attribute is set to a static string, but there’s also the attr() function that let’s you use an attribute value on your element instead.

You can find more information about attr() on MDN.

NOTE: Browser compatibility is sketchy at best. There are some gotchas to be careful of too.

Updating the content with JavaScript#

There are no DOM API methods that let us access ::after or ::before psuedo-elements with JavaScript. We can at least use the attr() function in conjunction with the setAttribute() method or dataset property to change the content of the psuedo-elements.

With the HTML element above, here’s how we can change the value of the data-text attribute. This change will then be rendered with our CSS rules to display new text in the psuedo-element.

var timeHeader = document.getElementById('time');

var time = "15:30:25";

if (timeHeader.dataset !== undefined)
{
    timeHeader.dataset.text = time;
}
else
{
    timeHeader.setAttribute('data-text', time);
}

Theoretically that should be all we need! With a little more code to set the correct time value on a loop, the site will show a new time every second.

A repaint issue on Chrome version 39.0.2171.95#

My experiment didn’t go perfectly. I discovered that changing the attribute value does not always trigger a repaint, and thus the new time would not display. I have not figured out exactly what caused this; it was sporadic, and I wonder if it’s partly related to how CodePen works.

Thankfully there’s an easy way to trigger a repaint. It’s not exactly the prettiest solution, but it does ensure the new time is displayed each second.

timeHeader.style.display='none';
timeHeader.offsetHeight;
timeHeader.style.display='';

A little extra#

The original code uses the time values as the hexidecimal values for the background color. A time of 9 hours, 23 minutes, and 40 seconds give you the hex color #092340. Given that this will increment the 0th digit for each red, green, and blue hex value, we end up with a similar color for each second, minute, and hour.

If the time value is 09 23 40, then our RGB values are as follows.

	Hex	Dec	Conversion
Red	0x09	9	(0 × 16¹) + (9 × 16⁰)
Green	0x23	35	(2 × 16¹) + (3 × 16⁰)
Blue	0x40	64	(4 × 16¹) + (0 × 16⁰)

After 1 second, blue becomes 65, then 66, 67, 68, and so on. This is a very slow increase!

Additionally, because there are only 24 hours in a day, 60 minutes to an hour, and 60 seconds to a minute, our scale of colors is limited. Red ranges from 0 - 23, green 0 - 59, and blue 0 - 59.

Here’s a visualization of all possible red, green, and blue values individually.

To get a wider range of colors, each hexidecimal string value can be flipped. For example, 9 is “09” as a string, and “90” flipped. Here’s what our example above looks like with the values flipped.

	Hex	Dec	Flipped String
Red	0x09	9	90
Green	0x23	35	53
Blue	0x40	64	46

And here’s the range of colors and the pattern in which they occur.

Need additional help? Consider contacting me on

On this page