https://github.com/robhimslf/lab_hex-color-clock
A simple clock using the corresponding hex triplets to display a background color.
https://github.com/robhimslf/lab_hex-color-clock
typescript web
Last synced: about 1 year ago
JSON representation
A simple clock using the corresponding hex triplets to display a background color.
- Host: GitHub
- URL: https://github.com/robhimslf/lab_hex-color-clock
- Owner: robhimslf
- License: mit
- Created: 2021-06-04T22:08:04.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2021-06-05T18:18:48.000Z (about 5 years ago)
- Last Synced: 2025-02-17T00:51:11.604Z (over 1 year ago)
- Topics: typescript, web
- Language: TypeScript
- Homepage: https://infallible-mahavira-4b9840.netlify.app/
- Size: 28.3 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# lab_hex-color-clock
A simple clock using the corresponding hex triplets to display a background color.
## 💡 The Concept
HTML color codes are *hex triplets* (six characters, three bytes) that look like this:
```
// This is rad... and red.
#ff0000
```
Something else that also happens to be six characters? The time in zero-padded format:
```
// The current time somewhere in the world.
01:07:12 PM
```
Based on a pretty nifty concept by [Jamel Hammoud](https://github.com/JamelHammoud/hextime), this small tinkering renders the current time while also using that time to generate a hex color code to paint the background.
Where Jamel's code is written in JavaScript, mine is written in TypeScript with additional sugar to show the various ways that the hex code can be used as a color. This includes displays of the current time as RGB (red, green, blue) and HSL (hue, saturation, lightness).
## 🚀 See It
### Locally
Super easy.
1. Clone the repo (or [download the zip](https://github.com/robhimslf/lab_hex-color-clock/archive/refs/heads/main.zip))
2. Open your terminal of choice.
3. Run `npm install` or `yarn install`
4. Run `npm start` or `yarn start`
### Live
You can find it on [netlify](https://infallible-mahavira-4b9840.netlify.app/)
## 💖 Credits
- [hextime](https://github.com/JamelHammoud/hextime) - Jamel Hammoud's original concept