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: From Website: Color Clustering:
- Analyze pixel data - Identify dominant colors - Group similar shades - Calculate color frequency - Sort by prominence - Fetch and parse CSS - Extract color values from stylesheets - Identify brand colors - Find accent colors - Detect text/background colors - 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): Extended Palette:
- Most dominant color - 2-3 supporting colors - 1-2 accent colors - Background color - Text color - 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: Mood Board: Brand Matching:
- Test palette for: - Protanopia (red-blind) - Deuteranopia (green-blind) - Tritanopia (blue-blind) - Suggest adjustments for accessibility - Generate color combinations - Show usage examples - Create gradient options - 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.