Color-Magic Tailwind Templates

Color Magic

Open-source CSS and Tailwind gradient and palette generator. Create, customize, and export stunning color combinations with ease. Built with React and TypeScript.

🎨 Color Magic

A powerful and intuitive color tool for designers and developers.

DemoReport BugRequest 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

Top categories

Loading Svelte Themes