generate-palette

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.