画像パレット抽出
画像を縮小して代表色を集計し、配色検討に使える色見本とJSONを作ります。
結果
ここに仕上がりが表示されます
ファイルを追加するか、サンプルで試せます。
コピー・保存する前に、内容を確認できます。
入力・処理・結果はこのブラウザ内。ページ移動でも素材を使えます。再読み込み・タブ終了で消えるため、必要な結果は保存してください。
AIエージェントから使うWebMCP 試験対応
このブラウザではWebMCPが有効になっていません。通常のツール操作と下の実行テストはそのまま使えます。
「画像パレット抽出で画像から代表色を抽出する。結果を確認できる形で残してください。」
WebMCPは試験中のWeb標準です。利用には対応ブラウザと対応エージェントが必要です。MCPサーバーの接続URLではありません。AIサービスへ渡す内容は、そのサービスのデータ方針も確認してください。対応状況と使い方
入力仕様を見る · chinouken_image_palette
{
"type": "object",
"additionalProperties": false,
"required": [
"assetIds"
],
"properties": {
"colorCount": {
"type": "integer",
"description": "色の数",
"minimum": 2,
"maximum": 12,
"default": 6
},
"sampleSize": {
"type": "integer",
"description": "解析画像の長辺。縮小してから画素を集計します",
"minimum": 128,
"maximum": 2048,
"default": 1024
},
"assetIds": {
"type": "array",
"minItems": 1,
"maxItems": 30,
"uniqueItems": true,
"items": {
"type": "string",
"maxLength": 100
},
"description": "IDs of files already imported in this browser tab, in processing order. No URLs, paths or base64."
}
}
}このPCのMCPと接続する
画像を選ぶ
写真や画面キャプチャを選ぶと、透明画素を除いて代表色を集計します。
色を使う
HEXをコピーしてデザインの背景や文字色の候補に使えます。
AIエージェントへの頼み方
Claude CodeやCodexなど、MCPやWebMCPに対応したエージェントに、このページのURLを添えて次のように頼めます。ファイルは会話に添付せず、手元のパスや条件を伝えます。
- 「hero.png の代表色を8色抽出して、HEXの一覧とJSONで出して。」
- 「この2枚の画像の配色を比べて、共通している色を教えて。」