🎨 Color Magic

A powerful and intuitive color tool for designers and developers.

Demo • Report Bug • Request Feature

✨ Features

• 🌈 Gradient Generator: Create beautiful linear and radial gradients
• 🎨 Color Palette Generator: Generate harmonious color palettes
• 📋 Copy to Clipboard: Easy-to-use CSS and Tailwind output
• 🌓 Dark Mode: Toggle between light and dark themes
• 📱 Responsive Design: Works on desktop and mobile devices

🚀 Getting Started

Prerequisites

• Node.js (version 14 or later)
• npm or yarn

Installation

1. Clone the repo

   git clone https://github.com/FabuTheFool/Color-Magic.git

2. Install NPM packages

   npm install

   or if you're using yarn:

   yarn install

3. Start the development server

   npm run dev

   or with yarn:

   yarn dev

🖥️ Usage

1. Gradient Generator:

   • Choose between linear and radial gradients
   • Add or remove color stops
   • Adjust angle for linear gradients
   • Toggle repeating gradients

2. Color Palette Generator:

   • Select base colors
   • Choose palette type (monochromatic, analogous, complementary, triadic)
   • Generate and explore color combinations

3. Copy Output:

   • Click "Copy CSS" to copy the CSS code
   • Click "Copy Tailwind" to copy the Tailwind classes

🤝 Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

Distributed under the MIT License. See LICENSE for more information.

📬 Contact

fabrizio - @FabuTheFool -

Project Link: https://github.com/FabuTheFool/Color-Magic

🙏 Acknowledgments

• React
• TypeScript
• Tailwind CSS
• shadcn/ui