Color Palette Extractor Agent Skill

Color Palette Extractor

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

Instructions

When a user needs to extract colors from a source:

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

• 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

• 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

• 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)

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

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

• 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.