PickShade color tools

PickShade MCP サーバー

AI アシスタント向けのカラー ツールです。あらゆる色の変換、名前による色の検索、WCAG 2 および APCA のコントラストの確認と修正、アクセシビリティや色覚特性に配慮したパレットの監査、グラデーションやスケール、デザインシステム全体の構築、CSS、Tailwind v4、SCSS、DTCG 用のトークンのエクスポートができます。

すべての計算は CSS Color 4（OKLCH、OKLab、Display P3、Rec. 2020）に準拠しており、ローカルで決定論的に実行されます。API キー、アカウント、テレメトリーは不要です。

ウェブサイトとドキュメント：pickshade.com/mcp

ホスト型サーバーを使用する

インストール不要です。Streamable HTTP エンドポイント：

https://pickshade.com/api/mcp

Claude Code：

claude mcp add --transport http pickshade https://pickshade.com/api/mcp

mcpServers を読み取る Cursor、VS Code、その他のクライアント：

{
    "mcpServers": {
        "pickshade": { "url": "https://pickshade.com/api/mcp" }
    }
}

stdio 経由でローカル実行する

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

Node.js 20 以降が必要です。

ツール

すべてのツールは、色を HEX、rgb()、hsl()、oklch()、navy のような CSS 名、royal blue や бордовый のような一般的な名称、sky-500 のような Tailwind クラスで指定できます。

ツール	機能
parse_color	あらゆる色の各種形式、最も近い色名と Tailwind クラス、色域、最適な文字色を取得します
convert_color	HEX、RGB、HSL、HSV、HWB、CMYK、Lab、LCH、OKLab、OKLCH、Display P3、Rec. 2020、XYZ、SwiftUI、Flutter に変換します
find_colors	"sage" や "dusty rose" のような単語を実際の HEX 値に変換します
check_contrast	WCAG 2 の比率と AA および AAA のレベル、ならびに適用可能な用途を示す APCA Lc を確認します
fix_contrast	色相を維持するため、OKLCH の明度だけを変更してコントラスト目標を達成する最も近い色を見つけます
audit_palette	パレット内のすべての文字色と背景色の組み合わせ、色覚特性による競合、色域外の色を確認します
check_gamut	色が sRGB、Display P3、Rec. 2020 に収まるか確認します
nearest_names	知覚的な距離に基づいて、最も近い色名、CSS キーワード、Tailwind クラスを見つけます
compare_colors	CIEDE2000 と deltaE OK の差を、分かりやすい判定、明度、彩度、色相の変化とともに比較します
generate_scale	Tailwind パレットと同じ形状で、知覚される明度が均等な OKLCH の 11 段階（50～950）のスケールを生成します
tints_shades	色のティント、シェード、トーンを生成します
harmonies	OKLCH で補色、分裂補色、類似色、3 色配色、4 色配色、スクエア配色、単色配色を生成します
mix_colors	CSS の color-mix() のように、選択した色空間で 2 色を混合します
make_gradient	グレーの中間色を挟まず、OKLab または OKLCH で補間した CSS グラデーションを生成します
generate_palette	シード値で再現可能な、OKLCH の調和のとれたパレットを生成します
simulate_cvd	1 型色覚、2 型色覚、3 型色覚、全色盲をシミュレーションし、見分けにくくなる色の組み合わせを示します
export_tokens	CSS 変数、Tailwind v4 の @theme、SCSS、JSON、DTCG トークン、JS 配列、SVG の色見本ストリップをエクスポートします
build_system	1 つのブランドカラーから、スケール、ライトモードとダークモードのロール、shadcn/ui、Tailwind エクスポートを含むカラーシステム全体を構築します

プロンプト

• accessible_theme：ブランドカラーから、すべての文字色の組み合わせを確認したライトテーマとダークテーマを生成します
• audit_colors：色のリストについて、読みやすい組み合わせ、色覚特性による競合、色域を確認します
• describe_color：色の値、名前、コントラスト、一致する色を、分かりやすい言葉で説明します

REST API

同じツールを HTTP 経由で利用できます。JSON を入力し、JSON を出力します：pickshade.com/api。OpenAPI 3.1 は https://pickshade.com/api/v1/openapi.json にあります。

ライセンス

MIT。meodai/color-names のデータ（MIT）と、Tailwind CSS の Tailwind パレット値（MIT）が含まれています。