color-palette-extractor

name	color-palette-extractor
description	Extract color palettes from images, websites, or designs. Identifies dominant colors, generates complementary schemes, and exports in multiple formats (HEX, RGB, HSL, Tailwind, CSS variables). Use when users need color schemes from images, brand colors, or design system palettes.

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;
   : ;
   : ;
   

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.