{"id":23524063,"url":"https://github.com/robhimslf/lab_hex-color-clock","last_synced_at":"2025-05-14T06:14:55.947Z","repository":{"id":144549144,"uuid":"373969431","full_name":"robhimslf/lab_hex-color-clock","owner":"robhimslf","description":"A simple clock using the corresponding hex triplets to display a background color.","archived":false,"fork":false,"pushed_at":"2021-06-05T18:18:48.000Z","size":29,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-17T00:51:11.604Z","etag":null,"topics":["typescript","web"],"latest_commit_sha":null,"homepage":"https://infallible-mahavira-4b9840.netlify.app/","language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/robhimslf.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-06-04T22:08:04.000Z","updated_at":"2021-06-05T18:22:29.000Z","dependencies_parsed_at":null,"dependency_job_id":"9bf6bc0b-7855-471c-883e-261323fecedf","html_url":"https://github.com/robhimslf/lab_hex-color-clock","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robhimslf%2Flab_hex-color-clock","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robhimslf%2Flab_hex-color-clock/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robhimslf%2Flab_hex-color-clock/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robhimslf%2Flab_hex-color-clock/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/robhimslf","download_url":"https://codeload.github.com/robhimslf/lab_hex-color-clock/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254084003,"owners_count":22011905,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["typescript","web"],"created_at":"2024-12-25T18:13:44.983Z","updated_at":"2025-05-14T06:14:55.937Z","avatar_url":"https://github.com/robhimslf.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# lab_hex-color-clock\n\nA simple clock using the corresponding hex triplets to display a background color.\n\n## 💡 The Concept\n\nHTML color codes are *hex triplets* (six characters, three bytes) that look like this:\n\n```\n// This is rad... and red.\n#ff0000\n```\n\nSomething else that also happens to be six characters? The time in zero-padded format:\n\n```\n// The current time somewhere in the world.\n01:07:12 PM\n```\n\nBased 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.\n\nWhere 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).\n\n## 🚀 See It\n\n### Locally\n\nSuper easy.\n\n1. Clone the repo (or [download the zip](https://github.com/robhimslf/lab_hex-color-clock/archive/refs/heads/main.zip))\n2. Open your terminal of choice.\n3. Run `npm install` or `yarn install`\n4. Run `npm start` or `yarn start`\n\n### Live\n\nYou can find it on [netlify](https://infallible-mahavira-4b9840.netlify.app/)\n\n## 💖 Credits\n\n- [hextime](https://github.com/JamelHammoud/hextime) - Jamel Hammoud's original concept","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobhimslf%2Flab_hex-color-clock","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frobhimslf%2Flab_hex-color-clock","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobhimslf%2Flab_hex-color-clock/lists"}