Image Analysis — Color Extraction

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.

When to Use

• 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

How It Works

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

Usage

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.

Examples:

# Extract colors from a screenshot
bash <skill-path>/scripts/extract-colors.sh ./screenshot.png

# Extract colors from a Figma export
bash <skill-path>/scripts/extract-colors.sh ~/Downloads/figma-design.jpg

Output

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
  },
  {
    "hex": "#e94560",
    "red": 233,
    "green": 69,
    "blue": 96,
    "hue": 0.9724,
    "saturation": 0.7928,
    "lightness": 0.5922,
    "area": 0.1856
  }
]

Field	Type	Description
hex	String	Color as hex string (e.g. #1a1a2e)
red	Integer	Red channel (0-255)
green	Integer	Green channel (0-255)
blue	Integer	Blue channel (0-255)
hue	Number	Hue (0-1)
saturation	Number	Saturation (0-1)
lightness	Number	Lightness (0-1)
area	Number	Relative area/prominence (0-1)

Present Results to User

After extracting colors, present them as a structured palette:

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

Then suggest how to use these colors in the user's codebase:

• CSS custom properties / variables
• Tailwind config theme colors
• Design token definitions
• Direct usage in component styles

Troubleshooting

"Cannot find module" errors

The script auto-installs dependencies (extract-colors, get-pixels) on first run. If this fails, install them manually:

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

Unsupported image format

The underlying get-pixels library supports PNG, JPG, GIF, and BMP. For other formats, convert the image first.

Large images are slow

The extract-colors library automatically downsamples to 64,000 pixels by default. For very large images this is already fast, but you can adjust the pixels option in the script if needed.