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.