Summary
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.
Install to Claude Code
npx -y skills add onewave-ai/claude-skills --skill color-palette-extractor --agent claude-codeInstalls into .claude/skills of the current project.
Notes, actions and memory. Without a meeting bot. First month 100% off.
Download for free →
Keep your Mac awake while Claude Code and 40+ AI agents run. Sleeps when they're idle.
One time payment $9 →
Give your AI agent a complete email layer—sending, inbound inboxes, and sandbox testing.
Get 4K emails/month free →
Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →
Your agent targets a perfect 10 Code Health score. Deterministic. Every commit.
Try For Free →
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →Files
SKILL.md
Color Palette Extractor
Extract and generate accessible color palettes from images, websites, and designs.
Contents
references/output-template.md— full report structure for presenting a palettereferences/export-formats.md— CSS, Tailwind, SCSS, JSON, iOS, Android snippetsreferences/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. -
Run color harmony analysis to produce complementary, analogous, triadic, split-complementary, tetradic, and monochromatic schemes. See
references/color-theory.md. -
Check accessibility: compute WCAG 2.1 contrast ratios for each text/background pairing and test against protanopia, deuteranopia, and tritanopia. Recommend accessible alternatives where a pairing fails. See
references/color-theory.md. -
Format the report following
references/output-template.md, and export to the requested formats usingreferences/export-formats.md.
Output Requirements
Deliver palettes that have clear dominant colors, sufficient variations, semantic naming, harmony schemes, contrast ratios that pass accessibility checks, usage guidelines, and exports in multiple formats. Produce professional, accessible palettes ready for immediate use in design systems.
Example Triggers
- "Extract colors from this screenshot"
- "Get color palette from this website"
- "Generate a color scheme from this image"
- "Create Tailwind config from these colors"
- "Find dominant colors in this logo"
- "Build a palette from this hex code"
Featured
Notes, actions and memory. Without a meeting bot. First month 100% off.
Download for free →Keep your Mac awake while Claude Code and 40+ AI agents run. Sleeps when they're idle.
One time payment $9 →Give your AI agent a complete email layer—sending, inbound inboxes, and sandbox testing.
Get 4K emails/month free →Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →Your agent targets a perfect 10 Code Health score. Deterministic. Every commit.
Try For Free →Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →
