| namespace | aiwg |
| name | color-palette |
| description | Generate, analyze, compare, export, and suggest color palettes using color theory. Use when user asks about colors, palettes, color schemes, or needs help choosing colors for a project. |
| version | 1.0.0 |
| platforms | ["all"] |
Color Palette Skill
Purpose
Provide comprehensive color palette tooling: generate palettes from seed colors, analyze existing palettes, compare options, export to development formats, and suggest palettes based on project context.
When This Skill Applies
- User asks to "generate a color palette" or "pick colors"
- User provides a color and wants complementary/matching colors
- User asks to "analyze this palette" or "check these colors"
- User wants to export colors to CSS, Tailwind, or design tokens
- User asks to compare two palettes
- User needs color suggestions for a project type or mood
- User wants to extract colors from an image
Trigger Phrases
| Natural Language | Action |
|---|
| "Generate a palette from #3498db" | Generate palette with seed color |
| "What colors go with forest green?" | Generate complementary/harmony palettes |
| "Analyze this palette: #1a1a2e, #e94560" | Run harmony + contrast + mood analysis |
| "Compare these two palettes" | Side-by-side comparison |
| "Export my palette as Tailwind config" | Format conversion |
| "Suggest colors for a fintech app" | Industry-aware suggestion |
| "Extract colors from this image" | Dominant color extraction |
| "I need a dark mode version of this palette" | Light/dark variant generation |
Subcommands
generate
Generate a palette from a seed color, mood, or theme.
Parameters:
--seed <color> — Starting color (HEX, RGB, or HSL)--harmony <model> — Harmony model (complementary, analogous, triadic, split-complementary, tetradic, monochromatic). Default: analogous--count <N> — Number of colors to generate. Default: 5--mood <text> — Mood descriptor (professional, playful, calm, energetic, luxurious, natural)--temperature <warm|cool|neutral> — Color temperature bias
Process:
- Parse the seed color into HSL for manipulation
- Apply the selected harmony model:
| Model | Algorithm |
|---|
| Complementary | Seed + (hue + 180 degrees) |
| Analogous | Seed + (hue +/- 30 degrees) |
| Triadic | Seed + (hue + 120) + (hue + 240) |
| Split-complementary | Seed + (hue + 150) + (hue + 210) |
| Tetradic | Seed + (hue + 90) + (hue + 180) + (hue + 270) |
| Monochromatic | Seed at varied lightness (20%, 40%, 60%, 80%) and saturation |
-
Adjust for mood if specified:
- Professional: reduce saturation 10-20%, medium lightness
- Playful: increase saturation 10-20%, varied lightness
- Calm: reduce saturation 20-30%, shift toward blue/green hues
- Energetic: increase saturation, shift toward warm hues
- Luxurious: deep tones, add gold (#C9A96E) or dark accent
- Natural: earth tones, greens, warm browns
-
Generate tints and shades to fill count if needed
-
Output the palette with visualization
Output Format:
Palette: Triadic from #2D5A27
#2D5A27 ██████ Forest Green (H:113 S:37% L:25%)
#27355A ██████ Navy Shadow (H:220 S:37% L:25%)
#5A2735 ██████ Burgundy Dark (H:347 S:37% L:25%)
#4A8A3F ██████ Leaf Green (H:113 S:37% L:39%) [tint]
#3F558A ██████ Steel Blue (H:220 S:37% L:39%) [tint]
Harmony: Triadic (120 degree separation)
Temperature: Cool-neutral
Mood: Natural, grounded, trustworthy
analyze
Analyze an existing palette for harmony, contrast, accessibility, and mood.
Parameters:
--palette <colors> — Comma-separated color values
Process:
- Parse all colors into HEX, RGB, and HSL
- Identify the closest harmony model
- Calculate all pairwise contrast ratios (WCAG formula)
- Determine color temperature (average hue warmth)
- Assess color psychology associations
- Score overall palette coherence
Output: Uses templates/palette-report.md template.
compare
Compare two or more palettes side-by-side.
Parameters:
--a <colors> — First palette--b <colors> — Second palette--criteria <list> — What to compare (harmony, contrast, accessibility, mood, temperature). Default: all
Output:
Palette Comparison
Palette A Palette B
Colors: #264653,#2a9d8f,... #1a1a2e,#16213e,...
Harmony: Analogous Monochromatic
Temperature: Cool Cool
Mood: Calm, trustworthy Dark, mysterious
WCAG AA: 4/6 pairs pass 3/6 pairs pass
Avg Contrast: 5.2:1 4.1:1
Winner: ← Better accessibility → Stronger mood coherence
export
Export palette in a target development format.
Parameters:
--palette <colors> — Colors to export--format <fmt> — Target format: hex, rgb, hsl, css, tailwind, tokens--names <list> — Optional semantic names (primary, secondary, accent, etc.)
Output by format:
CSS Custom Properties
:root {
--color-primary: #264653;
--color-secondary: #2a9d8f;
--color-accent: #e9c46a;
--color-warning: #f4a261;
--color-danger: #e76f51;
}
Tailwind Config
module.exports = {
theme: {
extend: {
colors: {
primary: '#264653',
secondary: '#2a9d8f',
accent: '#e9c46a',
warning: '#f4a261',
danger: '#e76f51',
},
},
},
}
Design Tokens (JSON)
{
"color": {
"primary": { "value": "#264653", "type": "color" },
"secondary": { "value": "#2a9d8f", "type": "color" },
"accent": { "value": "#e9c46a", "type": "color" },
"warning": { "value": "#f4a261", "type": "color" },
"danger": { "value": "#e76f51", "type"
HEX List
#264653
#2a9d8f
#e9c46a
#f4a261
#e76f51
RGB
rgb(38, 70, 83)
rgb(42, 157, 143)
rgb(233, 196, 106)
rgb(244, 162, 97)
rgb(231, 111, 81)
HSL
hsl(195, 37%, 24%)
hsl(173, 58%, 39%)
hsl(43, 74%, 66%)
hsl(27, 87%, 67%)
hsl(12, 76%, 61%)
from-image
Extract dominant colors from an image.
Parameters:
- Positional: path to image file
--count <N> — Number of dominant colors to extract. Default: 5
Process:
- Read the image file
- If the platform supports image analysis (multimodal), analyze the image directly to identify dominant colors
- Report extracted palette with approximate HEX values
- Optionally run analysis on the extracted palette
Note: Accuracy depends on the AI model's visual capabilities. For pixel-perfect extraction, recommend external tools like imagemagick or colorthief.
suggest
Suggest palettes based on project type, mood, or industry.
Parameters:
--industry <name> — Industry vertical (healthcare, fintech, education, food, fashion, tech, legal, nonprofit)--style <name> — Visual style (modern, classic, bold, minimal, organic, retro)--mood <name> — Desired mood (trustworthy, energetic, calm, luxurious, playful, professional)--accessibility <level> — Required WCAG level (A, AA, AAA)--count <N> — Number of suggestions. Default: 3
Process:
- Research industry color conventions:
| Industry | Common Palettes | Reasoning |
|---|
| Healthcare | Blues, greens, whites | Trust, cleanliness, calm |
| Fintech | Navy, teal, gold accents | Trust, stability, premium |
| Education | Bright primaries, warm accents | Energy, approachability |
| Food | Warm reds, oranges, greens | Appetite, freshness |
| Fashion | Black, white, bold accent | Sophistication, contrast |
| Tech | Blues, purples, gradients | Innovation, reliability |
| Legal | Navy, burgundy, gold | Authority, tradition |
| Nonprofit | Greens, earth tones, warm hues | Growth, community |
- Apply style modifiers (modern = cleaner tones, retro = muted/dusty, bold = high saturation)
- Apply mood adjustments
- Verify accessibility compliance if level specified
- Generate 3 distinct options with rationale
Output:
Palette Suggestions: Healthcare + Modern + AA
Option 1: "Clinical Trust"
#1B4965 ██████ Deep Teal
#5FA8D3 ██████ Sky Blue
#BEE9E8 ██████ Mint Wash
#62B6CB ██████ Ocean
#CAE9FF ██████ Ice Blue
Rationale: Classic healthcare blues with modern teal anchor.
AA compliant: Yes (all text pairs meet 4.5:1)
Option 2: "Wellness Green"
#2D6A4F ██████ Forest
#40916C ██████ Sage
#74C69D ██████ Mint
#B7E4C7 ██████ Seafoam
#D8F3DC ██████ Whisper Green
Rationale: Nature-forward palette conveying growth and wellness.
AA compliant: Yes (dark-on-light pairs meet 4.5:1)
Option 3: "Modern Care"
#2B2D42 ██████ Charcoal
#8D99AE ██████ Cool Gray
#EDF2F4 ██████ Snow
#EF233C ██████ Alert Red
#D90429 ██████ Emergency
Rationale: High-contrast modern palette with clear alert hierarchy.
AA compliant: Yes (strong contrast ratios)
Color Theory Reference
Harmony Models
The color wheel is divided into 360 degrees of hue. Harmony models define mathematical relationships between hues:
- Complementary (180 degrees): Maximum contrast, vibrant when used together
- Analogous (30 degrees): Harmonious, found in nature, low contrast
- Triadic (120 degrees): Balanced, vibrant even at low saturation
- Split-complementary (150/210 degrees): Contrast with less tension than complementary
- Tetradic (90 degree intervals): Rich palette, works best with one dominant color
- Monochromatic (single hue): Unified, elegant, relies on value/saturation contrast
Color Psychology
| Color Family | Associations | Common Uses |
|---|
| Red | Energy, urgency, passion, danger | CTAs, errors, food brands |
| Orange | Creativity, enthusiasm, warmth | Accents, notifications, food |
| Yellow | Optimism, attention, caution | Highlights, warnings |
| Green | Growth, health, nature, money | Success states, eco brands |
| Blue | Trust, calm, professionalism | Corporate, tech, healthcare |
| Purple | Luxury, creativity, mystery | Premium brands, creative tools |
| Pink | Playfulness, compassion, romance | Fashion, beauty, youth brands |
| Brown | Stability, earthiness, warmth | Organic brands, vintage |
| Black | Sophistication, power, elegance | Luxury, fashion, typography |
| White | Cleanliness, simplicity, space | Backgrounds, minimalism |
| Gray | Neutrality, balance, professionalism | UI surfaces, text |
Contrast Ratio Calculation
The WCAG 2.1 contrast ratio formula:
Relative luminance L = 0.2126 * R + 0.7152 * G + 0.0722 * B
(where R, G, B are linearized: value <= 0.04045 ? value/12.92 : ((value+0.055)/1.055)^2.4)
Contrast ratio = (L1 + 0.05) / (L2 + 0.05)
(where L1 is the lighter color's luminance, L2 is the darker)
Temperature
- Warm: Hues 0-60 and 300-360 (reds, oranges, yellows, magentas)
- Cool: Hues 120-270 (greens, blues, purples)
- Neutral: Hues 60-120 and 270-300 (yellow-greens, violet transitions), or desaturated colors
Terminal Visualization
When displaying palettes in the terminal, use ANSI 24-bit color escape sequences for color blocks:
\033[48;2;R;G;Bm \033[0m # Background color block
Display format:
#RRGGBB ██████ Color Name (H:xxx S:xx% L:xx%)
If the terminal does not support 24-bit color, fall back to the closest 256-color or 16-color ANSI code.
Light/Dark Mode Variants
When generating light/dark mode variants:
Light mode (from a base palette):
- Background: lightest color or white
- Surface: second-lightest or tinted white
- Text: darkest color or near-black
- Primary: mid-range saturated color
- Accent: most vibrant color
Dark mode (from a base palette):
- Background: darkest color or near-black
- Surface: slightly lighter than background
- Text: lightest color or near-white
- Primary: lighter/more saturated variant of light-mode primary
- Accent: same hue, increased lightness for visibility
Ensure all text/background pairs meet WCAG AA (4.5:1) in both modes.
