🇺🇸English

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)

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

Weekly Installs

82

Repository

onewave-ai/claude-skills

GitHub Stars

74

First Seen

Jan 24, 2026

Security Audits

Gen Agent Trust HubPassSocketPassSnykWarn

Installed on

opencode70

codex69

gemini-cli67

cursor67

github-copilot64

cline60