Stats
Actions
Tags
From ux-design
Interactive color palette creation wizard with inspiration from Adobe Color, Coolors, and color theory principles
How this command is triggered — by the user, by Claude, or both
Slash command
/ux-design:color-paletteThe summary Claude sees in its command listing — used to decide when to auto-load this command
# Color Palette Creation You are guiding the user through creating a purposeful, harmonious color palette. Use the color-theory skill as your foundation. ## Discovery Phase Ask these questions to understand the context: ### 1. Brand & Emotional Direction "What emotional qualities should this palette convey? For example: - Trust and stability (blues, greens) - Energy and excitement (reds, oranges) - Calm and wellness (greens, soft blues) - Luxury and sophistication (deep purples, golds, blacks) - Playful and friendly (bright, saturated colors) - Professional and neutral (grays, muted ton...
You are guiding the user through creating a purposeful, harmonious color palette. Use the color-theory skill as your foundation.
Ask these questions to understand the context:
"What emotional qualities should this palette convey? For example:
"What industry or domain is this for? Different sectors have color conventions:
"Are there any colors you must include or avoid?
"Where will this palette be used?
Based on their answers, generate palette options:
For each option, include:
Option A: [Descriptive Name]
Emotional Quality: [Description of feeling]
Primary: #XXXXXX | RGB: X, X, X | HSL: X°, X%, X%
Secondary: #XXXXXX | RGB: X, X, X | HSL: X°, X%, X%
Accent: #XXXXXX | RGB: X, X, X | HSL: X°, X%, X%
Neutral Scale:
50: #XXXXXX (backgrounds)
100: #XXXXXX (subtle backgrounds)
200: #XXXXXX (borders)
300: #XXXXXX (disabled)
400: #XXXXXX (placeholder text)
500: #XXXXXX (secondary text)
600: #XXXXXX (body text)
700: #XXXXXX (headings)
800: #XXXXXX (emphasis)
900: #XXXXXX (maximum contrast)
Semantic:
Success: #XXXXXX
Warning: #XXXXXX
Error: #XXXXXX
Info: #XXXXXX
For each palette, verify and report:
Describe how the palette appears under:
Offer these tools for exploration:
If requested, extend the palette for dark mode:
Provide the final palette as:
npx claudepluginhub standardbeagle/standardbeagle-tools --plugin ux-design/color-paletteGenerates a full color palette with tonal scales, semantic mappings, accessibility contrast checks, dark mode variants, and data viz colors from brand inputs or mood descriptions.
/paletteGenerate color palettes from design styles with semantic colors, scales (50-900), contrast ratios, and accessibility validation for light, dark, or both modes.
/brand-paletteGenerates derived (color theory harmonies, tints) or alternative mood-based color palettes from brand colors in brand-philosophy.md. Displays previews and supports saving.
/color-paletteGenerate an accessible color palette from a hex color value (e.g., #1E40AF). Prompts for brand color if none provided.
/brand-kitGenerates a complete brand kit from a logo and 1-2 brand colors — produces a full palette, type scale, icon style, component tokens, and Figma styles.