Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dev-shetty/chromatico
Chromatico - A Chromatic Color Collection
https://github.com/dev-shetty/chromatico
chromatico color-picker context-api css reactjs svg tailwindcss typescript vercel vitejs
Last synced: about 4 hours ago
JSON representation
Chromatico - A Chromatic Color Collection
- Host: GitHub
- URL: https://github.com/dev-shetty/chromatico
- Owner: dev-shetty
- License: mit
- Created: 2023-02-16T11:14:41.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-03-08T08:25:04.000Z (over 1 year ago)
- Last Synced: 2023-11-21T04:26:39.395Z (12 months ago)
- Topics: chromatico, color-picker, context-api, css, reactjs, svg, tailwindcss, typescript, vercel, vitejs
- Language: TypeScript
- Homepage: https://chromatico.vercel.app/
- Size: 362 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Chromatico
Chromatico is a powerful and intuitive color generator designed to streamline the color selection process for designers and artists.
- With features like Copy Color, Copy Clipboard, and Save History, Chromatico makes it easy to generate, copy, and save colors quickly and efficiently.
- 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.
- 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.
- And it can be better by your valuable contribution
## Access the website here - [Chromatico](https://chromatico.vercel.app/)
## Tech Stack
This project is built using
- ReactJs with ViteJs and TypeScript
- TailwindCSS
- React Context API
- LocalStorage
- Framer Motion
- React Joyride
- React Icons
- Hosted Using Vercel
- And a bunch of Colors![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)
![Vite](https://img.shields.io/badge/vite-%23646CFF.svg?style=for-the-badge&logo=vite&logoColor=white)
![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white)
![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white)
![Framer](https://img.shields.io/badge/Framer-black?style=for-the-badge&logo=framer&logoColor=blue)
![Vercel](https://img.shields.io/badge/vercel-%23000000.svg?style=for-the-badge&logo=vercel&logoColor=white)
![Git](https://img.shields.io/badge/git-%23F05033.svg?style=for-the-badge&logo=git&logoColor=white)
![GitHub](https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white)
![Visual Studio Code](https://img.shields.io/badge/Visual%20Studio%20Code-0078d7.svg?style=for-the-badge&logo=visual-studio-code&logoColor=white)
## Project Setup
1. Fork and clone the project to your local machine.
2. Open the folder and run (It will install all the dependencies)
```bash
npm install
```3. To run the application
```bash
npm run dev
```
## Folder Structure
To add new components / features
```
|-- src
|-- components
|-- .tsx
```To add a new Page
```
|-- src
|-- pages
|-- .tsx
```To add Global CSS
```
|-- src
|-- App.css
```
## Contribution Guide
1. `Fork` and `Clone` the project to your local machine.
2. Follow the steps mentioned in [Project Setup](#project-setup)
3. Create a new branch and do the required changes, follow the folder structure mentioned [here](#folder-structure)
4. Add, Commit and Push
```bash
git add .
git commit -m "Commit message"
git push origin
```5. Create a Pull Request from your forked repo by pressing the `Compare and Pull Request` button
6. Thats it! You have contributed to the project 🥳
## License
Chromatico is licensed under the terms of the MIT license. See the [LICENSE File](./LICENSE) for more information.
## Contributors
## Connect With Me
[![GitHub](https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white)](https://github.com/Deveesh-Shetty)
[![LinkedIn](https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/deveesh-shetty-908539214/)
[![Twitter](https://img.shields.io/badge/Twitter-%231DA1F2.svg?style=for-the-badge&logo=Twitter&logoColor=white)](https://twitter.com/shettydeveesh)
[![Dev.to blog](https://img.shields.io/badge/dev.to-0A0A0A?style=for-the-badge&logo=dev.to&logoColor=white)](https://dev.to/deveeshshetty1209)
[![Hashnode](https://img.shields.io/badge/Hashnode-2962FF?style=for-the-badge&logo=hashnode&logoColor=white)](https://hashnode.com/@deveeshshetty)