Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vishwagauravin/colpat
π¨ Looking for the perfect color palette? Look no further than ColPat! π Our advanced AI and user-friendly interface make it easy to create the ultimate color scheme for your designs. π§ With plenty of customization options, you'll have all the tools you need to unleash your creativity and elevate your projects to the next level. β¨ Try Now!
https://github.com/vishwagauravin/colpat
color color-scheme colors design frontend graphics javascript nextjs react tailwindcss
Last synced: about 2 months ago
JSON representation
π¨ Looking for the perfect color palette? Look no further than ColPat! π Our advanced AI and user-friendly interface make it easy to create the ultimate color scheme for your designs. π§ With plenty of customization options, you'll have all the tools you need to unleash your creativity and elevate your projects to the next level. β¨ Try Now!
- Host: GitHub
- URL: https://github.com/vishwagauravin/colpat
- Owner: VishwaGauravIn
- License: gpl-3.0
- Created: 2023-03-22T08:39:57.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-10-16T17:27:11.000Z (about 1 year ago)
- Last Synced: 2024-05-02T03:30:57.357Z (8 months ago)
- Topics: color, color-scheme, colors, design, frontend, graphics, javascript, nextjs, react, tailwindcss
- Language: JavaScript
- Homepage: https://colpat.itsvg.in
- Size: 755 KB
- Stars: 13
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
![1682215553111](https://user-images.githubusercontent.com/81325730/234714129-d4087095-013b-48c7-a932-7db030113038.png)
# Features
Design heavily relies on color, and selecting an ideal color palette can be overwhelming. Fortunately, ColPat provides a set of fantastic tools that let you unleash your creativity and bring your designs to life. ColPat's distinguishing features include:![1682215571495](https://user-images.githubusercontent.com/81325730/234713744-5e6c9528-e28c-4e2f-8ab9-61fb74489777.png)
### β Trending Color Palettes:
ColPat's Trending Color Palettes feature keeps you up-to-date with the latest color trends. It helps you choose the most popular colors for your project, whether you're designing a website, marketing campaign, or product. Additionally, you can tailor the palettes to your preferences using ColPat's user-friendly interface.![1682215587868](https://user-images.githubusercontent.com/81325730/234713797-d331fddf-25f2-4e64-ba33-188cfebd553d.png)
### β Awesome Gradients:
With ColPat's Awesome Gradients feature, you can effortlessly produce countless gradients. Gradients enhance the depth and texture of designs, making them more visually appealing. You can experiment with multiple color combinations and develop gradients that match your design requirements.![1682215663143](https://user-images.githubusercontent.com/81325730/234713829-6d08a7cd-6ec2-4e06-b922-92d83f452adf.png)
### βTailwind Palette Generator:
ColPat's Tailwind Palette Generator feature is custom-made for Tailwind CSS developers. By clicking once, you can create color palettes for your next Tailwind-powered project. This feature saves you time and effort when choosing colors that align with Tailwind's design system.![1682215604327](https://user-images.githubusercontent.com/81325730/234713869-2bc46eb3-f8af-4c77-a662-9e17bd4120ab.png)
### β Palette from Image [AI]:
ColPat's Palette from Image [AI] feature uses artificial intelligence to analyze an image or logo's colors and create a color palette that complements it. This feature is particularly helpful for branding projects or when you need to match colors from an existing design.![1682215617106](https://user-images.githubusercontent.com/81325730/234713924-2cef2971-2b65-4bda-991c-4fc4ccf36b38.png)
### β Color Palette from Color [AI]:
ColPat's Color Palette from Color [AI] feature generates a color palette from a single color. Just specify your desired color, and ColPat will generate the best color palette for you. This feature is ideal when you have a specific color in mind and want to create a palette around it.![1682215641921](https://user-images.githubusercontent.com/81325730/234713976-da7736aa-54d8-4780-b506-10bfa2462e08.png)
### β What Color Says!:
ColPat's What Color Says! feature explains the psychology of color and how different colors can impact emotions and behavior. It assists you in comprehending the importance of a color and choosing the perfect color to resonate with your intended audience.## Our Social Links
[![LinkedIn](https://img.shields.io/badge/linkedin-%230077B5.svg?style=normal&logo=linkedin&logoColor=white)](https://linkedin.com/in/VishwaGauravIn)
[![Twitter](https://img.shields.io/badge/Twitter-%231DA1F2.svg?style=normal&logo=Twitter&logoColor=white)](https://twitter.com/VishwaGauravIn)
[![Instagram](https://img.shields.io/badge/Instagram-%23E4405F.svg?style=normal&logo=Instagram&logoColor=white)](https://instagram.com/VishwaGauravIn)## PageSpeed Insights
![](https://raw.githubusercontent.com/VishwaGauravIn/Images/f13849bc9989d66c67085313dd606ea978eff0f8/psi-gprm.svg)## Tech Used
![Next JS](https://img.shields.io/badge/Next-black?style=for-the-badge&logo=next.js&logoColor=white)
![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)
![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white)
![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)
![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)
![Vercel](https://img.shields.io/badge/vercel-%23000000.svg?style=for-the-badge&logo=vercel&logoColor=white)NextJS Guide
## Getting Started
First, run the development server:
```bash
npm run dev
# or
yarn dev
```Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
## Learn More
To learn more about Next.js, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
## Deploy on Vercel
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.