PaletteGet

paletteget-mcp

PaletteGet のカラーパレットライブラリ向け MCP サーバーです。App、Web、Mini App の UI に対応した100種類のパレットを収録し、それぞれを10のデザイン上の役割に整理して、WCAG のコントラスト要件に照らして確認しています。

AI コーディングツールが16進数の値をでっち上げないようにするためのものです。モデルは推測する代わりにツールを呼び出し、実際の役割別カラー、測定済みのコントラスト比、パレットに付属する組み合わせのアドバイスを取得します。

API キーも登録も不要です。

ホストされたエンドポイントを使用する（インストール不要）

https://paletteget-mcp.y7206062.workers.dev/mcp

{
  "mcpServers": {
    "paletteget": {
      "type": "http",
      "url": "https://paletteget-mcp.y7206062.workers.dev/mcp"
    }
  }
}

ChatGPT：Settings → Connectors → Add custom connector を開き、URL を貼り付けます。

ホストされたサーバーはデプロイ時にデータセットを埋め込むため、サイトにアクセスできるかどうかに依存せず、数ミリ秒で応答します。

またはローカルで実行する（stdio）

npm から実行（クローン不要）

npx -y paletteget-mcp

{
  "mcpServers": {
    "paletteget": {
      "command": "npx",
      "args": ["-y", "paletteget-mcp"]
    }
  }
}

プロキシ経由で使用する場合は、サーバーの env ブロックに PALETTEGET_PROXY=http://127.0.0.1:7897 を設定します。

ソースから実行

git clone https://github.com/yang7206/paletteget-mcp.git
cd paletteget-mcp
npm install

{
  "mcpServers": {
    "paletteget": {
      "command": "node",
      "args": ["/absolute/path/to/paletteget-mcp/index.mjs"]
    }
  }
}

stdio サーバーは公開 JSON エンドポイントから最新データを取得し、10分間キャッシュします。

ツール

ツール	機能
list_palettes	パレットを一覧表示します。プラットフォーム（app／web／miniapp）またはタグで絞り込むこともできます
get_palette	1つのパレットの全データを取得します。役割別カラー、コントラストの結果、人が書いた組み合わせのアドバイスが含まれます
suggest_palette	英語または中国語のキーワードからパレットをおすすめし、どのキーワードが一致したかを示します
get_css_variables	そのまま貼り付けられる、パレット用の CSS カスタムプロパティを取得します
check_contrast	任意の2色間の WCAG コントラストを、本文テキストと大きなテキストそれぞれについて判定します
suggest_text_color	指定した背景に読みやすいテキストカラーを提案します。同系色の色合いと濃淡に加え、黒と白もコントラスト順に表示します
darken_palette	公開済みのルールに従って明るいパレットからダークモード版を作成し、すべての色の組み合わせの測定済みコントラストを表示します
get_platform_snippet	1つのパレットのコードを、そのまま貼り付けられる形式で取得します。Android の colors.xml、iOS の UIColor、Flutter の Color、ミニプログラムの wxss、CSS、SCSS、または Tailwind に対応します
get_color_scale	1つの基本色から白と黒に対する各段階のコントラストを含む、50〜900のスケールを生成します。JSON、CSS、または Tailwind 形式で出力します

呼び出しと結果の例：

suggest_palette { "query": "dark finance dashboard", "limit": 2 }

- Ink Blue Night / 墨蓝夜（app，分 94）
  slug: mo-lan-ye　主色: #4c8df6
  场景: Finance & analytics apps (dark mode)
  命中: 标签:dark, 场景:finance

環境変数（stdio サーバー）

変数	デフォルト	用途
PALETTEGET_API	https://paletteget.com/api/index.json	データセットの URL を上書きします
PALETTEGET_API_ZH	derived (/zh/api/index.json)	中国語データセットの URL を上書きします
PALETTEGET_CACHE_MS	600000	キャッシュの有効期間（ミリ秒）
PALETTEGET_PROXY	none	プロキシ経由でリクエストを送信します（例：http://127.0.0.1:7897）。HTTPS_PROXY も認識します。

ファイアウォール環境では、Node の組み込み fetch は通常のプロキシ環境変数を無視するため、PALETTEGET_PROXY を明示的に設定してください。

テスト

npm run smoke

スモークテストは MCP stdio プロトコルと直接通信し、ローカルのフィクスチャに対してすべてのツールを実行するため、オフラインで実行できます。本番環境に対してテストするには、PALETTEGET_API を稼働中のサイトに向けてください。

ホストされたワーカーの保守

ワーカー（worker.mjs）は、SDK に依存しない MCP Streamable HTTP（initialize、tools/list、tools/call、ping）の手書きによるステートレスなサブセットです。これにより、Workers に適した小さな実装になっています。

# 1. Regenerate the embedded dataset (run both locales)
SITE_URL=https://paletteget.com SITE_LOCALE=zh node --import ./alias-loader.mjs build-data.mjs
SITE_URL=https://paletteget.com SITE_LOCALE=en node --import ./alias-loader.mjs build-data.mjs

# 2. Local check
npx wrangler dev          # POST JSON-RPC to http://127.0.0.1:8787/mcp

# 3. Deploy (needs CLOUDFLARE_API_TOKEN with Workers Scripts:Edit)
npx wrangler deploy

build-data.mjs は alias-hooks.mjs を通じてサイト独自の i18n モジュールを再利用するため、名前、シーン、アドバイスは公開済みサイトと同じ内容になります。data/ はビルド時に生成され、コミットされることはありません。

データとライセンス

コードはMITライセンスです（LICENSEを参照）。パレットデータの提供元はpaletteget.comです。個人プロジェクトおよび商用プロジェクトで自由に再利用できます。クレジットリンクを記載していただけると幸いです。

MCPを使わずに利用したい場合は、同じデータを機械可読形式でも利用できます。

• 全データセット：https://paletteget.com/api/index.json
• 単一のパレット：https://paletteget.com/palette-list/{platform}/{slug}/index.json
• CSS変数：https://paletteget.com/palette-list/{platform}/{slug}/index.css
• エージェントガイド：https://paletteget.com/llms.txt