画像カラーパレット抽出

このツールの役割

UI モックアップ、ブランド素材、商品写真、ストック画像 — 任意の画像をドロップすると、CSS、デザイントークン、Tailwind テーマにそのまま貼り付けられるパレットが返ります。可視ピクセルを k-means でクラスタリングし、各クラスタを 1 枚のスウォッチとして提示。占有率、HEX、RGB、HSL、そして OKLCH の 5 つの読み出しが揃います。

使い方

1. アップロードカードに画像をドロップする、カードをクリックして選択する、もしくは画像をコピーした状態で Ctrl + V を押してペーストします。
2. コントロールを調整：抽出する色数 (3〜16)、ソート (頻度 / 色相 / 明度)、フィルター (透明ピクセルを除外 / 白に近い色を除外)。
3. スウォッチ上部をクリックすると HEX をコピー。下の RGB / HSL / OKLCH 行をクリックすればその表記をコピー。
4. 一括コピー：CSS 変数をコピー で :root { --color-1: …; } ブロック、JSON をコピー で {hex, rgb, weight} 配列、Tailwind をコピー で theme.extend.colors.palette スニペットが取得できます。

アルゴリズム

k-means はシンプルですがデザイナー向けパレットを生成するのに十分な手法です。画像は最長辺 200 ピクセルにダウンサンプリング。4K 写真であれば約 4 万サンプルピクセルになり、最近のラップトップで 100 ミリ秒以内に安定したセントロイドへ収束します。各ピクセルは二乗 RGB 距離が最小のセントロイドに割り当てられ、セントロイドはクラスタの平均で更新、24 回反復するか移動量が閾値を下回るまで繰り返します。

2 つの実用的な調整を加えています。1) ΔRGB < 6 のクラスタ同士は統合し、見た目が同じスウォッチが並ばないようにする。2) オプションのプリフィルタで透明ピクセルや白に近いピクセル (輝度 > 0.95) を除外し、被写体ではなく余白に引っ張られないようにする。

出力フォーマット

• HEX — 汎用フォーマット。スウォッチ上部をクリックでコピー。
• RGB — モダンなスペース区切り構文 rgb(160 90 44)。すべての現行ブラウザに対応。
• HSL — 色相 / 彩度 / 明度を素早く微調整したいときに便利。
• OKLCH — 知覚均等で、デザイントークンや色相を回転させるカラーパイプライン向け。HSL のような明度ジャンプが起きにくい。
• 占有率 — 各クラスタが原画像で占めるピクセルの割合。最大値はブランドのアクセント、それ以外は補助色として扱うのがおすすめ。

想定シナリオ

• クライアントから受け取った既存ブランド素材から主要色を逆算してデザインシステムを再構築する。
• 写真作品集や EC 商品ページで、メインビジュアルから派生した CSS トークンを生成する。
• 競合分析時、自社プロダクトと競合の LP の色構成比を並べて違いを把握する。
• 記事のアイキャッチを決めた後、見出し・引用ブロックの色を画像のパレットに合わせて選ぶ。

プライバシー

すべての処理はクライアント側で行われます。画像は HTMLImageElement にデコードされ、隠し Canvas に縮小描画され、JavaScript で k-means が走るのみ。サーバーに送信されるバイトは一切ありません。確認したい場合はネットワークパネルを開いてください。新しい画像をロードするたびに、クリーンなログが表示されるはずです。

関連ツール

• カラーパレットジェネレーター — 1 つのベース HEX から補色・類似色・トライアド・テトラッドを生成。
• カラーシェード生成器 — 任意のベース色から 9 段階の明度ランプを抽出。
• カラーコンバーター — HEX / RGB / HSL の相互変換とライブプレビュー。
• カラーコントラストチェッカー — 抽出したパレットを WCAG AA / AAA に対して検証。