color-palette-extractor
Extract color palettes from images, websites, or designs. Identifies dominant colors, generates complementary schemes, and exports in multiple formats (HEX, RGB, HSL, Tailwind, CSS variables). Use when users need color schemes from images, brand colors, or design system palettes.
- Installs
- 609
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/onewave-ai/claude-skills --skill color-palette-extractor- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads color-palette-extractor automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
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"
FAQ
What does the color-palette-extractor skill do?
Extract color palettes from images, websites, or designs. Identifies dominant colors, generates complementary schemes, and exports in multiple formats (HEX, RGB, HSL, Tailwind, CSS variables). Use when users need color schemes from images, brand colors, or design system palettes.
How do I install color-palette-extractor?
Run npx skills add https://github.com/onewave-ai/claude-skills --skill color-palette-extractor in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/color-palette-extractor/ (personal) or .claude/skills/color-palette-extractor/ (project).
Which AI agents can use color-palette-extractor?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is color-palette-extractor safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains color-palette-extractor?
It is published by onewave-ai in onewave-ai/claude-skills. It has 609 recorded installs.
More from onewave-ai/claude-skills
landing-page-copywriter
onewave-ai/claude-skills
Writes conversion-focused landing page copy - headlines, subheads, value propositions, feature and benefit blocks, social proof, FAQs, and CTA button text - using PAS, AIDA, or StoryBrand. Use when the user wants words for a landing page, sales page, product or pricing page, waitlist page, homepage hero, or ad-to-page flow, including rewriting weak copy, generating headline or CTA variants for A/B tests, or turning a product description into page sections. Use landing-page-optimizer instead for auditing an existing page's performance, and a frontend skill for building the page itself.
code-review-pro
onewave-ai/claude-skills
Performs a deep code review of files, modules, a diff, or a branch - finding security vulnerabilities (mapped to OWASP Top 10:2025), correctness bugs, performance problems, and maintainability issues - and returns severity-ranked findings with evidence and concrete fixes. Use when the user asks to review, audit, or sanity-check code, asks "is this safe", "what's wrong with this", "find bugs", or wants a security or performance pass before shipping. For posting line comments on a GitHub pull request, use git-pr-reviewer.
screenshot-to-code
onewave-ai/claude-skills
Turns a screenshot, mockup, Figma export, or photo of a UI into working front-end code - React + Tailwind CSS v4 by default, or Next.js, Vue, or plain HTML/CSS - matching layout, spacing, colors, and typography, then renders the result and compares it against the image to close visual gaps. Use whenever the user shares an image of a website, app screen, dashboard, component, or wireframe and wants it built, cloned, recreated, or "made real", or says "code this up", "build this design", or "match this screenshot".
csv-excel-merger
onewave-ai/claude-skills
Merges, appends, joins, and deduplicates multiple CSV, TSV, and Excel files (including multi-sheet workbooks) with pandas - mapping mismatched column names to one schema, normalizing keys, resolving conflicting values, tracking which file each row came from, and verifying the row math. Use when the user wants to combine spreadsheets or exports, stack monthly files, consolidate contact or lead lists, VLOOKUP-style join two sheets on an ID or email, or dedupe records across sources, even if they only say "put these together" or "clean up these lists into one".
technical-writer
onewave-ai/claude-skills
Writes and restructures technical documentation - READMEs, tutorials, how-to guides, user guides, architecture docs, onboarding guides, runbooks and SOPs, troubleshooting guides, release notes, and knowledge base articles - grounded in the actual code or product, with commands and examples verified where possible. Use when the user asks to document a project, feature, system, or process, write or fix a README, explain a codebase to new developers, turn notes into a guide, or make existing docs clearer. For endpoint-by-endpoint API reference or OpenAPI specs, use api-documentation-writer; for CLAUDE.md or AGENTS.md files, use claude-md-writer.
sports-betting-analyzer
onewave-ai/claude-skills
Analyze spreads, over/unders, prop bets. Historical trends, situational stats, value bet identification. For entertainment/education only.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.