About

Imported from terminalskills/skills (skills/image-analysis/SKILL.md). Install upstream with npx skills add terminalskills/skills --skill image-analysis. Copyright stays with the author (MIT).

Image Analysis — Color Extraction

Name: image-analysis
Author: terminalskills

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

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

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.

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml

targets:
  - https://api.opensmartroute.ai/api/v1/registry/terminalskills-skills-image-analysis/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

terminalskills-skills-image-analysis.ocm.jsonjson

{
  "ocm": "1",
  "id": "terminalskills-skills-image-analysis",
  "kind": "skill",
  "name": "image-analysis",
  "description": "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.",
  "publisher": "terminalskills",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "general"
    ],
    "tags": [
      "skill-md",
      "image-analysis",
      "color-palette",
      "design",
      "visual",
      "claude",
      "skills-sh"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "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."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "skills.sh",
      "repository": "https://github.com/terminalskills/skills",
      "path": "skills/image-analysis/SKILL.md",
      "ref": "HEAD",
      "url": "https://github.com/terminalskills/skills/blob/HEAD/skills/image-analysis/SKILL.md",
      "key": "terminalskills/skills/skills/image-analysis/SKILL.md"
    },
    "compatibility": "Node.js 18+",
    "license": "MIT"
  },
  "instructions": "# Image Analysis — Color Extraction\n\n## Overview\n\nExtract 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.\n\n- The user provides a screenshot or design image and wants to implement it\n- The user asks to extract or identify colors from an image\n- The user wants a color palette from a photo or mockup\n- The user wants to match their code's colors to a reference image\n\n## Instructions\n\n1. Reads the image file using `get-pixels` to obtain raw pixel data\n2. Passes pixel ",
  "cost": {
    "context_tokens": 661
  }
}

Fetch it by URL: GET /api/v1/registry/terminalskills-skills-image-analysis/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.