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.
- 🎨 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.
- ⚡ 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.
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.
To run ColorSanity locally, follow these steps:
-
📥 Clone the repository to your local machine:
git clone https://github.com/yourusername/color-sanity.git cd color-sanity -
📦 Install dependencies:
npm install # or yarn -
🚀 Run the development server:
npm run dev # or yarn dev -
🌐 Open http://localhost:3000 in your browser.
- 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.
This project is licensed under the MIT License - see the LICENSE file for details.
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. 🌈✨