ColorFusion 🎨

Design with Ease, Create with Precision

🌐 Live Demo | 💻 Source Code

🚀 Features

🎨 Palette Generator: Create harmonious and trendy color palettes in an instant.

🔄 Color Converter: Convert your colors between different formats with precision.

🌈 Tailwind Gradient: Generate beautiful Tailwind CSS gradients effortlessly.

🔲 CSS Background Patterns: Create stunning CSS background patterns with ease.

💧 Blob Composition: Design and customize unique blob shapes for your projects.

🌗 Tailwind Shadow: Generate custom Tailwind CSS shadow classes with ease.

🔗 ChromaSync: Synchronize and convert colors between different formats and Tailwind classes.

🔲 Tailwind Table Generator: Generate Tailwind CSS tables with ease.

🔲 Tailwind Grid Generator: Generate Tailwind CSS grids with ease.

You can export your creations in CSS, Tailwind, or Figma formats. Additionally, you can add colors to favorites, reuse or delete color searches.

🎯 Usage

Each feature in ColorFusion has its own method of use:

Palette Generator (TrendPaletteGenerator)

1. Enter a starting color or use a Tailwind class.
2. The tool automatically generates a harmonious palette, including complementary and triadic colors.
3. You can copy colors, add them to favorites, and export the palette in different formats.

Color Converter (ChromaSync)

1. Enter a color in any format (HEX, RGB, HSL) or a Tailwind class.
2. The tool instantly converts the color into all other formats and displays corresponding Tailwind shades.
3. You can copy the results and manage a search history.

Tailwind Gradient Generator

1. Choose start and end colors, gradient direction, and optionally add an intermediate color.
2. The tool generates the corresponding Tailwind code that you can copy directly into your project.

CSS Background Patterns

1. Select a predefined pattern, then customize colors, opacity, and spacing.
2. Visualize the result in real-time and copy the generated CSS code to use in your project.

Blob Composition

1. Adjust parameters such as size, complexity, and color to create a unique blob shape.
2. You can animate the blob, export the result as SVG or GIF, and copy the generated code.

Tailwind Shadow Generator

1. Modify shadow parameters (offset, blur, spread, color) using sliders.
2. The tool generates the corresponding Tailwind class and equivalent CSS code in real-time, which you can easily copy.

Tailwind Table Generator

1. Customize table properties like width, height, and text alignment.
2. Set colors for header, body, and text.
3. Generate the table HTML and Tailwind CSS code.

Tailwind Grid Generator

1. Customize grid properties like columns, rows, and gaps.
2. Set colors for the grid and its cells.
3. Generate the grid HTML and Tailwind CSS code.

Tailwind Code Visualizer

1. Enter your Tailwind CSS code.
2. The tool visualizes the code, showing how it translates to HTML and CSS.

🛠️ Tech Stack

• React - UI library
• Next.js - React framework
• Tailwind CSS - Utility-first CSS
• shadcn/ui - Reusable UI components
• Framer Motion - Animation library

📥 Installation

# Clone the repository
git clone https://github.com/njaga/colorfusion.git

# Navigate to project directory
cd colorfusion

# Install dependencies
npm install

# Run in development mode
npm run dev

About ColorFusion

ColorFusion is a comprehensive and innovative design toolkit meticulously crafted by Ndiaga Ndiaye, a passionate FullStack JavaScript developer and UI/UX designer with over a decade of experience in the field. This powerful suite of tools is designed to revolutionize the way creators approach color and design in their projects, offering a seamless blend of functionality and creativity.

Born out of the need for a unified platform that addresses various design challenges, ColorFusion empowers both novice and seasoned designers to effortlessly generate stunning visual elements, significantly streamlining the design process and boosting productivity.

Terms of Use

ColorFusion is a free tool available for everyone to use freely. We encourage both personal and commercial use of our toolkit, aiming to support the creative community in their design endeavors.

• Free for personal and commercial use
• No attribution required (although appreciated)
• Modifications and distributions are allowed under the same license

Privacy Policy

We value your privacy and are committed to protecting your personal information. ColorFusion operates with the following privacy principles:

• No user data storage: All color conversions and generations are performed client-side
• No tracking or analytics: We don't collect any information about your usage of the tool
• No cookies: We don't use cookies or any other tracking mechanisms

Get Involved

ColorFusion is an open-source project, and we welcome contributions from developers, designers, and enthusiasts! Whether you're fixing bugs, adding new features, or improving documentation, your input is valuable.

👨‍💻 Author

Ndiaga Ndiaye

📄 License

This project is licensed under the MIT License. See the LICENSE file for details.

---

Made with ❤️ by Ndiaga Ndiaye