Color Palette Extractor

Extract and generate color palettes from images, websites, and designs.

Instructions

When a user needs to extract colors from a source:

1. Identify Source Type:

   • Image file (PNG, JPG, SVG)
   • Website URL
   • Screenshot
   • Design mockup
   • Existing color code to build palette from

2. Extract Colors:

   From Image:

   • Analyze pixel data
   • Identify dominant colors
   • Group similar shades
   • Calculate color frequency
   • Sort by prominence

   From Website:

   • Fetch and parse CSS
   • Extract color values from stylesheets
   • Identify brand colors
   • Find accent colors
   • Detect text/background colors

   Color Clustering:

   • Use K-means clustering
   • Group similar colors
   • Typically extract 5-10 dominant colors
   • Ignore near-white/near-black unless significant

3. Generate Color Palette:

   Primary Palette (5-10 colors):

   • Most dominant color
   • 2-3 supporting colors
   • 1-2 accent colors
   • Background color
   • Text color

   Extended Palette:

   • Light and dark variations
   • Tints (add white)
   • Shades (add black)
   • Tones (add gray)
   • Generate 50, 100, 200...900 scales

4. Color Harmony Analysis:

   Generate complementary schemes:

   • Monochromatic: Variations of single hue
   • Analogous: Adjacent colors on wheel
   • Complementary: Opposite colors
   • Triadic: Three evenly spaced colors
   • Split-complementary: Base + two adjacent to complement
   • Tetradic: Four colors (two complementary pairs)

5. Format Output:

   🎨 COLOR PALETTE EXTRACTOR
   
   Source: [Image/Website URL]
   
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   🎯 PRIMARY PALETTE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   
   1. Primary Color
      HEX: #3B82F6
      RGB: rgb(59, 130, 246)
      HSL: hsl(217, 91%, 60%)
      Usage: Main brand color, primary buttons, links
      Prominence: 32%
   
   2. Secondary Color
      HEX: #8B5CF6
      RGB: rgb(139, 92, 246)
      HSL: hsl(258, 90%, 66%)
      Usage: Accent elements, hover states
      Prominence: 18%
   
   3. Background
      HEX: #F8FAFC
      RGB: rgb(248, 250, 252)
      HSL: hsl(210, 40%, 98%)
      Usage: Page background, cards
      Prominence: 25%
   
   4. Text Primary
      HEX: #1E293B
      RGB: rgb(30, 41, 59)
      HSL: hsl(217, 33%, 17%)
      Usage: Body text, headings
      Prominence: 15%
   
   5. Accent
      HEX: #10B981
      RGB: rgb(16, 185, 129)
      HSL: hsl(158, 84%, 39%)
      Usage: Success states, CTAs
      Prominence: 10%
   
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   🌈 COLOR SCALE (Tailwind-style)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   
   Primary:
     50:  #EFF6FF  [lightest]
     100: #DBEAFE
     200: #BFDBFE
     300: #93C5FD
     400: #60A5FA
     500: #3B82F6  [base]
     600: #2563EB
     700: #1D4ED8
     800: #1E40AF
     900: #1E3A8A  [darkest]
     950: #172554
   
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   🎭 COLOR HARMONY SCHEMES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   
   Complementary:
     Base: #3B82F6 (blue)
     Complement: #F6823B (orange)
   
   Analogous:
     #3B82F6 (blue)
     #3BF6D9 (cyan)
     #823BF6 (purple)
   
   Triadic:
     #3B82F6 (blue)
     #F6823B (orange)
     #82F63B (green)
   
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   💻 EXPORT FORMATS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   
   CSS Variables:
   ```css
   :root {
     --color-primary: #3B82F6;
     --color-secondary: #8B5CF6;
     --color-background: #F8FAFC;
     --color-text: #1E293B;
     --color-accent: #10B981;
   }
   

   Tailwind Config:

   module.exports = {
     theme: {
       extend: {
         colors: {
           primary: {
             50: '#EFF6FF',
             500: '#3B82F6',
             900: '#1E3A8A',
           },
         }
       }
     }
   }
   

   SCSS Variables:

   $primary: #3B82F6;
   $secondary: #8B5CF6;
   $background: #F8FAFC;
   $text: #1E293B;
   $accent: #10B981;
   

   JSON:

   {
     "primary": "#3B82F6",
     "secondary": "#8B5CF6",
     "background": "#F8FAFC",
     "text": "#1E293B",
     "accent": "#10B981"
   }
   

   Android XML:

   <color name="primary">#3B82F6</color>
   <color name="secondary">#8B5CF6</color>
   

   iOS Swift:

   extension UIColor {
     static let primary = UIColor(hex: "3B82F6")
     static let secondary = UIColor(hex: "8B5CF6")
   }
   

   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ♿ ACCESSIBILITY CHECKS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

   Contrast Ratios (WCAG 2.1):

   Text on Background: #1E293B on #F8FAFC: 14.2:1 ✅ AAA (excellent)

   Primary on Background: #3B82F6 on #F8FAFC: 4.8:1 ✅ AA (good)

   White text on Primary: #FFFFFF on #3B82F6: 4.6:1 ✅ AA (good)

   Accent on Background: #10B981 on #F8FAFC: 3.2:1 ⚠️ AA Large text only

   Recommendations: • Use darker shade of accent for small text • Primary button text should be white (#FFFFFF) • Consider #047857 for better contrast

   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 💡 COLOR PSYCHOLOGY ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

   Blue (#3B82F6): • Trust, professionalism, calm • Common for: Tech, finance, healthcare

   Purple (#8B5CF6): • Creativity, luxury, wisdom • Common for: Creative services, premium brands

   Green (#10B981): • Growth, success, health • Common for: Environmental, finance, wellness

   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🎨 DESIGN SYSTEM INTEGRATION ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

   Suggested Usage: • Primary: Main CTAs, links, active states • Secondary: Secondary buttons, highlights • Background: Page/card backgrounds • Text: Body copy, headings • Accent: Success messages, highlights

   Color Roles: • Success: #10B981 (green accent) • Warning: #F59E0B (generate from palette) • Error: #EF4444 (generate complement) • Info: #3B82F6 (primary blue)

6. Advanced Features:

   Color Blindness Simulation:

   • Test palette for:
     • Protanopia (red-blind)
     • Deuteranopia (green-blind)
     • Tritanopia (blue-blind)
   • Suggest adjustments for accessibility

   Mood Board:

   • Generate color combinations
   • Show usage examples
   • Create gradient options

   Brand Matching:

   • Compare to existing brand colors
   • Find closest brand matches
   • Suggest similar palettes

Example Triggers

• "Extract colors from this screenshot"
• "Get color palette from this website"
• "Generate a color scheme from this image"
• "Create Tailwind config from these colors"
• "Find dominant colors in this logo"
• "Build a palette from this hex code"

Best Practices

Color Extraction:

• Filter out near-white/black unless prominent
• Group similar colors (within 10% similarity)
• Weight by visual importance (not just frequency)
• Consider color psychology

Palette Generation:

• Maintain color harmony
• Ensure sufficient contrast
• Generate semantic names (primary, accent, etc.)
• Provide light and dark variations

Accessibility:

• Check WCAG contrast ratios
• Test with color blindness simulation
• Recommend accessible alternatives
• Ensure text readability

Export Formats:

• Support common formats (CSS, Tailwind, iOS, Android)
• Include usage guidelines
• Provide example implementations

Output Quality

Ensure palettes:

• Have clear dominant colors
• Include sufficient variations
• Pass accessibility checks
• Come with usage guidelines
• Export in multiple formats
• Include color psychology notes
• Show harmony schemes
• Provide contrast ratios
• Work for color-blind users
• Have semantic naming

Generate professional, accessible color palettes ready for immediate use in design systems.