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
- Reads the image file using
get-pixels to obtain raw pixel data
- Passes pixel data to
extract-colors to compute dominant colors
- 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.