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.

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:

1. Research industry color conventions:

2. Apply style modifiers (modern = cleaner tones, retro = muted/dusty, bold = high saturation)
3. Apply mood adjustments
4. Verify accessibility compliance if level specified
5. 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

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.