
Generate Palette
Generate professional SVG color palettes from themes, URLs, or hex codes
What You Can Do
You can generate professionally formatted SVG color palettes by providing a theme name, source URL, or specific hex codes. Claude researches color standards, extracts values from web sources, and organizes 4-7 swatches from dark to light with an anchor brand color at center. Each swatch includes click-to-copy hex codes and hover effects for easy reference.
Features
Automatically fetch and extract colors from URLs, Pantone guides, and design systems using WebFetch and WebSearch
Accept theme descriptions, source URLs, hex codes, or RGB values as palette sources
Arrange 4-7 swatches in logical sequence with anchor/brand color centered
Generate interactive SVG swatches with copyable hex values on click
Add visual feedback and interactive elements for professional presentation
Support 4-7 main swatches plus soft background bar based on user preference
Deliver lightweight, scalable vector format suitable for design tools and web use
Example Output
Example 1: Theme-based palette
Input: Coral Sunset
Output: SVG with 5 swatches:
- #1a1a1a (Deep charcoal)
- #6b4423 (Warm brown)
- #d97548 (Coral primary)
- #f4b5a0 (Soft coral)
- #fce4d8 (Pale blush)
- Soft background: #faf7f3
Example 2: URL-sourced palette
Input: https://brand.example.com/colors
Output: SVG palette extracted from brand guide with 6 official colors, arranged dark-to-light with brand blue as anchor, all swatches labeled with hex codes and copyable on click.
Example 3: Hex codes input
Input: #2c3e50, #3498db, #ecf0f1
Output: SVG palette with 3 provided colors plus interpolated mid-tones to reach 5 total swatches, organized dark-to-light.
What's Included
- SKILL.md: Complete instruction file with research logic, palette structure guidelines, and SVG generation rules
- Color Research Framework: Step-by-step process for fetching colors from URLs, searching standards, and extracting hex values
- Palette Organization Template: Dark-to-light arrangement structure with 5 default swatches (4-7 range) plus anchor color positioning
- SVG Output Checklist: Requirements for click-to-copy functionality, hover effects, and label formatting
- Input Examples: Reference prompts for theme names, URLs, and hex code inputs
Who It's For
- UX/UI designers — Create cohesive color systems and design system documentation
- Brand strategists — Develop and document brand color guidelines for consistency
- Web developers — Generate accessible, copy-friendly color reference sheets for projects
- Marketing teams — Build brand palette assets for internal guidelines and external sharing
- Design system managers — Establish scalable color standards across multi-product organizations
Best For
- Building branded color palettes from theme descriptions or mood boards
- Extracting colors from existing brand guidelines or design specifications
- Creating interactive color reference sheets with hex codes for development handoff
- Organizing custom hex color sets into professional, usable palettes
- Generating accessible color ramps with balanced dark-to-light contrast







