git:20251022.14b7f5b to git:20260608.d82d20f

17 added, 312 removed. Audit A to A.

---

name: color-palette-extractor

description: Extract color palettes from images, websites, or designs. Identifies dominant colors, generates complementary schemes, and exports in multiple formats (HEX, RGB, HSL, Tailwind, CSS variables). Use when users need color schemes from images, brand colors, or design system palettes.

---

# 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:

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

- <color name="primary">#3B82F6</color>

- <color name="secondary">#8B5CF6</color>

- ```

- 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

+ Extract and generate accessible color palettes from images, websites, and designs.

- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

- 💡 COLOR PSYCHOLOGY

- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

+ ## Contents

- Blue (#3B82F6):

- • Trust, professionalism, calm

- • Common for: Tech, finance, healthcare

+ - `references/output-template.md` — full report structure for presenting a palette

+ - `references/export-formats.md` — CSS, Tailwind, SCSS, JSON, iOS, Android snippets

+ - `references/color-theory.md` — harmony schemes, accessibility, extraction best practices

- Purple (#8B5CF6):

- • Creativity, luxury, wisdom

- • Common for: Creative services, premium brands

+ ## Workflow

- Green (#10B981):

- • Growth, success, health

- • Common for: Environmental, finance, wellness

+ 1. Identify the source: image file (PNG, JPG, SVG), website URL, screenshot, design mockup, or an existing color code to build from.

- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

- 🎨 DESIGN SYSTEM INTEGRATION

- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

+ 2. Extract colors.

+ - From an image: analyze pixel data, identify dominant colors, group similar shades, calculate frequency, and sort by prominence.

+ - From a website: fetch and parse the CSS, extract color values, and identify brand, accent, text, and background colors.

+ - Cluster with K-means; extract 5-10 dominant colors. Ignore near-white and near-black unless significant.

- Suggested Usage:

- • Primary: Main CTAs, links, active states

- • Secondary: Secondary buttons, highlights

- • Background: Page/card backgrounds

- • Text: Body copy, headings

- • Accent: Success messages, highlights

+ 3. Build the primary palette (5-10 colors): most dominant color, 2-3 supporting colors, 1-2 accents, a background, and a text color. Generate an extended palette with tints, shades, tones, and 50-950 numeric scales. See `references/color-theory.md`.

- Color Roles:

- • Success: #10B981 (green accent)

- • Warning: #F59E0B (generate from palette)

- • Error: #EF4444 (generate complement)

- • Info: #3B82F6 (primary blue)

- ```

+ 4. Run color harmony analysis to produce complementary, analogous, triadic, split-complementary, tetradic, and monochromatic schemes. See `references/color-theory.md`.

- 6. **Advanced Features**:

+ 5. Check accessibility: compute WCAG 2.1 contrast ratios for each text/background pairing and test against protanopia, deuteranopia, and tritanopia. Recommend accessible alternatives where a pairing fails. See `references/color-theory.md`.

- **Color Blindness Simulation**:

- - Test palette for:

- - Protanopia (red-blind)

- - Deuteranopia (green-blind)

- - Tritanopia (blue-blind)

- - Suggest adjustments for accessibility

+ 6. Format the report following `references/output-template.md`, and export to the requested formats using `references/export-formats.md`.

- **Mood Board**:

- - Generate color combinations

- - Show usage examples

- - Create gradient options

+ ## Output Requirements

- **Brand Matching**:

- - Compare to existing brand colors

- - Find closest brand matches

- - Suggest similar palettes

+ Deliver palettes that have clear dominant colors, sufficient variations, semantic naming, harmony schemes, contrast ratios that pass accessibility checks, usage guidelines, and exports in multiple formats. Produce professional, accessible palettes ready for immediate use in design systems.

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