GenPalette
An AI-powered color palette generation and visualization tool that helps developers and designers create, explore, preview, and save cohesive color themes.
Next.js
Tailwind CSS
MongoDBFeatures
- AI-powered tool to generate cohesive and random color palettes using Gemini API.
- Live preview and explore section with AI-generated palettes.
- User dashboard to save and manage favorite palettes and colors.
- Dynamic imports and custom React hooks for optimized performance and clean code.
- Secure authentication with Auth.js and smooth UI animations using Framer Motion.
Problem
Designers and developers often spend significant time experimenting with colors before finding a palette that works well together. Even after creating a palette, evaluating how those colors behave in an actual interface can require additional manual work.
Architecture
GenPalette uses Next.js for the application and frontend layer, with Tailwind CSS providing the styling system. MongoDB is used to persist generated and saved palettes. The application combines AI-assisted generation with interactive client-side controls so users can quickly iterate on different color combinations.
Result
Created a lightweight design utility that combines AI-assisted palette generation with interactive visualization and persistence. Users can move from generating an idea to evaluating and saving a usable palette without switching between multiple design tools.
Learning
This project helped me understand how to integrate AI functionality into a user-facing product while keeping the experience simple and interactive. I also gained experience with persistent user-generated data, dynamic UI updates, and designing interfaces around a visual rather than text-heavy workflow.