Image Analysis — Color Extraction

Overview

Extract dominant colors from any image file (PNG, JPG, WebP, BMP, GIF) and return a structured palette. Useful for implementing UIs that match a screenshot, Figma export, or design mockup.

• The user provides a screenshot or design image and wants to implement it
• The user asks to extract or identify colors from an image
• The user wants a color palette from a photo or mockup
• The user wants to match their code's colors to a reference image

Instructions

1. Reads the image file using

   get-pixels

   to obtain raw pixel data
2. Passes pixel data to

   extract-colors

   to compute dominant colors
3. Returns a sorted palette (by area/prominence) with hex, RGB, HSL values, and area coverage

Run the extraction script, passing the image path as the first argument:

bash <skill-path>/scripts/extract-colors.sh /path/to/image.png

Arguments:

• $1

  — Path to the image file (required). Supports PNG, JPG, WebP, BMP, GIF.

The script outputs a JSON array of colors sorted by prominence:

[
  {
    "hex": "#1a1a2e",
    "red": 26, "green": 26, "blue": 46,
    "hue": 0.6667, "saturation": 0.2778, "lightness": 0.1412,
    "area": 0.3241
  }
]

After extracting colors, present them as a structured palette and suggest how to use them (CSS custom properties, Tailwind config theme colors, design token definitions, or direct usage in component styles).

Examples

Example 1: Extract colors from a landing page screenshot

bash <skill-path>/scripts/extract-colors.sh ./screenshot.png

Output:

Color Palette (sorted by prominence):

1. #1a1a2e — 32.4% (dark navy) — Primary background
2. #e94560 — 18.6% (coral red) — Accent color
3. #f5f5f5 — 15.2% (light gray) — Secondary background

Example 2: Extract colors from a Figma export for Tailwind config

bash <skill-path>/scripts/extract-colors.sh ~/Downloads/figma-design.jpg

Use the extracted hex values to populate a Tailwind

theme.extend.colors

config:

colors: {
  primary: '#1a1a2e',
  accent: '#e94560',
  surface: '#f5f5f5',
}

Guidelines

• The script auto-installs dependencies (

  extract-colors

  ,

  get-pixels

  ) on first run. If this fails, install them manually with

  cd <skill-path>/scripts && npm install

  .
• Supported formats: PNG, JPG, GIF, BMP. For other formats, convert the image first.
• The

  extract-colors

  library automatically downsamples to 64,000 pixels by default, so large images are already handled efficiently.
• Pair with the

  contrast-check

  skill to verify that extracted color combinations meet WCAG accessibility standards.