1.  [Home](/)
2.  / [Skills](/skills/)
3.  / Color Palette Generator

Skill Claude Desktop · Claude Code

# /color-palette-generator

Harmonious color palettes from a description, image, or hex code

[Install ↓](#install) [View on GitHub →](https://github.com/AlpacaLabsLLC/skills-for-architects/tree/main/skills/color-palette-generator) [New to skills? →](/articles/claude-code-cheat-sheet) [All skills →](/skills)

[Presentations](/skills?tag=presentations) [Visualization](/skills?tag=visualization)

Color Palette Generator — Sample [Open fullscreen →](/demos/color-palette-generator.html)

## What it does

Type `/as: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:**

1.  Open **Customize** → **Browse plugins**
2.  Click **+** → **Add marketplace from GitHub**
3.  Enter `AlpacaLabsLLC/skills-for-architects`
4.  Install **Architecture Studio**

**Claude Code (terminal):**

```
claude plugin marketplace add AlpacaLabsLLC/skills-for-architects
claude plugin install as@skills-for-architects
```

Or symlink just this skill:

```
git clone https://github.com/AlpacaLabsLLC/skills-for-architects.git
ln -s $(pwd)/skills-for-architects/skills/color-palette-generator ~/.claude/skills/color-palette-generator
```

## Usage

From a description:

```
/as:color-palette-generator mid-century modern furniture museum in Marfa, Texas
```

From an image:

```
/as:color-palette-generator [drag in a photo or screenshot]
```

From a single color:

```
/as:color-palette-generator build a palette from #2D5A3D
```

From a brand reference:

```
/as:color-palette-generator Aesop meets Ace Hotel
```

## Output

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.

## Related skills

[01

### /resize-images

Batch-resize photos for web and print in one command

→](/skills/resize-images) [02

### /slide-deck-generator

HTML slide decks from a prompt — no PowerPoint, no dependencies

→](/skills/slide-deck-generator) [03

### /zoning-envelope

Generate interactive 3D zoning envelopes from analysis reports

→](/skills/zoning-envelope)

[← All skills](/skills) [Resize Images →](/skills/resize-images)