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

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.

color-palette-extractor

Color Palette Extractor

Instructions