{"id":21077144,"url":"https://github.com/dev-shetty/chromatico","last_synced_at":"2025-04-30T18:42:06.724Z","repository":{"id":70517891,"uuid":"602510750","full_name":"dev-shetty/Chromatico","owner":"dev-shetty","description":"Chromatico - A Chromatic Color Collection","archived":false,"fork":false,"pushed_at":"2023-03-08T08:25:04.000Z","size":371,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-23T00:39:30.307Z","etag":null,"topics":["chromatico","color-picker","context-api","css","reactjs","svg","tailwindcss","typescript","vercel","vitejs"],"latest_commit_sha":null,"homepage":"https://chromatico.vercel.app/","language":"TypeScript","has_issues":true,"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/dev-shetty.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}},"created_at":"2023-02-16T11:14:41.000Z","updated_at":"2025-03-05T02:32:43.000Z","dependencies_parsed_at":"2023-11-21T04:26:42.495Z","dependency_job_id":"6adfe62b-108b-47ef-a0fb-2ae2edd7b3fa","html_url":"https://github.com/dev-shetty/Chromatico","commit_stats":null,"previous_names":["dev-shetty/chromatico"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-shetty%2FChromatico","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-shetty%2FChromatico/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-shetty%2FChromatico/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-shetty%2FChromatico/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dev-shetty","download_url":"https://codeload.github.com/dev-shetty/Chromatico/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251764456,"owners_count":21640064,"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":["chromatico","color-picker","context-api","css","reactjs","svg","tailwindcss","typescript","vercel","vitejs"],"created_at":"2024-11-19T19:35:14.488Z","updated_at":"2025-04-30T18:42:06.688Z","avatar_url":"https://github.com/dev-shetty.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Chromatico\n\nChromatico is a powerful and intuitive color generator designed to streamline the color selection process for designers and artists.\n\n- With features like Copy Color, Copy Clipboard, and Save History, Chromatico makes it easy to generate, copy, and save colors quickly and efficiently.\n\n- New Feature: Complement the Palette to get a different palette of color to match with the original one, and a tutorial when you use the website for the first time guiding through all the important features.\n\n- Chromatico is constantly evolving, with new features and improvements being added all the time. Whether you are a professional designer or just someone who enjoys working with colors, Chromatico is the perfect tool to help you work more efficiently and effectively.\n\n- And it can be better by your valuable contribution\n\n## Access the website here - [Chromatico](https://chromatico.vercel.app/)\n\n\u003cbr\u003e\n\n\u003cimg src=\"./public/ChromaticoHome.png\" alt=\"Chromatico Website\"\u003e\n\n\u003cbr\u003e\n\n## Tech Stack\n\nThis project is built using\n\n- ReactJs with ViteJs and TypeScript\n- TailwindCSS\n- React Context API\n- LocalStorage\n- Framer Motion\n- React Joyride\n- React Icons\n- Hosted Using Vercel\n- And a bunch of Colors\n\n![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge\u0026logo=react\u0026logoColor=%2361DAFB)\n![Vite](https://img.shields.io/badge/vite-%23646CFF.svg?style=for-the-badge\u0026logo=vite\u0026logoColor=white)\n![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge\u0026logo=typescript\u0026logoColor=white)\n    ![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge\u0026logo=tailwind-css\u0026logoColor=white)\n![Framer](https://img.shields.io/badge/Framer-black?style=for-the-badge\u0026logo=framer\u0026logoColor=blue)\n![Vercel](https://img.shields.io/badge/vercel-%23000000.svg?style=for-the-badge\u0026logo=vercel\u0026logoColor=white)\n![Git](https://img.shields.io/badge/git-%23F05033.svg?style=for-the-badge\u0026logo=git\u0026logoColor=white)\n![GitHub](https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge\u0026logo=github\u0026logoColor=white)\n![Visual Studio Code](https://img.shields.io/badge/Visual%20Studio%20Code-0078d7.svg?style=for-the-badge\u0026logo=visual-studio-code\u0026logoColor=white)\n\n\u003cbr\u003e\n\n## Project Setup\n\n1. Fork and clone the project to your local machine.\n\n2. Open the folder and run (It will install all the dependencies)\n\n```bash\n    npm install\n```\n\n3. To run the application\n\n```bash\n    npm run dev\n```\n\n\u003cbr\u003e\n\n## Folder Structure\n\nTo add new components / features\n\n```\n|-- src\n     |-- components\n          |-- \u003cComponent\u003e.tsx\n```\n\nTo add a new Page\n\n```\n|-- src\n     |-- pages\n          |-- \u003cComponentPage\u003e.tsx\n```\n\nTo add Global CSS\n\n```\n|-- src\n     |-- App.css\n```\n\n\u003cbr\u003e\n\n## Contribution Guide\n\n1. `Fork` and `Clone` the project to your local machine.\n\n2. Follow the steps mentioned in [Project Setup](#project-setup)\n\n3. Create a new branch and do the required changes, follow the folder structure mentioned [here](#folder-structure)\n\n4. Add, Commit and Push\n\n```bash\n    git add .\n    git commit -m \"Commit message\"\n    git push origin \u003cbranch-name\u003e\n```\n\n5. Create a Pull Request from your forked repo by pressing the `Compare and Pull Request` button\n\n6. Thats it! You have contributed to the project 🥳\n\n\u003cbr\u003e\n\n## License\n\nChromatico is licensed under the terms of the MIT license. See the [LICENSE File](./LICENSE) for more information.\n\n\u003cbr\u003e\n\n## Contributors\n\n\u003ca href=\"https://github.com/Deveesh-Shetty/Chromatico/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=Deveesh-Shetty/Chromatico\" /\u003e\n\u003c/a\u003e\n\n\u003cbr\u003e\n\n## Connect With Me\n\n[![GitHub](https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge\u0026logo=github\u0026logoColor=white)](https://github.com/Deveesh-Shetty)\n[![LinkedIn](https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge\u0026logo=linkedin\u0026logoColor=white)](https://www.linkedin.com/in/deveesh-shetty-908539214/)\n[![Twitter](https://img.shields.io/badge/Twitter-%231DA1F2.svg?style=for-the-badge\u0026logo=Twitter\u0026logoColor=white)](https://twitter.com/shettydeveesh)\n[![Dev.to blog](https://img.shields.io/badge/dev.to-0A0A0A?style=for-the-badge\u0026logo=dev.to\u0026logoColor=white)](https://dev.to/deveeshshetty1209)\n[![Hashnode](https://img.shields.io/badge/Hashnode-2962FF?style=for-the-badge\u0026logo=hashnode\u0026logoColor=white)](https://hashnode.com/@deveeshshetty)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdev-shetty%2Fchromatico","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdev-shetty%2Fchromatico","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdev-shetty%2Fchromatico/lists"}