ColorClockSaver
Today I’m releasing ColorClockSaver. It’s a screensaver that:
- Displays the time like a digital clock
- Displays the time as a hex color code
- Changes the background color based on the time
It looks like this:
It also features:
- A twelve-hour mode
- Dynamic font colors so the text is always readable on the ever-changing background color
ColorClockSaver is free and open-source. It can be downloaded here.
Inspiration and history
I always loved thecolourclock.co.uk but it is entirely based in Flash. So I made my own version of it using QuartzComposer. It’s all I knew how to use at the time.
I ran this as a screensaver for years and so did family and friends, but it was limited. It couldn’t use an embedded font, or have any settings.
This made for a great excuse to learn more about macOS development. After lots of trial and error, this is the result.
The time as a hex color code?
The screensaver shows two pieces of text, the current time and a hex number below it.
Because colors can be made up of three components (red, green, and blue), they are often represented as hex colors. For example:
6EC6E9
Each pair of digits represents the amount of intensity for each color component. 6E for red, C6 for green, and E9 for blue. This creates the soft blue you see in the screenshot above.
These numbers are picked because of the current time. Time also has three components: hour, minute, and second. Each component has 24 or 60 steps. However, these hex pairs have 256 steps. I’ve divided the hex numbers into 24 (hour) or 60 (minute, second) evenly spaced increments. These are then mapped back to the amount of red, green, or blue.
You can see a bunch of other colors and experiment yourself here: html-color.codes
And enjoy the screensaver!