Color Palette Generator
A Claude Code skill that generates color palettes from text descriptions, mood references, or images. Outputs a self-contained HTML file with swatches, HEX/RGB/HSL codes, WCAG contrast ratios, and example pairings.
What it does
Type /color-palette-generator with a description, mood, image, or single hex code. The skill generates a harmonious 8–12 color palette as a self-contained .html file — open it in any browser to see swatches, codes, contrast ratios, and example pairings.
The HTML itself uses the generated palette for its own styling, so you see how the colors work together immediately.
Install
Claude Desktop:
- Open Customize → Browse plugins
- Click + → Add marketplace from GitHub
- Enter
AlpacaLabsLLC/skills-for-architects - Install the Presentations plugin
Claude Code (terminal):
claude install github:AlpacaLabsLLC/skills-for-architects/06-presentationsUsage
From a description:
/color-palette-generator mid-century modern furniture museum in Marfa, TexasFrom an image:
/color-palette-generator [drag in a photo or screenshot]From a single color:
/color-palette-generator build a palette from #2D5A3DFrom a brand reference:
/color-palette-generator Aesop meets Ace HotelOutput
Each color includes:
- Descriptive name (e.g., “Warm Linen” not just “Beige”)
- HEX, RGB, and HSL values
- Suggested use (background, text, accent, etc.)
- WCAG contrast ratios for key pairings
Colors are organized into four groups: Primary, Secondary, Neutral, and Accent.
Sample: “Marfa Modern”
Generated from the prompt: mid-century modern furniture museum in Marfa, Texas
Primary
| Color | HEX | Use |
|---|---|---|
| Judd Concrete | #8C8378 | Headings, primary buttons, key accents |
| Burnt Adobe | #B5603A | Secondary headings, active states, warm highlights |
| Mesquite | #7A5C3E | Callouts, illustrations, decorative elements |
Secondary
| Color | HEX | Use |
|---|---|---|
| High Desert Sky | #6B8FA3 | Success states, cool accents, secondary buttons |
| Presidio Sage | #8B9678 | Nature accents, subtle borders, metadata |
| Bleached Rawhide | #C4B49A | Disabled states, placeholders, secondary backgrounds |
Neutral
| Color | HEX | Use |
|---|---|---|
| Gallery White | #F7F5F0 | Page background, card backgrounds |
| Raw Plaster | #EAE4DA | Secondary surfaces, hover states, subtle cards |
| West Texas Night | #2E2A26 | Primary body text, dark UI elements |
Accent
| Color | HEX | Use |
|---|---|---|
| Neon Marfa | #E85D3A | CTAs, notifications, emphasis highlights |
| Chinati Blue | #3D6B7E | Links, interactive elements, info states |
All pairings are tested for WCAG AA contrast compliance — body text on background achieves 12.1:1, headings on background achieve 5.8:1.