Color Scheme Generator

カラースキーム生成 MCP サーバー

これは、The Color API を使用して調和の取れたカラースキームを生成する Model Context Protocol（MCP）サーバーです。デザインプロジェクト向けに美しく統一感のあるカラーパレットを作成するため、複数のカラースキーム生成ツールを提供します。

機能

このサーバーは、8 種類のカラースキーム生成ツールを提供します。

1. モノクロームスキーム：単一の色相のバリエーション

   • 標準的なモノクローム
   • ダークモノクローム
   • ライトモノクローム

2. 色相環に基づくスキーム：

   • 類似色：色相環上で隣り合う色を使った調和の取れたデザイン
   • 補色：高いコントラストを生み出す反対色
   • 類似補色：類似色と補色の組み合わせ
   • トライアド：バランスの取れたパレット向けの、均等な間隔の 3 色
   • クアッド：多彩なパレット向けの、均等な間隔の 4 色

前提条件

• Node.js（v18 以降）
• npm、yarn、または pnpm
• MCP クライアント（例：Claude Desktop、Cursor）

インストール

1. クローンして依存関係をインストールします：

   git clone <repository-url>
   cd colors-mcp-server
   npm install
   

2. サーバーをビルドします：

   npm run build
   

3. MCP クライアントを設定します：

   Claude Desktop の場合（claude_desktop_config.json）：

   {
     "mcpServers": {
       "color-scheme-generator": {
         "command": "node",
         "args": ["/full/path/to/colors-mcp-server/build/index.js"]
       }
     }
   }
   

   Cursor の場合：

   • 「Settings」>「MCP」>「Add new global MCP server」を選択します
   • 上記と同じ設定を使用します

使い方

色の入力形式

サーバーは複数の形式で色を受け付けます。

• Hex："098765" または "#098765"
• RGB："0,71,171" または "rgb(0,71,171)"
• HSL："215,100%,34%" または "hsl(215,100%,34%)"

パラメーター

• color：シードカラー（必須）
• count：生成する色の数（任意、デフォルト：5、範囲：3～10）

利用可能なツール

• 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

使用例

MCP クライアントに次のように依頼します。

• 「青を基調としたモノクロームのカラースキームを生成して」
• 「#ff6b35 を使って、7 色の補色パレットを作成して」
• 「rgb(120,80,200) を基調とした類似色スキームが必要です」

出力形式

各ツールは、次の情報を含む構造化された JSON を返します。

• スキームのモードとシードカラー
• hex、RGB、HSL 値を含む生成色の配列
• 色名と位置

デバッグ

MCP Inspector を使ってデバッグします。

npx @modelcontextprotocol/inspector node ./build/index.js

プロジェクト構成

• src/index.ts：サーバーのメインエントリーポイント
• src/tools/index.ts：カラースキーム生成ツール
• src/prompts/index.ts：使い方を案内するプロンプト
• build/：コンパイル済み TypeScript の出力