Technical Specification: Free Online Color Palette Extractor

Overview

A high-performance, browser-based utility that extracts dominant color palettes from uploaded images using the ColorThief algorithm. Designed for professional designers and developers needing quick inspiration or brand color matching.

Core Features

• Drag-and-Drop Uploader: Robust input area with visual feedback on hover/drag.
• Instant Extraction: Real-time analysis of uploaded images to generate a 5-10 color palette.
• Multi-Format Output: Display of HEX, RGB, and HSL codes for every color.
• Quick Copy: One-click "Copy to Clipboard" functionality for every swatch.
• CSS/Tailwind Export: A feature to generate a ready-to-use JSON/CSS snippet based on the extracted palette.
• Image Preview: A clean display area showing the original image next to its palette.

UI/UX Design Specifications

• Aesthetic: Modern SaaS-style. Clean white background (#FFFFFF), soft light-gray cards (#F9FAFB), and subtle shadow depth (box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1)).
• Typography: Clean, sans-serif font stack (Inter or System UI) for maximum readability.
• Color Palette (UI):
  • Primary Action Color: Indigo-600 (#4F46E5)
  • Text: Neutral-900 (#111827)
  • Secondary Text: Neutral-500 (#6B7280)
  • Surface: White (#FFFFFF)
• Animations:
  • Smooth fading transitions when switching between image upload and result view.
  • Micro-interactions on buttons (scale down on click, shadow lift on hover).

Technical Implementation Constraints

• Architecture: MUST be a single HTML file. Include Tailwind CSS via CDN for styling and color-thief via CDN for processing.
• State Management: Use standard JavaScript variables to hold palette state. NO localStorage, sessionStorage, or cookies. This app must function in a restricted iframe.
• Browser Compatibility: Ensure the Canvas API usage is handled safely, as cross-origin images might taint the canvas. Use crossOrigin = "Anonymous" for the image element.
• Responsiveness:
  • Mobile: Palette swatches should stack vertically.
  • Tablet/Desktop: Palette swatches arranged in a responsive flex or grid layout.
• Interaction: If no file is provided, prompt with a visually appealing call-to-action (custom modal, NOT browser alert) to upload an image.