// Extract color palettes from images (screenshots, Figma exports, design mockups) to help implement matching UI. Use when the user shares a screenshot, design image, or asks to "match these colors", "extract colors from this image", "implement this design", or "get the color palette".
Multi-model agent orchestration using specialized agents for planning, coding, research, math/science, visual analysis, and adversarial review. Use when tasks are complex enough to benefit from different models' strengths, when you want adversarial review to catch blind spots, or when coordinating multi-step workflows across agent roles. Triggers on complex projects, multi-step tasks, architecture decisions, or when explicitly requested.
Web design reference for building production-grade interfaces. Covers layout, typography, color, spacing, shadows, animation, accessibility, responsive design, components, performance, and UX psychology. Use when building UI, reviewing design quality, choosing design tokens, or making any visual design decision.
Check color contrast ratios against WCAG AA and AAA accessibility standards. Use when the user wants to verify if their color combinations are accessible, check contrast between text and background colors, or audit a palette for accessibility.
Compare two images pixel-by-pixel and get a visual diff. Use when the user wants to compare their implementation against a design, spot differences between two screenshots, or verify visual regression.
Extract text from images using OCR. Use when the user shares a screenshot and you need to read the text content, copy UI labels, or extract copy from a design mockup.
| name | image-analysis |
| description | Extract color palettes from images (screenshots, Figma exports, design mockups) to help implement matching UI. Use when the user shares a screenshot, design image, or asks to "match these colors", "extract colors from this image", "implement this design", or "get the color palette". |
| metadata | {"author":"pascalorg","version":"1.0.0"} |
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.
get-pixels to obtain raw pixel dataextract-colors to compute dominant colorsRun 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
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) |
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:
The script auto-installs dependencies (extract-colors, get-pixels) on first run. If this fails, install them manually:
cd <skill-path>/scripts && npm install
The underlying get-pixels library supports PNG, JPG, GIF, and BMP. For other formats, convert the image first.
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.