🎨 ColorSanity - Your Ultimate Color Companion

ColorSanity is a powerful tool designed to help designers, developers, and creatives generate, customize, and explore stunning color palettes, gradients, and CSS code snippets. With real-time previews, a beautiful and intuitive UI, and a host of advanced features, ColorSanity streamlines your workflow and brings your projects to life with vibrant colors.

🚀 Key Features

• 🎨 Color Palette Generator: Create custom color palettes perfect for branding and design projects.
• 🌈 Gradient Generator: Generate stunning gradients for your designs.
• 🖌️ Tints & Shades: Explore color variations to find the perfect hue.
• 💻 CSS Code Export: Copy ready-to-use CSS code with a single click.
• 📚 Curated Collections: Explore handpicked color palettes and gradients.
• 🎨 Theme Customization: Fine-tune your theme colors with ease.
• 📱 Responsive Design: Works seamlessly across all devices.
• 🔧 PWA Support: Installable as a Progressive Web App for offline use.
• 🌐 i18n Language Support: Multi-language support for global users.
• 🧪 Vitest Testing: Comprehensive testing with Vitest for robust code.
• 🛠️ Shadcn-Vue Components: Beautiful and reusable UI components.
• 🗂️ Vue Router: Seamless navigation and routing.
• 🧹 BiomeJS: Fast and efficient code formatting and linting.
• 🐶 Husky: Git hooks for pre-commit linting and formatting.
• 🔍 Vue DevTools: Debugging and inspection with Vue DevTools.
• 📊 Rollup & Vite Visualizers: Analyze bundle size and performance.
• 🖼️ SVG Loader: Optimized SVG handling for better performance.
• 🔧 Vite Inspect Plugin: Debug and inspect Vite plugins.
• 🗜️ Vite Compression: Optimized assets with compression.
• 💾 LocalStorage Theme Persistence: Save and load user theme preferences.
• 📦 Pinia Persistence Plugin: Persistent state management for themes.
• 🎨 Highly Customizable UI: Tailored to fit your design needs.
• 🚀 Netlify Deployment: Easy deployment with Netlify.

🛠️ Built With

• ⚡ Vite: Next-generation frontend tooling.
• ⚛️ Vue 3: Progressive JavaScript framework.
• 📘 TypeScript: Typed superset of JavaScript.
• 🎨 Tailwind CSS: Utility-first CSS framework.
• 🎭 Shadcn-Vue: Beautiful and reusable UI components.
• 🖼️ Lucide Vue: Beautiful & consistent icon pack.
• 📊 Unovis: Composable charting library.
• 🌙 VueUse: Collection of essential Vue composition utilities.
• 🚨 Vee-Validate: Form validation for Vue.
• 📦 Pinia: Intuitive state management for Vue.
• 🌐 Vue I18n: Internationalization and language support.
• 🧪 Vitest: Fast and modern testing framework.
• 🐶 Husky: Git hooks for pre-commit linting.
• 🧹 BiomeJS: Fast and efficient code formatting and linting.
• 🔍 Vue DevTools: Debugging and inspection tools.
• 🗜️ Vite Compression: Optimized assets with compression.
• 🖼️ SVG Loader: Optimized SVG handling.
• 📊 Rollup & Vite Visualizers: Bundle size and performance analysis.

📈 Development Process

The development of ColorSanity focused on creating a user-friendly interface with robust functionality:

• 🎨 Implemented core color customization features.
• 🔍 Integrated real-time color previews.
• 🎨 Developed responsive UI with theme support.
• ♿ Implemented comprehensive accessibility features.
• ⚡ Optimized performance across all devices.
• 🧪 Added comprehensive testing with Vitest.
• 🌐 Integrated i18n for multi-language support.
• 🛠️ Configured PWA for offline use.
• 🐶 Set up Husky for pre-commit linting and formatting.
• 🧹 Used BiomeJS for fast and efficient code formatting.
• 📦 Added Pinia persistence for theme storage.
• 🖼️ Optimized SVG handling with SVG Loader.
• 📊 Analyzed bundle size with Rollup and Vite visualizers.

🏃‍♂️ Running the Project

To run ColorSanity locally, follow these steps:

1. 📥 Clone the repository to your local machine:

   git clone https://github.com/yourusername/color-sanity.git
   cd color-sanity
   

2. 📦 Install dependencies:

   npm install
   # or
   yarn
   

3. 🚀 Run the development server:

   npm run dev
   # or
   yarn dev
   

4. 🌐 Open http://localhost:3000 in your browser.

🛠️ Advanced Configuration

• PWA Setup: The project is configured as a Progressive Web App (PWA) for offline use and installability.
• i18n Language Support: Multi-language support is integrated using Vue I18n.
• Vitest Testing: Comprehensive testing is set up with Vitest for robust code quality.
• Husky & Commitlint: Pre-commit hooks ensure code quality and consistent commit messages.
• BiomeJS: Fast and efficient code formatting and linting.
• Vite Inspect Plugin: Debug and inspect Vite plugins during development.
• Rollup & Vite Visualizers: Analyze bundle size and performance.
• Vite Compression: Optimized assets with compression for better performance.

📸 Screenshots

📄 License

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

💖 Created with ❤️ by Manjunath R

Feel free to contribute to the project or provide feedback. Your support is greatly appreciated!

ColorSanity is your go-to tool for all things color. Whether you're a designer, developer, or creative, ColorSanity empowers you to create stunning designs with ease. 🌈✨