Overview
Color Scheme Generator is a web application that allows users to generate harmonious color palettes based on a selected base color. It integrates with the Color API to provide various harmony options and offers instant copying of color codes. The project emphasizes clean design, interactivity, and responsive layouts within Web Development.
Live: color-scheme-generator.ashwin.co.in
Source code: Explore Repo
Goals & Problems Solved
- Provide an easy way to generate harmonious color schemes for developers and designers.
- Integrate with an external API for real-time color harmony generation.
- Offer a simple interface with instant preview of results.
- Enable one-click copying of color codes to streamline workflow.
- Ensure responsive design for usability across devices.
Architecture & Tech Stack
| Layer | Technology / Library | Purpose |
|---|---|---|
| Frontend | HTML, CSS, JavaScript | Structure, styling, and interactivity |
| API | Color API | Generate color schemes and harmony modes |
| Hosting | Vercel | Deployment and live hosting |
Key Features & UX Flow
-
Color Selection
- Choose base color with an interactive color picker.
-
Color Harmony Generation
- Supports multiple modes: Monochrome, Complement, Analogic, Triad, etc.
-
Preview & Copy
- Real-time preview of schemes with one-click copy functionality.
-
Responsive Design
- Optimized for desktop and mobile displays.
Code Walkthrough & Notable Modules
- index.html: Main entry point with input fields and color picker.
- styles.css: Provides layout, responsive design, and hover animations.
- script.js: Handles API requests, DOM updates, and copy-to-clipboard logic.
- assets/screenshots/: Contains project visuals for documentation.
UI / Responsiveness & Design Decisions
- Clean and modern interface to showcase generated palettes.
- Responsive grid layout adapts to varying screen sizes.
- Hover states and subtle animations improve interactivity.
Challenges & Learnings
- Working with external APIs and managing dynamic updates.
- Designing an interface that balances simplicity with functionality.
- Handling edge cases such as invalid input or API errors.
Future Improvements
- Save and export palettes in multiple formats (CSS, JSON, SCSS).
- User accounts for storing favorite palettes.
- Accessibility features such as color contrast checking.
- Social sharing of palettes.
Screens & Visuals
Landing Page
Selecting a Shade
Color Select
Mode Select
Generated Results
