Color System Generator MCP Server

Interactive color palette editor with WCAG contrast checking, color harmony modes, and CSS/Tailwind export.

Features

• Color Harmony Generation: Create palettes using analogous, complementary, triadic, monochromatic, or split-complementary harmonies
• Shade Generation: Auto-generate 11 shade levels (50-950) from any base color
• WCAG Contrast Checking: Verify contrast ratios against AA/AAA accessibility standards for text
• CSS Variables Export: Generate :root CSS variables for all palette colors and shades
• Tailwind Configuration: Export Tailwind config snippets ready to copy into your project
• Interactive UI: Built-in editor for real-time palette exploration and refinement

Installation

npm install @gongrzhe/server-color-system-generator

Usage

As a CLI

npx @gongrzhe/server-color-system-generator

Claude Desktop Configuration

Add to your claude_desktop_config.json:

{
  "mcpServers": {
    "color-system-generator": {
      "command": "npx",
      "args": ["-y", "@gongrzhe/server-color-system-generator"]
    }
  }
}

Claude Code Configuration

claude mcp add color-system-generator -- npx -y @gongrzhe/server-color-system-generator

Tools

generate-palette

Generates a color palette from a base color using color theory harmonies, with shades and WCAG contrast checks.

Input:

• baseColor (string, required): Base color in hex format (e.g., #2563eb)
• mode (string, optional): Color harmony mode (analogous, complementary, triadic, monochromatic, split-complementary). Defaults to analogous

Output:

• baseColor: Original color in hex, HSL, and RGB formats
• palette: Array of harmony colors with:
  • Color formats (hex, HSL, RGB)
  • Contrast ratios against white and black
  • WCAG AA/AAA compliance flags
• shades: 11 shade levels (50-950) in hex
• cssVariables: CSS :root variables ready to paste
• tailwindConfig: Tailwind configuration snippet

check-contrast

Checks the WCAG contrast ratio between two colors and reports AA/AAA compliance.

Input:

• foreground (string, required): Foreground color in hex format
• background (string, required): Background color in hex format

Output:

• ratio: Calculated contrast ratio (e.g., 4.5:1)
• wcagAA: Whether it meets WCAG AA standard for normal text
• wcagAAA: Whether it meets WCAG AAA standard for normal text
• wcagAALargeText: Whether it meets WCAG AA standard for large text (18pt+)

Example Prompt

Generate a color system palette from the base color #3B82F6 using triadic harmony

This will:

1. Create a 3-color triadic harmony (blue, orange, yellow)
2. Generate 11 shades for each color
3. Check contrast ratios against white and black backgrounds
4. Return CSS variables and Tailwind configuration

License

MIT