Color Choice Modal Demo

Interactive demonstration of the split color choice modal with AI extraction, custom complement colors, and 1-3 color selection

Try the Color Choice Modal

Click the button below to open the modal and experience the split-screen design with new features

Modal Features

🤖 AI Color Extractor

  • • Upload team logos for automatic analysis
  • • Smart color detection with ranking
  • • Select 1-3 colors from extracted palette
  • • Drag & drop or click to select colors
  • • Customizable complement colors

🎨 Manual Color Choice

  • • Full control over color selection
  • • Custom color picker integration
  • • Hover effects with green-teal gradient
  • • Perfect for brand-specific requirements
  • • Closes modal for manual implementation

Design Highlights

• Split-screen modal design with center divider and "OR" badge

• Interactive color selection with drag & drop support

• Built-in color picker for custom complement colors

• Flexible 1-3 color selection with smart validation

• Auto-reset functionality for complement colors

• Dark mode support with proper contrast ratios