AI-Powered Color Palette Generator

How we built it

• Frontend: React + TypeScript, Vite for lightning-fast development
  
• Styling: Tailwind CSS with custom design tokens for colors, typography, and spacing
  
• AI Integration: Calls out to a hosted AI palette-generation API (stubbed for prototype)
  
• Image Extraction: Canvas-based color sampling module, wrapped in a React hook
  
• Accessibility Tools: Contrast-ratio logic using wcag-contrast and color-blindness simulation with color-blind JS library
  
• State Management: LocalStorage for theme and recently-viewed palettes
  
• Deployment Stub: Minimal netlify.toml so one-click deploy scaffolding is in place
  

Challenges we ran into

• Consistent Color Harmony: Tuning AI prompts to produce visually pleasing schemes across diverse keywords
  
• Image Extraction Accuracy: Balancing sample count and performance when extracting colors from large images
  
• Accessibility Calculations: Ensuring WCAG contrast logic handled dynamic palette changes in real time
  
• Responsive Design: Crafting a layout that looked great on mobile, tablet, and desktop without heavy media-query bloat
  
• Rapid Prototyping: Building a polished UI while keeping dependencies to a minimum for bolt.one-shot
  

Accomplishments that we're proud of

• Seamless Theme Persistence: Dark/light mode toggles instantly and “sticks” via LocalStorage
  
• Interactive Palette Editor: Real-time contrast feedback and color-blind simulation integrated into the UI
  
• Clean Design System: Fully documented tokens, spacing, and typography in a live Design System page
  
• Sub-Second AI Responses: Mocked API calls return example palettes in under 200 ms for demo purposes
  

What we learned

• Best practices for client-side accessibility tooling (contrast ratio & simulation)
  
• Strategies for one-shot prototyping with minimal infra distractions
  
• BOLT.new is AMAZING

What’s next for AI-Powered Color Palette Generator

• 🔒 Auth0 integration for user accounts and saved palette sync
  
• 💾 Migrate LocalStorage to NeonDB via Netlify Functions for persistent storage
  
• 🖼️ Add direct Adobe Creative Cloud export (ASE + ACO)
  
• 🌐 Implement real-time trending feed backed by a lightweight backend
  
• 🚀 Build out CI/CD pipeline and deploy production version to Netlify

Built With

• canvas-api
• color-blind
• localstorage
• netlify
• react
• tailwind-css
• typescript
• vite
• wcag-contrast