画像カラーピッカー・パレット抽出ツール
任意の画像から主要な色と平均色をブラウザ内で抽出し、それぞれコピー可能な HEX 値で表示します。
画像カラーピッカー・パレット抽出ツール — 任意の画像をドロップするだけで、そのカラーパレットをすぐに取り出せます——最も支配的な色に加えて全体の平均色まで、それぞれにスウォッチとワンクリックの HEX コピーボタンが付きます。抽出する主要色の数（2〜12）は自分で選べます。画像は HTML canvas を使ってすべてブラウザ内で読み取られ、サーバーにアップロードされることはありません。
画像カラーピッカー・パレット抽出ツールとは？
画像カラーピッカーは、任意の画像から主要な色と平均色をブラウザ上で直接抽出する無料のオンラインパレット抽出ツールです。デザイナーやフロントエンド開発者、ブランドやムードボードを作る人なら誰でも、写真・ロゴ・スクリーンショットをドロップするだけで数秒で HEX パレットを得られます。HTML canvas の getImageData で画像のピクセルを読み取り、色をバケットに量子化し、各色の出現頻度で並べ替えるため、よく使われている色が上位に来ます。パレットサイズ（抽出する主要色の数、2〜12）を設定でき、各色はコピー可能な HEX 値とともにスウォッチで表示され、画像全体の平均色もあわせて示されます。
画像カラーピッカー・パレット抽出ツールの使い方
- 画像をドロップゾーンにドラッグ＆ドロップするか、クリックして端末からファイル（PNG、JPEG、WebP、またはブラウザで開けるその他の画像）を選びます。
- 「パレットサイズ」フィールドで、抽出したい主要色の数を 2 から 12 の間で設定します。
- 「平均色」の行で、画像全体を混ぜ合わせた単一の平均色を HEX 値とともに確認します。
- 「主要な色」のリストで、最も多い色から順に並んだ色を、それぞれスウォッチと HEX 値とともに確認します。
- 任意の色の横にあるコピーボタンをクリックして、その HEX 値をクリップボードにコピーします。
使用例
ロゴからブランドパレットを取り出す
ロゴの PNG をドロップし、「パレットサイズ」を 4 に設定すると、最もよく使われている 4 色が HEX スウォッチとして得られ、そのままデザイントークンや CSS 変数に貼り付けられます。
写真に合う背景トーンを見つける
メインビジュアルの写真を読み込み、「平均色」の行を見ると、画像全体と調和する単一の混合 HEX 値が得られ、セクションの背景色やフォールバック色として使えます。
イラストからより大きな色板を作る
色彩豊かなイラストをドロップし、「パレットサイズ」を 12 まで上げると、画像を占める割合の順に並んだ幅広い主要色を抽出できます。
よくある質問
- どんな画像形式を使えますか？
- ブラウザで開ける任意の画像（ドロップゾーンは image/* を受け付けます）で、PNG、JPEG、WebP を含みます。画像は HTML canvas に描画され、そのピクセルがローカルで読み取られて色が抽出されます。
- 主要な色はどのように選ばれますか？
- ツールは画像のピクセルを読み取り、似た色を同じバケットにまとめ、各バケットに入るピクセル数で並べ替えます。上位のバケットがあなたの主要色となり、最も多い色から順に表示され、それぞれそのバケットの平均色になります。
- 色は何色まで抽出できますか？
- 「パレットサイズ」は 2 から 12 色の主要色の間で設定します。そのリストに加えて、画像全体の平均色が常に別途表示されます。
- 色が元の画像と少し違って見えるのはなぜですか？
- 高速化のため、大きな画像は読み取り前に縮小され、似た色はまとめられます。そのため各スウォッチは正確な 1 ピクセルの色ではなく、グループの平均色です。結果はピクセル単位の色取得ではなく、忠実な代表パレットになります。
- 画像はどこかにアップロードされますか？
- いいえ。画像は HTML canvas を使ってブラウザ内で 100% 処理されます。deftdeck やいかなるサーバーにもアップロードされないため、オフラインでも動作し、画像のプライバシーが保たれます。