Project Overview
Color Craft is a web-based tool designed to simplify the process of discovering and creating harmonious color schemes. By leveraging the power of Google's Gemini, the application allows users to generate unique color palettes and accompanying design briefs based on simple keyword prompts. This project was developed to provide a seamless and intuitive solution for designers, developers, and artists seeking creative inspiration.
The Problem
Traditional color palette tools often require users to manually select and adjust colors, which can be time-consuming and challenging for those who aren't trained in color theory. The goal was to build a tool that could democratize this process, making it accessible to anyone. The core challenge was to create an intelligent system that could interpret a keyword and translate it into a visually appealing, contextually relevant color palette.
The Solution
I built a single-page React application that integrates with Gemini API. The application prompts the user for a keyword and then creates nuanced and thematic palettes, moving beyond simple, random generation.
Key Features
1. Keyword-based Generation
Users can type a single word, such as "ocean" or "sunset," to receive a set of related color palettes.
Users can type a single word, such as "ocean" or "sunset," to receive a set of related color palettes.
2. Integrated Design Briefs
Each generated palette includes an automatically generated micro case study or design brief, explaining the rationale behind the colors. This adds significant value by providing creative context and inspiration.
Each generated palette includes an automatically generated micro case study or design brief, explaining the rationale behind the colors. This adds significant value by providing creative context and inspiration.
3. Copy to Clipboard
A simple click on any color hex code copies it to the clipboard for easy use in other design software.
A simple click on any color hex code copies it to the clipboard for easy use in other design software.
4. Responsive Design
The application is fully responsive, providing a clean and functional interface on both mobile and desktop devices.
The application is fully responsive, providing a clean and functional interface on both mobile and desktop devices.
5. Robust API Handling
The code includes error handling and retry logic to ensure a smooth user experience even if the API call faces temporary issues.
The code includes error handling and retry logic to ensure a smooth user experience even if the API call faces temporary issues.
Technical Stack
1. Frontend: React (functional components, hooks)
2. Styling: Tailwind CSS for rapid, responsive UI development
3. API: Gemini API for intelligent text and color generation
2. Styling: Tailwind CSS for rapid, responsive UI development
3. API: Gemini API for intelligent text and color generation