無料カラーパレット抽出ツール

画像からの色抽出の仕組み

画像からのコンピュータ抽出パレットは、2つの古典的なアルゴリズムのいずれかから生成される：

• K-meansクラスタリング（Lloyd 1982；基礎的なアイデアはMacQueen 1967とForgy 1965に遡る）。カラーキューブ内にK個のランダムな色の重心を選び、各ピクセルを最も近い重心に割り当て、割り当てられたピクセルの平均として重心を再計算し、重心が動かなくなるまで繰り返す。最終的なK個の重心が支配的な色だ。
• メディアンカット量子化（Heckbert、SIGGRAPH 1982）。最も広い次元に沿ってカラーキューブを再帰的に分割し、毎回ピクセル集団を2つの等しい半分に分ける。K回の分割後にK個のボックスができ、各ボックスの平均色がパレットエントリーの1つとなる。これは人気のColor Thief JavaScriptライブラリが使用するアルゴリズムで、歴史的にはインデックスカラー画像（GIF・PNGパレット）が数百万色から256色に削減される方法だ。

どちらの方法もはるかに大きなピクセル集団から少数の代表的な色を生成するが、トレードオフが異なる。K-meansはより柔軟だが、ランダムシードと外れ値に敏感だ。メディアンカットは決定論的で色空間のカバレッジのバランスが取れているが、画像が多くのピクセルを費やす狭い領域を過剰に表現する可能性がある。

RGBの距離が嘘をつく理由

微妙だが重要な注意点：単純なRGB空間でのクラスタリングは、人間の知覚に常に一致しない結果をもたらす。RGBはハードウェア駆動の座標系で、その中の距離は原色間の電子的な差異に対応しており、色間の知覚的な差異ではない。あなたには同一に見える2つの緑は、明らかに異なって見える緑と赤よりもはるかに大きなRGB距離を持つことがある。

より正確なクラスタリングはCIELAB（CIE 1976 L*a*b*）で行われる。これは空間内のユークリッド距離が人間が知覚する2色間の差を近似するように特別に設計された色空間だ。Adobe ColorやデザインシステムのスウォッチジェネレーターはCIELABまたはCIELCHでクラスタリングを行う。CSS Color Module Level 4（W3C、2022年）はウェブデザイナーがこれらの空間に直接アクセスできるようlab()・lch()・oklab()・oklch()関数を追加した。知覚的に均一なパレット補間が必要なときに有用だ。CSSの仕様はw3.org/TR/css-color-4にある。

HEX・RGB・HSL、正しいフォーマットの選び方

3つの記法はすべて同じ色を表す；それらは単に異なる書き方だ。

• HEX：#RRGGBB。6桁の16進数、チャンネルあたり2桁、範囲00-FF（0-255）。ウェブで最も一般的なフォーマット。コンパクトでコピー貼り付けしやすく、どこでもサポートされている。
• RGB：rgb(255, 128, 0)。同じ数値、異なる記法。CSSはアルファ用にrgba(255, 128, 0, 0.5)を追加する。
• HSL：hsl(30, 100%, 50%)。色相（0-360°）、彩度（0-100%）、明度（0-100%）。デザイナーにとって理解しやすい。「同じ色相でより高い彩度」はHSLでは1つの数値変更だが、RGBでは複数チャンネルの調整が必要だ。
• OKLCH：oklch(70% 0.15 30)。現代的な知覚的に均一なHSLの代替。同じ明度の数値は色相を越えて同じ知覚的な明るさを意味する。これはHSLが有名に間違える点だ（HSLで50%の明度の黄色は50%の青よりもはるかに明るく見える）。

ほとんどのウェブ作業ではHEXをコピーするとよい。プログラム的なパレット操作（10%明るくする、色相を30°シフト）には、操作がクリーンなHSLまたはOKLCHを使う。

支配的 ≠ 有用

単純な「最頻出の色」の抽出はしばしば失望させる。青い空を背景にした人物のポートレートは統計的には空のピクセルと肌のトーンに支配されているが、視覚的に興味深い色の物語は被写体の衣服にあるかもしれない。大きな中立的な背景がある写真では、その中立色が「支配的な」色として出てくる。強いJPEG圧縮はあたかも本物であるかのようにクラスタリングされるアーティファクトの色を生成する。

高度なパレットツールは、彩度・支配的な背景とのコントラスト・知覚的な「興味深さ」、または人間の視覚にインスパイアされたItti-Kochの顕著性モデルによって検出された顕著な領域に色が現れるかどうかによって重み付けを行う。このツールを含むほとんどのオンラインツールは、シンプルな頻度ベースのクラスタリングを使用している。速く予測可能で、写真・イラスト・アートワークからパレットを抽出する一般的なケースには十分だ。

一般的な使用例

• ブランドマッチング：デザイナーはクライアントのロゴやヒーロー写真からパレットを抽出して、サイト全体を視覚的に一貫させる。
• ムードボード：インスピレーションの画像（映画のスチル・写真・絵画）からパレットを抽出することは、色の探求を始める最速の方法だ。
• Tailwind / デザイントークンの設定：抽出したパレットをCSSカスタムプロパティまたはTailwindのcolorsマップに変換する。
• スライドデッキの色合わせ：デッキが衝突しないよう企業ロゴからアクセントカラーを選ぶ。
• Eコマースの製品写真：各製品の支配的な色を製品カードのスウォッチとして使用する。
• ジェネレーティブアート & データビジュアライゼーション：抽出したパレットをシェーダーコード・D3チャート・Processingスケッチに与える。
• プリントデザイン：インスピレーションの画像から初期の色セットを取得し、プリントデザインソフトウェアでPantoneまたはCMYKに合わせる。

ブラウザのみが重要な理由

写真には画像だけ以上のものが含まれることが多い。EXIFメタデータには、写真が撮影されたGPS座標・カメラのシリアルナンバー・撮影者の名前・ソフトウェアの指紋が含まれることがある。スクリーンショットには機密のUI・草稿テキスト・リリース前のブランディングが含まれる可能性がある。個人の写真にはどこかにアップロードすることに同意していない人の顔が含まれることがある。パレットの抽出はそのいずれも必要としない（ピクセルデータだけが必要だ）。ブラウザがローカルで分析できるのに、画像全体をサーバーに送る正当な理由はない。

このツールは画像をオフスクリーンのCanvasに描画し、getImageData()でピクセルデータをサンプリングし、クラスタリングを実行して結果を表示する。何もページの外に出ない；タブを閉じた後も画像は保持されない。Adobe Color・Coolorsの画像ピッカーなどのサーバーサイドのパレットツールはファイル全体をアップロードする。それぞれにプライバシーとのトレードオフがある。

出力の扱い方

抽出したパレットができたら、通常は：

1. キュレーション。5色の自動抽出には通常、3色の有用な色・1色の冗長な近似色・1色の濁ったミッドトーンが含まれる。濁ったものを削除し、重複を取り除く。
2. 役割の割り当て。1色をプライマリブランドカラー、1色をセカンダリ、1〜2色をアクセント、1色をニュートラルとして指定する。現代のブランドシステムは多くの場合、ニュートラルな背景・2つのアンカー・1つのアクセントを求めている。最大5色だ。
3. 明/暗スケールの生成。各アンカーカラーから、ホバー状態・背景・色味のバリアントのために9〜11のシェードを派生させる。Tailwindのカラースケールジェネレーターや「Refactoring UI」のパレットセクションにはよく知られたレシピがある。
4. コントラストのテスト。テキストと背景のペアをWCAGコントラストチェッカーで確認する。レベルAAは通常本文テキストに4.5:1、大きなまたは太いUIコンポーネントに3:1を必要とする。
5. 色覚異常のテスト。男性のおよそ12人に1人が何らかの色覚異常を持っている。パレットを確定する前にCVDシミュレーターで確認する。

よくある間違い

1. 抽出した5色をすべてそのままブランドパレットとして使用する。自動抽出は出発点であり、完成したパレットではない。キュレーションが必要だ。
2. 強く圧縮されたJPEGから色を選ぶ。圧縮アーティファクトが偽のパレットエントリーを生成する。可能であれば高品質なソースから始めること。
3. 複雑な写真での最初の実行を信頼する。異なるK値（色の数）は劇的に異なる結果をもたらす。5・8・12で試して、どのサイズが画像に合うか確認する。
4. 表示されるページを考慮せずに写真からパレットを作成する。落ち着いた写真由来のパレットは単独では美しく見えるが、白いサイトの背景に対しては消えてしまうことがある。コンテキスト内でテストすること。
5. コントラストを無視する。美しいパレットでも、テキストと背景が2:1のコントラストでペアになりWCAGに不合格になることがある。常に確認すること。
6. 「支配的」が「背景」を意味することを忘れる。ポートレートで最も頻出する色はしばしば被写体の衣服ではなく被写体の背後の壁だ。

よくある質問

透明なPNGで動作しますか？

はい。透明なピクセルは通常サンプリング中にスキップされるため、パレットは可視のコンテンツのみを反映する。透明な背景と色付きロゴのPNGをアップロードすれば、抽出されたパレットはロゴの色になり、汚染されたニュートラルにはならない。

アニメーションGIFはどうなりますか？

ブラウザの画像デコーダーは通常Canvas APIに最初のフレームを渡すため、パレットはフレームゼロから抽出される。すべてのフレームにわたるパレットを求める場合は、各フレームを別々に抽出して結果を組み合わせる必要がある。これは静止画像ツールの対象外だ。

元の画像はどこかにアップロードされますか？

いいえ。画像はブラウザのCanvas要素に読み込まれ、getImageData()でピクセルデータが読み取られ、クラスタリングはデバイス上のJavaScriptで実行される。画像のバイトはいかなるサーバーにも送信されない。ソースにEXIF GPS・顔・機密UIのスクリーンショット・未公開の製品画像が含まれている場合、これが重要だ。

パレットが実行のたびに変わるのはなぜですか？

K-meansは初期のランダムな重心配置に依存するため、同じ画像での2回の実行が若干異なる局所最小値に収束することがある。差異は通常微妙（1つの近似色が似たシェードで置き換えられる）だが見えることがある。メディアンカットは決定論的で、同じ入力には毎回同じ出力が得られる。ツールが同じ画像に対して著しく異なるパレットを返す場合、ランダム化アルゴリズムを使用しており、これは期待される動作だ。

抽出した色を商業的に使用できますか？

色自体には著作権がない；HEX値はピクセルに関する事実だ。しかし抽出元の画像には著作権があるかもしれない。誰かの写真からパレットを引き出すことはインスピレーションとして問題ないが、写真やその商標要素を再現することは別の問題だ。色を合わせて、画像は合わせないこと。

これはカラーピッカーツールとどう違いますか？

カラーピッカーは指定した特定のピクセル位置の色を読み取る。このツールは画像全体を分析して最も代表的なパレットを返す。目的が異なる：ピッカーは「この正確な色は何か？」のためのもので、パレット抽出ツールは「全体的な支配的な色は何か？」のためのものだ。デザイナーのワークフローにはどちらも必要だ。