Coolors MCP

Coolors MCP

Material Design 3 対応、CSS テーマのマッチング、画像からの色抽出、アクセシビリティへの準拠を備えた高度な色操作 MCP サーバーです。

機能

• 🎨 色空間の変換 - RGB、HSL、HSV、LAB、XYZ、Google の HCT
• 📏 知覚的な色の指標 - Delta E（76／94／2000）と HCT ベースの距離
• 🎭 Material Design 3 - トーンパレットを含む完全なテーマの生成
• 🔍 スマートなテーママッチング - 任意の色に最も近い CSS 変数を検索
• 🖼️ 画像からの色抽出 - Celebi 量子化を使用して支配色を抽出
• ♿ WCAG 準拠 - コントラスト比を自動でチェック
• 🔄 CSS のリファクタリング - テーマ変数を使った従来の色の自動置換
• 🎯 コンテキスト対応 - テキスト、背景、境界線に応じた異なるマッチング戦略
• 🌈 高度なパレット生成 - 固定色を含むパレットを作成
• 🎨 グラデーションの生成 - 複数の補間方式による滑らかなグラデーション
• 🚫 嫌われる色の分析 - 万人に嫌われる色を検出して修正
• 👁️ 色覚異常のシミュレーション - 1型／2型／3型の色覚に対応する Brettel／Machado 行列とアクセシビリティ監査
• 🆎 APCA コントラスト - 従来の WCAG 2.x 比に加え、WCAG 3 ドラフトのコントラスト（Lc）にも対応
• 🎚️ トーンスケールと状態色 - Tailwind 形式の 50–950 スケールと、HCT によるホバー／アクティブ／フォーカス／無効状態のバリエーション
• 🧬 パレットの調和スコア - 視覚的な統一感（トーン／彩度／色相の調和）を数値化し、対象を絞った修正案を提示
• 🪪 セマンティックパレット - ブランドカラー 1 色から、統一された色のファミリーでプライマリ／セカンダリ／ターシャリと成功／警告／エラー／情報の色を作成
• 📦 パレットのエクスポート - CSS カスタムプロパティ、SCSS、Tailwind 設定、W3C デザイントークン、JSON

インストール

方法 1：NPX（推奨）

インストールは不要です。直接実行できます。

Claude Desktop の設定

{
  "mcpServers": {
    "coolors": {
      "command": "npx",
      "args": ["-y", "@trishchuk/coolors-mcp"]
    }
  }
}

Claude Code の設定

claude mcp add coolors --npm-package @trishchuk/coolors-mcp

方法 2：NPM でインストール

npm install @trishchuk/coolors-mcp

方法 3：ソースから

git clone https://github.com/x51xxx/coolors-mcp
cd coolors-mcp
pnpm install
pnpm run build

クイックスタート

MCP サーバーとして実行

# Run the built server
node dist/bin/server.js

# Or use with MCP Inspector for testing
npx fastmcp inspect src/bin/server.ts

Claude Desktop で設定

Claude Desktop の設定に追加します。

{
  "mcpServers": {
    "coolors": {
      "command": "node",
      "args": ["/path/to/coolors-mcp/dist/bin/server.js"]
    }
  }
}

利用可能なツール

基本的な色操作

convert_color

色を形式間（hex、rgb、hsl、lab、hct）で変換します。

{
  "color": "#6750a4",
  "to": "hct"
}
// Output: "hct(258.1, 47.3, 41.2)"

color_distance

色間の知覚的な距離を計算します。

{
  "color1": "#6750a4",
  "color2": "#7f67be",
  "metric": "deltaE2000"
}
// Output: "Distance: 8.45"

check_contrast

2 色間のコントラストをチェックします。WCAG 2.x の輝度比（デフォルト）、APCA Lc（WCAG 3 ドラフト）、または両方の並列表示に対応しています。

{
  "foreground": "#000000",
  "background": "#ffffff",
  "algorithm": "both"  // "wcag" (default) | "apca" | "both"
}
// Output: WCAG 21.00:1 + APCA Lc 106.0

adjust_color

色を明るくする／暗くする／彩度を上げる／彩度を下げる／グレースケールにする／反転する／混ぜる操作を行います。

{
  "color": "#6750a4",
  "operation": "mix",
  "with": "#ff6b6b",
  "amount": 0.5  // weight (0-1) for mix, percent (0-100) for the others
}

パレット生成

generate_palette

カラーパレット（単色、類似色、補色、三色配色、四色配色）を生成します。

{
  "baseColor": "#6750a4",
  "type": "analogous",
  "count": 5
}

generate_palette_with_locks

特定の色を維持しながらパレットを生成します。

{
  "lockedColors": ["#6750a4", "#ff6b6b"],
  "totalColors": 7,
  "mode": "harmony",  // or "contrast", "gradient"
  "colorSpace": "lab"  // or "hsl"
}

generate_gradient

高度な補間を用いて滑らかなグラデーションを作成します。

{
  "colors": ["#6750a4", "#ff6b6b"],
  "steps": 10,
  "interpolation": "lab",  // or "hsl", "rgb", "lch", "hct"
  "easing": "ease-in-out",  // or "linear", "ease-in", "ease-out"
  "format": "css-linear"  // or "array", "hex", "css-radial"
}

Material Design 3

generate_material_theme

Material Design 3 の完全なカラーテーマを生成します。

{
  "sourceColor": "#6750a4",
  "includeCustomColors": true
}

generate_tonal_palette

Material Design のトーンパレットを作成します。

{
  "color": "#6750a4",
  "tones": [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 99, 100]
}

harmonize_colors

複数の色を調和させて、一緒に使えるようにします。

{
  "colors": ["#6750a4", "#ff6b6b", "#4ecdc4"],
  "method": "harmonize",  // or "blend", "temperature"
  "factor": 0.5
}

CSS テーマのマッチング

match_theme_color

任意の色に最も近いテーマ変数を検索します。

{
  "color": "#6850a0",
  "themeCSS": ":root { --color-primary-40: #6750a4; }",
  "context": "background",
  "minConfidence": 70
}

refactor_css_with_theme

CSS をテーマ変数を使うように自動でリファクタリングします。

{
  "css": ".button { background: #6750a4; }",
  "themeCSS": ":root { --color-primary-40: #6750a4; }",
  "preserveOriginal": true,
  "generateReport": true
}

generate_theme_css

完全なテーマの CSS カスタムプロパティを生成します。

{
  "sourceColor": "#6750a4",
  "prefix": "color",
  "includeTones": [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 99, 100]
}

画像からの色抽出

extract_image_colors

Celebi 量子化を使用して、画像から支配色を抽出します。

{
  "imageData": {
    "data": [/* RGBA array */],
    "width": 1920,
    "height": 1080
  },
  "maxColors": 5,
  "quality": "high",
  "format": "json"
}

generate_theme_from_image

画像の色から Material Design テーマを生成します。

{
  "imageData": {/* image data */},
  "isDark": false,
  "includeCustomColors": true
}

視覚的な調和

generate_tonal_scale

1 色のシードカラーから、Tailwind 形式の 50/100/.../900/950 スケールを作成します。HCT を使用するため、色相にかかわらず各ステップの知覚的な差が均等になります。

{
  "seed": "#6750a4",
  "name": "brand",        // CSS variable base name
  "chromaBoost": 1,       // multiplier on seed chroma
  "stops": [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
}

generate_state_colors

ベースカラーから、一貫した色調の変化に基づいてインタラクション状態（ホバー／アクティブ／押下／フォーカス／無効／選択済み）の色を導き出します。

{
  "base": "#6750a4",
  "isDark": false   // true to lighten on hover instead of darkening
}

analyze_palette_consistency

パレットの視覚的な一貫性を評価します。色調の段階の均一性、彩度の広がり、色相の調和を確認し、0～100のスコアと具体的な改善案を提示します。

{
  "colors": ["#6750a4", "#7f67be", "#a48dc8", "#ff0000"]
}
// Output: cohesion 77/100 + outlier #ff0000 (chroma 105 vs avg 60)

generate_semantic_palette

ブランドカラーを1色指定すると、彩度と色調を正規化したプライマリ／セカンダリ／ターシャリに加え、成功／警告／エラー／情報を表す色を生成し、すべての色を同じ系統にまとめます。

{
  "brand": "#6750a4",
  "isDark": false
}

アクセシビリティと色覚特性

simulate_color_blindness

色が、1型色覚／2型色覚／3型色覚の人（より軽度の異常型や全色盲を含む）にどのように見えるかをシミュレーションします。Machado方式の線形sRGB混同線行列を使用します。

{
  "colors": ["#e63946", "#2a9d8f"],
  "types": ["protanopia", "deuteranopia"]  // optional, defaults to all 7
}

check_palette_accessibility

色覚特性に配慮したパレットかどうかを監査し、各CVDタイプで区別しにくくなる色の組み合わせを特定します。

{
  "colors": ["#e63946", "#2a9d8f", "#264653", "#f4a261"],
  "indistinguishableThreshold": 10  // ΔE2000 below which colors collide
}

パレットのエクスポート

export_palette

パレットをCSSカスタムプロパティ、SCSS変数、Tailwind設定スニペット、W3Cデザイントークン、またはJSON形式でエクスポートします。

{
  "colors": ["#fef3c7", "#fde68a", "#fcd34d"],
  "format": "tailwind",   // "css" | "scss" | "tailwind" | "tokens" | "json"
  "prefix": "amber",
  "names": ["50", "100", "200"]   // optional, default uses 50/100…900 scale
}

色彩心理

analyze_color_likability

色が、多くの人に嫌われる色の範囲に該当するかを確認します。

{
  "color": "#6b6b00"  // Dark yellow-green
}
// Output: Analysis with fix suggestions

fix_disliked_colors_batch

複数の嫌われる色を自動的に調整します。

{
  "colors": ["#6b6b00", "#7a7a10", "#808020"],
  "strategy": "hue_shift"  // or "desaturate", "brighten"
}

色彩科学

HCT色空間

GoogleのHCT（Hue、Chroma、Tone）色空間では、次の値を使用します。

• Hue（0～360°）：色相環上の位置
• Chroma（0～150）：色の強さ
• Tone（0～100）：WCAGコントラストが保証された明度

主なメリット：

• 色調差40 = コントラスト比3:1
• 色調差50 = コントラスト比4.5:1
• UIデザインに適した知覚的な均一性

補間方法

グラデーション生成に使用する色空間：

• RGB：シンプルですが、濁った色になることがあります
• HSL：色相に基づく変化に適しています
• LAB：明るさが知覚的に均一です
• LCH：円筒形のLABで、色相が滑らかに変化します
• HCT：Material Design向けに最適化されています

テーママッチングアルゴリズム

複数の要素に基づくスコアリングシステム：

1. 知覚的距離（60%） - HCTに基づく類似度
2. 意味的なコンテキスト（20%） - 用途への適合性
3. アクセシビリティ（20%） - コントラスト要件への適合性

開発

このプロジェクトではpnpmを使用しています。npm i -g pnpmまたはcorepack enableを実行して、初回のみインストールしてください。

# Install dependencies
pnpm install

# Build the project
pnpm run build

# Run tests
pnpm test

# Format code
pnpm run format

# Lint
pnpm run lint

アーキテクチャ

src/
├── bin/
│   └── server.ts               # MCP server entry
├── tools/                      # Tool implementations
│   ├── color-conversion.tool.ts
│   ├── color-distance.tool.ts
│   ├── contrast-checker.tool.ts
│   ├── palette-generator.tool.ts
│   ├── palette-with-locks.tool.ts
│   ├── gradient-generator.tool.ts
│   ├── material-theme.tools.ts
│   ├── theme-matching.tools.ts
│   ├── image-extraction.tools.ts
│   └── dislike-analyzer.tool.ts
├── color/                      # Core color utilities
│   ├── conversions.ts          # Color space conversions
│   ├── metrics.ts              # Distance calculations
│   ├── utils.ts                # Color utilities
│   ├── hct/                   # HCT color space
│   ├── quantize/               # Celebi quantization
│   ├── score/                  # Color scoring
│   └── dislike/                # Dislike analysis
└── theme/                      # Theme system
    ├── parser.ts               # CSS parsing
    ├── matcher.ts              # Variable matching
    └── refactor.ts             # CSS refactoring

ユースケース

デザインシステムの移行

ハードコードされた色を、信頼度スコア付きでCSS変数に変換します。

アクセシビリティ要件への準拠

すべての色の組み合わせがWCAG AA／AAA基準を満たすようにします。

Material Designの導入

色調パレットを含むMaterial Design 3のテーマ一式を生成します。

ブランドカラーの調和

互いに調和する統一感のあるパレットを作成します。

画像に基づくテーマ作成

ロゴや写真から色を抽出し、それに合ったテーマを生成します。

グラデーションのデザイン

現代的なUI向けに、滑らかで知覚的に均一なグラデーションを作成します。

コントリビューション

コントリビューションを歓迎します。以下を確認してください。

• テストが通ること（pnpm test）
• コードがフォーマットされていること（pnpm run format）
• 型チェックが通ること（pnpm run lint）

ライセンス

MIT © Taras Trishchuk

クレジット

• AnthropicのMCP SDKを使用
• GoogleのMaterial Color Utilitiesのアルゴリズムを採用
• HCT色空間はMaterial Design 3向けに開発
• 最適な色抽出にCelebi量子化アルゴリズムを使用