Color Scheme Generator MCP Server

Color Scheme Generator MCP Server

This is a Model Context Protocol (MCP) server that generates harmonious color schemes using The Color API. It provides multiple color scheme generation tools for creating beautiful and cohesive color palettes for design projects.

Features

The server provides 8 different color scheme generation tools:

1. Monochrome Schemes: Variations of a single hue
   • Standard monochrome
   • Dark monochrome
   • Light monochrome
2. Color Wheel Based Schemes:
   • Analogic: Adjacent colors on the color wheel for harmonious designs
   • Complement: Opposite colors for high contrast
   • Analogic Complement: Combination of analogic and complement
   • Triad: Three evenly spaced colors for balanced palettes
   • Quad: Four evenly spaced colors for diverse palettes

Prerequisites

• Node.js (v18 or later)
• npm, yarn, or pnpm
• An MCP client (e.g., Claude Desktop, Cursor)

Installation

1. Clone and install dependencies:
   git clone <repository-url> cd colors-mcp-server npm install
2. Build the server:
   npm run build
3. Configure your MCP client:For Claude Desktop (claude_desktop_config.json):
   { "mcpServers": { "color-scheme-generator": { "command": "node", "args": ["/full/path/to/colors-mcp-server/build/index.js"] } } }
   For Cursor:
   • Go to Settings > MCP > Add new global MCP server
   • Use the same configuration as above

Usage

Color Input Formats

The server accepts colors in multiple formats:

• Hex: "098765" or "#098765"
• RGB: "0,71,171" or "rgb(0,71,171)"
• HSL: "215,100%,34%" or "hsl(215,100%,34%)"

Parameters

• color: The seed color (required)
• count: Number of colors to generate (optional, default: 5, range: 3-10)

Available Tools

• generate_monochrome_scheme
• generate_monochrome_dark_scheme
• generate_monochrome_light_scheme
• generate_analogic_scheme
• generate_complement_scheme
• generate_analogic_complement_scheme
• generate_triad_scheme
• generate_quad_scheme

Example Usage

Ask your MCP client:

• "Generate a monochrome color scheme from blue"
• "Create a complementary palette using #ff6b35 with 7 colors"
• "I need an analogic scheme from rgb(120,80,200)"

Output Format

Each tool returns a structured JSON with:

• Scheme mode and seed color
• Array of generated colors with hex, RGB, HSL values
• Color names and positions

Debugging

Use the MCP Inspector to debug:

Project Structure

• src/index.ts: Main server entry point
• src/tools/index.ts: Color scheme generation tools
• src/prompts/index.ts: Usage guidance prompts
• build/: Compiled TypeScript output