color-palette-extractor

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

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

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

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

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

```js

module.exports = {

theme: {

extend: {

colors: {

primary: {

50: '#EFF6FF',

500: '#3B82F6',

900: '#1E3A8A',

},

}

}

}

}

```

SCSS Variables:

```scss

$primary: #3B82F6;

$secondary: #8B5CF6;

$background: #F8FAFC;

$text: #1E293B;

$accent: #10B981;

```

JSON:

```json

{

"primary": "#3B82F6",

"secondary": "#8B5CF6",

"background": "#F8FAFC",

"text": "#1E293B",

"accent": "#10B981"

}

```

Android XML:

```xml

#3B82F6

#8B5CF6

```

iOS Swift:

```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

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

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

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.