Color Palette Extractor

Color Palette Extractor

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

Contents

• 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

Workflow

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

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.

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.

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

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.

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

Output Requirements

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"

Color Theory and Analysis

Reference for harmony schemes, accessibility, and advanced palette features.

Harmony Schemes

Generate complementary schemes from the dominant hue:

• Monochromatic: Variations of a single hue (tints, shades, tones)
• Analogous: Adjacent colors on the wheel
• Complementary: Opposite colors on the wheel
• Triadic: Three evenly spaced colors
• Split-complementary: Base plus the two colors adjacent to its complement
• Tetradic: Four colors forming two complementary pairs

Extended Palette

For each primary color, derive:

• Light and dark variations
• Tints (add white)
• Shades (add black)
• Tones (add gray)
• Numeric scales: 50, 100, 200 ... 900, 950

Accessibility

• Check WCAG 2.1 contrast ratios for every text/background pairing.
• Target 4.5:1 for normal text (AA), 3:1 for large text, 7:1 for AAA.
• Test the palette against color blindness types:
• Protanopia (red-blind)
• Deuteranopia (green-blind)
• Tritanopia (blue-blind)
• Recommend accessible alternatives where a pairing fails.

Advanced Features

Mood board: Generate color combinations, usage examples, and gradient options.

Brand matching: Compare against existing brand colors, find closest matches, and suggest similar palettes.

Best Practices

Color extraction:

• Filter out near-white and near-black unless prominent.
• Group similar colors (within roughly 10% similarity).
• Weight by visual importance, not just raw frequency.

Palette generation:

• Maintain color harmony.
• Ensure sufficient contrast.
• Generate semantic names (primary, secondary, accent).
• Provide light and dark variations.

Export:

• Support common formats (CSS, Tailwind, SCSS, JSON, iOS, Android).
• Include usage guidelines and example implementations.

Export Formats

Provide the palette in whichever formats the request calls for. Default to CSS variables and Tailwind config when unspecified.

CSS Variables

:root {
  --color-primary: #3B82F6;
  --color-secondary: #0EA5E9;
  --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: #0EA5E9;
$background: #F8FAFC;
$text: #1E293B;
$accent: #10B981;

JSON

{
  "primary": "#3B82F6",
  "secondary": "#0EA5E9",
  "background": "#F8FAFC",
  "text": "#1E293B",
  "accent": "#10B981"
}

Android XML

<color name="primary">#3B82F6</color>
<color name="secondary">#0EA5E9</color>

iOS Swift

extension UIColor {
  static let primary = UIColor(hex: "3B82F6")
  static let secondary = UIColor(hex: "0EA5E9")
}

Output Template

Use this structure when reporting an extracted palette. Replace bracketed values with real data.

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: #0EA5E9
   RGB: rgb(14, 165, 233)
   HSL: hsl(199, 89%, 48%)
   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)
  #3B3BF6 (indigo)

Triadic:
  #3B82F6 (blue)
  #F6823B (orange)
  #82F63B (green)

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

Cyan (#0EA5E9):
- Clarity, innovation, energy
- Common for: SaaS, communications, modern 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)