Analyze images to extract colors, composition, mood, and visual elements using Vision AI. Use when: extracting color palettes from images, analyzing design screenshots, understanding visual style of reference images.
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.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).
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
bash <skill-path>/scripts/extract-colors.sh ~/Downloads/figma-design.jpg
Use the extracted hex values to populate a Tailwind theme.extend.colors config: