Color Palette

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

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:

1. Parse the seed color into HSL for manipulation
2. Apply the selected harmony model:

3. 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

4. Generate tints and shades to fill count if needed

5. 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:

1. Parse all colors into HEX, RGB, and HSL
2. Identify the closest harmony model
3. Calculate all pairwise contrast ratios (WCAG formula)
4. Determine color temperature (average hue warmth)
5. Assess color psychology associations
6. 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": "color" }
  }
}

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:

1. Read the image file
2. If the platform supports image analysis (multimodal), analyze the image directly to identify dominant colors
3. Report extracted palette with approximate HEX values
4. 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.