Demo: https://colorclock.jcastellano.me

It's color o'clock

Color o'clock is a grid of clocks that converts the current time in an hex color code and displays it in the background.

How does it work?

Each part of the current time is converted to an hexadecimal number and is then concatenated to form a valid hexadecimal color value. For example with 16:20:00 :

Single digit and single letter hexadecimal values are duplicated to fill the gaps and get an actual 16-bit value, so here a single 0 will become 00

Time is displayed in a 24-hour format to provide a larger spectrum of available color.

Build

This project has been built on Vite with Vue 3 + TypeScript and TailwindCSS so refer to these documentations to learn more on how to build color o'clock.

• ViteJS
• TailwindCSS