Color Palette Extractor

Pulls color palettes from images, websites, or screenshots and exports them in whatever format you need: HEX, RGB, HSL, Tailwind config, CSS variables, even iOS and Android formats. It does K-means clustering to find dominant colors, generates full shade scales (50-900), and checks WCAG contrast ratios so you know if your text will actually be readable. The color harmony analysis is handy when you need complementary or triadic schemes. Honestly most useful when you're reverse engineering a design you like or need to quickly build a design system from a brand asset. Beats manually eyedropping colors and doing contrast math yourself.

skills.sh installs: 649
GitHub stars: 422
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add onewave-ai/claude-skills --skill color-palette-extractor --agent claude-code

Installs into .claude/skills of the current project.

Files

Color Palette Extractor

Extract and generate accessible color palettes from images, websites, and designs.

references/output-template.md — full report structure for presenting a palette
references/export-formats.md — CSS, Tailwind, SCSS, JSON, iOS, Android snippets
references/color-theory.md — harmony schemes, accessibility, extraction best practices

Workflow

Identify the source: image file (PNG, JPG, SVG), website URL, screenshot, design mockup, or an existing color code to build from.
Extract colors.
- From an image: analyze pixel data, identify dominant colors, group similar shades, calculate frequency, and sort by prominence.
- From a website: fetch and parse the CSS, extract color values, and identify brand, accent, text, and background colors.
- Cluster with K-means; extract 5-10 dominant colors. Ignore near-white and near-black unless significant.
Build the primary palette (5-10 colors): most dominant color, 2-3 supporting colors, 1-2 accents, a background, and a text color. Generate an extended palette with tints, shades, tones, and 50-950 numeric scales. See references/color-theory.md.