skills.rest
eryet
eryetCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

generate-palette

Generate interactive SVG color palettes from themes, URLs, or hex values.

Updated Mar 26, 2026
Search Tags:#design#svg#webfetch#generate#palette#color-palette#color-extraction
One-click install
npx skills add https://github.com/eryet/claude-skill-collection --skill generate-palette
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: generate-palette
Source: https://github.com/eryet/claude-skill-collection/tree/main/.claude/skills/generate-palette
Command: npx skills add https://github.com/eryet/claude-skill-collection --skill generate-palette

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers and developers often waste time researching, assembling, and formatting cohesive color palettes for UI and brand work; this Skill automates extracting or creating a 4–7 swatch palette and produces a ready-to-use interactive SVG reference with click-to-copy hex codes and accessible labels.

Core Features & Use Cases

  • Input flexibility: Accepts a theme description, a source URL to extract official color specs, or explicit hex color values.
  • Automated research & extraction: Uses WebFetch/WebSearch to find authoritative color values and converts them into a cohesive palette ordered dark-to-light.
  • Deterministic SVG output: Calculates layout, generates a 960×520 interactive SVG with swatches, gradient bar, soft background bar, copy-to-clipboard clicks, hover effects, and accessibility labels.
  • Use Cases: Create brand palette sheets from a company style guide URL, generate quick theme palettes for UI mockups, or convert designer-provided hex lists into developer-friendly assets.

Quick Start

Generate a five-swatch interactive SVG color palette from the theme "Ocean Blue" with click-to-copy hexes and save it as design/ocean-blue-palette.svg.

Frequently Asked Questions about generate-palette

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate an interactive SVG color palette from a theme description?▼

To generate an interactive SVG color palette from a theme description, you provide the theme text and the tool outputs a 960×520 SVG with 4–7 swatches, hover effects, and click-to-copy hex codes saved to the design directory.

Can I extract an official color palette from a website URL?▼

Yes, you can extract an official color palette from a website URL by providing the source link; the tool fetches authoritative color values and converts them into a cohesive ordered SVG swatch sheet.

How do I convert explicit hex color values into a developer-friendly SVG reference?▼

You convert explicit hex color values into a developer-friendly SVG reference by inputting the hex codes directly, which generates a 960×520 SVG file with accessible labels and click-to-copy functionality.

Does the generated SVG palette include accessibility metadata and copy-to-clipboard behavior?▼

Yes, the generated SVG palette includes accessibility metadata and inline copy-to-clipboard behavior, ensuring readable labels and interactive hex code copying directly within the 960×520 output file.

What is the maximum number of swatches allowed in a generated SVG color palette?▼

The maximum number of swatches allowed in a generated SVG color palette is seven, producing a brand and UI reference sheet ordered dark-to-light with a gradient bar and soft background.

Related Skills

Explore More Design & Creative Skills→
Young-ZYoung-Z
8

x-ipe-tool-brand-theme-creator

Generate X-IPE theme packages with tokens and visual previews from brand inputs.

Community
Advanced
haojing8312haojing8312
154

color-font-skill

Generate presentation-ready color palettes and font pairings with hex codes.

Community
Basic
anderskevanderskev
75

tailwind-v4

Configure Tailwind CSS v4 themes using @theme directives and OKLCH colors.

Community
Advanced
rawerawe

firstspirit-fs-cli

Automate FirstSpirit template export, modification, and re-import via fs-cli workflows.

Community
Advanced